Some Trade Secrets

1. Be Open For Business 24 Hours a Day

Your business is open to the world 24 hours a day, 7 days a week with no labour costs. An online store never closes. And a website faces no time zone barriers.

2. Look Big, Important, and Credible

If you still do not have a Web presence you are inadvertently making a statement about your inability to embrace technology and adapt to change in today’s dynamic environment. Especially for a small business, a well-designed website is a great way of creating credibility and looking bigger than you actually are. When one compares the cost of establishing a website to what it costs to promote a business on the traditional media (newspaper, radio, television), it is evident that a website is the cheapest form of marketing ever created.

3. Make Information Always Available

You can provide 24 hour customer services without hiring any additional employees. Your customers are better served when they can access information about your product or services immediately via your website rather than waiting for a mailed brochure or a return telephone call. Provide answers to frequently asked questions on your website. Information requests can be processed immediately via online forms and autoresponders whether someone is in the office or not.

4. Update Your Brochure for Free

A website is your online brochure or catalogue that can be changed or updated at any time at a much cheaper and faster rate than print material. It saves you money on printing and distribution costs.

5. Change Your Marketing Strategies

You can provide photos and detailed descriptions of your products or services, and show people how your products or services can help them in their personal or professional lives. Link in to Social Media to create a buzz around your brand and boost Sales.

6. Ensure Stability

You may move your place of business, change your phone number, or even change your hours, but your website address never changes, and your website is always open.

7. Take Control Over Your Own Internet Identity

Your own domain name (www.yourcompany.com) establishes a strong online brand identity, and allows you to set up email addresses specific to your own company.

8. Promote Your Services

Lawyers, doctors, financial consultants, entertainers, realtors and all service-oriented businesses should take advantage of the massive reach of the Internet. Millions of users are logging on to the Web to compare various specialists and practitioners before they purchase a specialized service.

9. Be in Touch With Your Customers

You can gather information about your existing and potential customers by using online forms and surveys. Provide a feedback form to make it easy for your customers to send their input. Conduct surveys to find out how you can improve your products and services. Your site statistics can also help you understand how your visitors and customers use your site.

10. Function As a Great Recruiting Tool

Your website is a great recruiting tool for building your business. Everyone looking for a job today checks out businesses in their field for job openings, and some of your best future employees may find you online.

So whether your business is large or small, you need to use the web smartly and right now if you want to make an impact. Try it and you’ll be amazed at the results.

What to Consider When Designing for the Web

Okay, so I’m getting to the point with CSS that I can usually design and create everything in the browser — I can’t remember the last time I sliced up a Photoshop layout and layer comped my sprites. For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas for creation. When it comes to the actual construction of the site, the only things I really take from the mockup is anything that I can’t create with CSS, the rest is just a map to guide me.

Think Differently

For years the process of designing a website using a Photoshop, Fireworks, Illustrator or any other graphics application was to mock it up, make sure everything looked perfect, then slice it up into pieces and put it back together — like a puzzle. CSS has basically made this process obsolete, you can accomplish so many things via CSS that you could only previously do in Photoshop. And with CSS3 even more things are possible.

Because designing in the browser is now more viable, it’s important to consider a few things when designing realistic mockups that will make the construction of the web site quicker and easier.

Consider:

• Realistic fonts
• Image-less Buttons
• Display size(s)
• Images
• What can be done with CSS?
• Is it possible?

Realistic Fonts

There is a countless number of really great fonts floating around out there on the web and we all want to make an impact or statement with some amazing font we have found. But part of web design is designing for the user and making sure all typography on the page is readable and accessible. Before designing, consider what fonts are either web safe or feasible on the web and try to avoid fonts that will be difficult to recreate through HTML/CSS/JS.

Image-less Buttons

Buttons can be the bane of a developer’s existence. It’s a good idea to design buttons that can be created using CSS or Javascript. There are a lot of benefits for this: live text, adaptable buttons, no images to load, no more button sprites and no more size specific background images to mess with. Image-less buttons can save huge amounts of time in development, so before you create some super fantastic button in Photoshop consider whether its super fantastical design can be achieved in CSS, if so go for it, if not, buy your developer a couple of large pizzas and a case of Red Bull.

Display Size(s)

With so many different sizes of displays from 320×480 to 2560×1440 you’ll need to consider how you are gonna figure out how your design will be rendered in many different sizes. Responsive design is a tricky beast so to simplify the process of design, ask yourself these questions before you begin:

• Who’s the audience, are they mobile?
• Is the content centered or left justified?
• Will it need to be responsive?

Not all sites will be used for smaller mobile devices, but it’s a great idea to consider how the site will represented in the standard 1024×720 all the way up to 2560×1440, and you may even need consider how your design will be viewed both horizontally and vertically. But the most important thing to remember is that the design needs to be feasible for the web — avoid horizontal scroll bars!

Images

No more slices and no more puzzle pieces. With any standard web site the only real images you need are a logo image, maybe a repeated background image for texture and any inline content images. In most cases, anything that used to require an image slice now can be created with CSS. CSS gradients, rounded corners, transformations, and a countless number of other CSS selectors can be used to recreate these types of images.

Can it be done with CSS?

As you are joyfully creating a masterpiece in Photoshop, just ask yourself if all of the elements can be created with CSS. CSS is a very powerful tool and surprisingly, most design elements that are created in Photoshop can be easily replicated using it. Before you start cutting out images, buttons, rules, or anything else out of your design try to figure out if you can create them in CSS first. This can make development so much easier and more dynamic in the long run. Some elements in your design may never be able to be recreated with CSS so try to keep these elements to a minimum.

Is it possible?

Don’t design some super huge, intricate background image that needs to be sliced in forty different pieces just to be able to load quickly. Don’t design a site that is 1280 pixels wide. Don’t design a site that is not feasible for the web. Get familiar with display sizes, image limitations, file limitations and just general limitations of the web.

The web is a pretty open and flexible place and you can pretty much create anything you want, but there are some natural restrictions that you need to consider before you start designing. Just make sure you’re not trying to create something that can’t be built. If you don’t know what development limitations there are it’s a good idea to code up a site every once in while so that you can get familiar with what can and can’t be done on the web. My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.

You can always change it

One huge thing to consider when designing for the web is that you can always change it. The web is super easy to update, you’re essentially only an upload away from chaining anything about your design. Don’t spend so much time sitting in front of Photoshop trying to perfect the design. Consider the web as an editable canvas, it’s not rigid like print design where you have to make sure everything is pixel perfect when you send it off to the printers.

The bottom line is that you are designing for the web. In as much as we think print design is the same as web design — it’s not. It has its own set of problems and its own set of limitations so its best to get familiar with them and get familiar with what can be accomplished via HTML/CSS/Javascript code. And just for giggles, try designing a building a website without ever opening Photoshop, I think you will be surprised at what can be accomplished when designed solely in the browser!

Clients know what you do. But do they know who you are?

The importance of social media is undeniable. Most companies have come to understand it is beneficial to embrace this shift in how they advertise and market themselves, therefore are using Twitter to introduce their business to the social media landscape.

Twitter poses one straightforward question; ‘What are you doing?’

Of course what you are doing as a company says a lot about who you are. However, in terms of updates, this can be answered hourly and in a multitude of ways – as a result the overall quality of your image could be confused by the quantity and variety of Tweets.

Furthermore, the impression left to potential and existing customers becomes harder to control and monitor. For example: your helpful responses to criticisms leaving negative impact instead of doing any good, or the desire to convey yourself as ‘human’ with a few personal Tweets accidentally damaging your professional identity.

So although it is most definitely a phenomenon we encourage our clients to be a part of, using social media does not ultimately serve to produce a clear, concise, and memorable image of your business. And isn’t that what you strive most to achieve?

That’s where your logo comes in.

Think of your brand as your stamp and your logo as the mark left from it.
Think of Twitter as a place to share information and build relationships.

By definition Twitter is a social networking site; it is crucial to grasp the meaning of the social bit. Not everything will be read by everyone. Not everything will be remembered. Not everything you say will be taken seriously. Whereas, it is decided immediately that you are as serious about your logo as you are about your business.

How seriously does it appear you take your business if your logo looks like an MS Paint creation?

“Which came first, the logo or the brand?”

Reputation + Company Name & Logo = Brand.

We often deal with clients who dismiss the function of a logo by arguing “it is not the brand.” The simplest response to this is, because your logo has the ability to damage your brand, it should be dealt with as a tangible segment of your brand.

Your brand sets expectations of your company, and your logo is the first part of your brand a client visiting your website sees. If they remember only one piece information from your site, it will be your logo.

Therefore apathetically viewing the logo as merely a ‘space filler’ means you are losing out on using it to your business’ full advantage. An amateur logo undermines your professional credibility, no matter how good your service and website are. A weak logo or weak name undermines company strengths.

Think of a poor logo as the equivalent of turning up in your gym clothes to sell a costumer a product. You wouldn’t dream of it. Unless of course you’re selling gym equipment.

For businesses looking to promote changes and attract new customers, reinvention in terms of a website design may not be enough. As your company evolves, you want your image to grow with it. If you want your brand to develop, your logo is an important weapon in your strategy.

A strong logo is an instant visual representation of who you are. It encapsulates and amplifies your corporate image. It attracts the target audience. Look at your current logo and ask yourself: is the best vision you have of your brand emphasised in your logo?

If your answer is no, you are suffering and it’s time to reconsider.

Lines in Web Design

A line is a basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two-dimensional shapes like a house’s plan. Every line has length, thickness, and direction. There are curved, horizontal, vertical, diagonal, zigzag, wavy, parallel, dashed, and dotted lines.

Lines, lines, lines. Lines are everywhere in design, they are used to divide space, direct the user’s eye, create flow, create emphasis and organize all design elements into form. Generally, we don’t think about lines that much, but we make use of them quite often to visually communicate our objective to the user. The web is about communication, so using lines to communicate your message properly is important.

Communication — Line Types

First of all, a line is simply a fluid connection between two or more points. It seems like there is an endless supply of differing types of lines, from thin lines to thick lines, short lines to long lines, wavy lines to straight lines. But just like everything in design — or in life — there are some basic lines that we need to understand.

• Literal line – A literal line is just that, a line. It’s the visual or actual line you see.
• Implied line – This type of line is the “imaginary” line that your mind instantly creates by connecting dots or elements together. The best example of this is a dotted line.
• Psychic line – This type of line is another “imaginary” line that differs slightly from implied line in that psychic lines are generally used to create eye direction form one element to the next. A great example of this in web is a photo of a person looking in a particular direction, or a series of arrows.
• Contour lines – Contour lines are mainly used to define edges and create boundaries of elements. This type of line is probably the line type mostly used or seen in web design, borders being a classic example.
• Dividing lines – Dividing lines divide space and are commonly implied lines that are used to divide content areas such as the dividing spaces between columns of text.
• Decorative lines – This type of line is generally used to add something to an element: texture, depth, shading, function or any other decorative embellishment. The most well know decorative lines in web design is the underline under a text link.

Meaning and Mood

Lines are great for creating mood and meaning. Beyond the foundational line types above, other line types and styles can be used to create meaning and mood. Because there truly are an endless number of line types and combinations within, we’ll just take a look at the few main types.


Vertical lines simulate height and can create a mood of grandeur or spirituality. Great examples of this is the vertical line usage in churches and cathedrals where ceilings are lifted on tall vertical pillars guiding the eyes upward. In web design vertical lines tend to represent or create length and indicate to the user that there is more content below the fold.


Horizontal lines generally create relaxation or a calming mood, they tend to be quiet and subtle whereas vertical lines are more imposing and powerful. In web design horizontal lines are also known for their ability to organize content. When you look at gridded layouts you’ll notice that horizontal lines are the elements creating balance and organization — even though grids are generally laid vertically.


The majority of curved lines create familiarity and comfort, they also suggest relaxation. Curved lines are very easy on the eyes and are interesting to follow. Curvy lines are associated with nature — they feel very organic.


Diagonal lines are the greatest way to create movement and direction. Where horizontal lines suggest gravity and are stable, diagonal lines are more unstable. These lines don’t lay down or stand up in a restful position, they are in motion and you can actually create a sense of speed just by simply adjusting the pitch of the lines: the steeper, the faster.


Thick lines are visually powerful on the canvas, they represent power and respect. The use of thick lines can build a feeling of power and boldness. However, the overuse of thick lines can be very overwhelming and way too demanding so you’ll need to be careful and balance them off with other visual elements or differing weights of line.


Thin lines tend to feel fragile, but their subtle feeling makes them great for directing the eye without being annoying. They are also empathetic to the viewer and tend to create a feeling of comfort and tranquility. Combining thin and thick lines is a great way to create visual interest and hierarchy by balancing the visually demanding thick lines with the subtle, comforting thin lines.

In general, its more about how you manage to add them to the general alignment of the entire website, its less about the lines on their own. One of my favourite ways of creating nice subtle lines which encourage continuity within my designs is by using a nice solid grid system. This gives the design more structure and organisation without having to directly use visible lines, the lines are created by the eye of the user.

Let’s make a real world comparison: buildings are very much like web sites. So are web designers and developers essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

So the question is, can we learn from architecture to make web designs better? Fortunately architecture has been studied for hundreds of years so we have plenty of resources to tap into. One of the great artisans who pioneered engineering and architecture was Marcus Vitruvius Pollio, a Roman engineer, architect and artist. In his book De Architectura he describes three fundamental principles of what great architecture should accomplish:

Firmatis: It should stand up robustly and remain in good condition — be durable.

Utilitas: It should be useful and function well for the people using it — be functional.

Venustatis: It should delight people and raise their spirits — be beautiful.

These three principles can be directly applied to web design as well. Every really good web site should have these same principles: durability, functionality and beauty. In the beginning web design was just one document of information, a basic text document. As the web progressed, CSS allowed web sites to separate the content so that it could be re-skinned without altering the structure of the site. Today, HTML5 semantics is allowing us to finally separate meaning from structure and style so that web sites can be durable and be ready to embrace new technologies as they come.

These principles are fundamental for web design as much as they are to architecture. We’ve all designed, developed or have used sites that do not follow these principles. Without durability a site loses its ability to grow with the times, without good function a site will never be used and without a pleasing design nobody would even stay on a site let alone revisit it. A website is complicated but I like these principles because it makes the task of designing and developing a site easier to digest. They allow you focus on what is important and not get lost in every little detail of a site.

Building for “Firmatis”

Durability is probably the most overlooked aspect of web design. Most of us never consider the life span of a website when we start to design. But durability is important even to web design because web products are starting to live longer. Some web applications and sites will probably live to be older than most of us. Now, I know what you are thinking — it’s really easy to redesign a web site — and that is true, but what if it could be even easier? If you design and develop for durability your next redesign is going to be so much easier if you don’t have to rewrite every file HTML, CSS and JS file in the structure.

Semantics and a progressive approach to web design are required for durability. Creating semantic markup – markup that describes but not specifies – is important because it allows the site to be updated quickly by any designer or developer. Most designers and developers don’t stay on a web project or even the same company for the life span of it, so by using proper semantic markup you can leave behind a good foundation for others to modify or build on without them having to know everything about the code structure.

Progressive enhancement and responsive design also play a huge part in durability. When you keep in mind that people will view the site differently in whatever browser they prefer and that it’s okay for the site’s design to render a little differently, or adjust to that browser, then your site can stand strong for a long time. If you design a site to look best in one particular browser, you not only isolate users, you also hurt its life span. When a new browser comes out that has better user adoption then the one you designed for, you will lose users, or you will have to completely redesign and rewrite for that new browser. Don’t waste time chasing browsers, flexibility in web design builds durability.

Developing “Utilitas”

Aw, usability. Over hundreds of years of building things we have come to understand that you can have the best invention ever, but if you can’t use it, it doesn’t matter. An architect has to make sure that all the doors open the right direction, that all the light switches have to be close enough to doors so people can reach them, that all doorknobs and elevator buttons must be placed so that all user can access them. Same goes for web design — even though some will argue against usability. A successful web site must be functioning and usable: the navigation needs to be clear, buttons need to have hover states, and all elements need to be accessible to all users.

Proper function and usability are probably the hardest things to develop in a website. So much of it depends on preference and the skill level of your users. Standards and conventions solve most usability problems. Just imagine if buildings didn’t have standards and conventions, if a particular architect put power outlets in the ceiling because he/she liked the way it felt or if he/she decided to go super minimalist and not use outlets at all. Standards are proven concepts, they represent years of bad functionality corrected. As designers we need to understand that the first priority of the site is to be functional to the user, to work in a comfortable, familiar fashion so that the user can accomplish their goals.

Create “Venustatis”

Websites should be easy on the eyes, they should appeal to people and people should be drawn to use them. A great web design should be able to spark some kind of thought or emotion simply by the color scheme, unity or composition alone. Design is a powerful tool and when done correctly can accomplish many things that function and durability can’t. Design has the unique ability to fill something in all of us, whether is be print ads or architecture.

Web design is no different than the design of a great building. A well designed and beautiful web site will attract people for no other reason and when they stop to enjoy the design they will be able to discover what is “inside”.

An effective website is one that is easily understood by the average web user.

Yet so many websites seem to forget the very purpose with which they were set up. No product or service can be sold without information about that particular product or service. That information should be available no more than three clicks away from every visitor – or the visitor is going to lose patience, and all the fancy design and clever copy is going to be wasted.

A general guideline would be to make sure that all navigation elements are linked clearly using standard link conventions such as menus, buttons, changing color on rolling over the cursor, or underlining the text. Avoid using ambiguous or clever names for links. Keep page design attractive and simple – don’t hide links in images, make image elements into links, or require multiple clicks to finally reach an inner page of the website.

Important Navigation Elements for every website:

• Internal Page Links – From the homepage, each page on the site should be reachable within two or three clicks. Vital pages should be only one click away. The kind of site will determine the links that are prominently displayed. Make sure the page tabs have titles that are easily understood – users don’t want to search every page for relevant content. Organize related pages using drop-down menus. The internal logic of the website should be consistent so that the average user understands how the information has been organized.

• Login Boxes – These should be displayed prominently, preferably on the Home Page. A visitor who has registered with you earlier does not want to navigate through your site again, and will not bother unless they can reach you with one click. Common locations are top right, top left or in the page header.

• Shopping Carts – If you sell your products using shopping carts, you need to display the ‘View Cart’ button prominently on each page. The popular location is top right, as part of or just below the header.

• Order Buttons – Individual order buttons should be large enough and visible. To receive more orders, make it easier to reach your order page.

• External Links – Such links are often used in the text areas of a site. They could be references to extra information on other sites or to recommended products. Although judiciously used links will increase your Search Engine rankings, take care not to overdo it. Nobody likes to read text heavy with hyperlinks – your site is not Wikipedia.

• Advertisements – Adverts are normally either text or a graphic with a related hyperlink. Adverts can be positioned anywhere on a page. However, ads which are visible on a page without having to scroll are obviously more effective.

• Downloadable Items – If your site has downloadable items such as pdf files, video or audio, make sure you tell the user the size of the file and whether any application is required to use the file. Where possible, provide a link which can be used to download the application.

• Site Map – This is a great way of laying out your entire website for your visitor, as well as for search engines. A site map lists every page on your website with a link to that page.

Good website navigation makes viewing your web pages a pleasure, not a chore. This will in turn lead to increased signups, sales, customers or members. Check out your website today and make sure you’re not losing business because your navigation is clumsy and complicated.

How to Get the Most Out of Google Docs to Improve your Business Efficiency.

In the past, co-workers shared documents by emailing them to each other. This often resulted in a great deal of confusion, with different versions of each document flying around, changes mysteriously appearing on documents with no indication of who had made them, and people from different mailing lists accidentally getting copied on important documents.

By introducing the suite of online productivity applications that together make up Google docs, Google has made some of these problems a thing of the past. Let’s look at it in more detail.

Basic Features of Google docs:

1. System requirements:
Google Docs is compatible with Internet Explorer version 6 or greater, Firefox version 1.07 or higher (but not Firefox 3) and Safari 3.1 or higher. In addition, you must enable JavaScript and cookies to use the applications.

2. Access:
To access Google Docs, you need to create a Google account. Google accounts are free. All you need is a valid e-mail address — and the willingness to agree to Google’s terms of service — to create one. If you’ve signed up for Gmail, you already have a Google account.

3. Compatibility:
With an account, users can either create a new document, spreadsheet or presentation, or upload an existing file to the system. Google Docs is compatible with the following file formats:

• Comma Separated Value files (.csv)
• Hypertext markup language (HTML) files
• Microsoft Word, PowerPoint and Excel files (.doc, .ppt or .pps, and .xls, respectively)
• OpenDocument Text and Spreadsheet formats (.odt and .ods, respectively)
• Rich text format (.rtf)
• StarOffice documents (.sxw)
• Text files (.txt)

4. Ownership:
You become the owner of any file you create or import into Google Docs. Owners can edit and delete files and invite collaborators and viewers. Collaborators can edit and export files. The owner can also choose to give collaborators the ability to invite other collaborators into a project. Viewers can look at files and export them, but aren’t allowed to make edits.

5. Organization:
The organizational approach for Google Docs is a simple file-and-folder system. You can create folders and subfolders for all your files. Google provides you multiple ways to sort data, including alphabetically or by the latest updates.

6. Storage:
Google Docs users get a lot of storage space with their accounts, but it’s not unlimited. Each account can have up to:

• 5,000 documents of up to 500 kilobytes each
• 1,000 spreadsheets of up to 1 megabyte each
• 5,000 presentations of up to 10 megabytes each

7. Using Google Docs:

1. Multiple people can view and edit a Google Docs file simultaneously. More importantly, they don’t have to worry about creating duplicate copies of the same file.
2. With Google Docs, everyone working on a project makes changes to the same master document. As users make edits, Google Docs tracks all the changes and tags each edit with the responsible Google account holder’s name. That way, the owner of the document can scan changes and see who is responsible for each edit.
3. Google designed Google Docs to autosave almost constantly, preserving each edit shortly after a user makes it. Other users see the updated changes instantly.
4. While working with documents or presentations, users can see who else is in the file.
5. And with spreadsheets, users can click on a tab labeled “discuss” to chat in real time about the project.

Exciting New Features:

1. Google Gears:
This allows users to edit documents offline. Once you reconnect to the Internet, Google Docs automatically syncs the offline copy of your document with the master copy stored in the Google account. If another user has made edits to one of the sections you’ve changed, your changes won’t be implemented. Instead, Google alerts you to the issue and gives you the opportunity to compare your changes against the other user’s edits. If you still want your changes to go into the file, you can copy and paste them into the document.

2. Google Finance:
This allows you to retrieve information about a publicly-traded company. Users enter a company’s stock ticker symbol and request a specific piece of information about that company. The information updates as market conditions change, though the data can lag up to 20 minutes behind actual conditions.

3. Google Lookup:
This is another spreadsheet feature. Let’s say you’re building a table that compares the population of different cities. With the Google Lookup feature, you’d enter a formula, signify the city you are interested in and ask for the attribute “population.” The Google search engine looks for that information and retrieves it. If there are multiple answers for a particular attribute, Google presents all of them to you so that you can determine which one is right for your needs.


As with all Cloud Computing, security is the biggest concern of many users. Google assures users that all data is password-protected and kept private, and also inaccessible to the spiders sent out by Search Engines. Users also retain all ownership rights to their materials.
In conclusion then, Google Docs make the virtual office a reality, as well as allowing greater levels of collaboration, improving efficiency, and saving time, effort and money. Sounds like enough reason to try managing your next project online?