Freelancefolder

Web Design Basics You May Have Forgotten

Posted September 11, 2011 in Design, Web Design

Tweet

In the aftermath of the latest Panda update, the Google team has encouraged webmasters to focus on user experience rather than algorithms.

As the battle for rankings in Google’s search results is growing, many web designers are losing focus on the essence of being a designer.

The path to achieving a design that would express beauty is now being put in second place to the path to good search engine results.

Exceptional web design requires ingenuity and technical expertise. It’s important to develop a site that is both results-driven and appeals to the masses. Yet, creating a visually appealing website is only half the battle in the world of Internet commerce. The website must also actively encourage website traffic through link building, web crawlers and other search engine optimization (SEO) techniques. Not to mention, the website must be compatible with all major browsers, as well as, mobile browsers. Whether the user has Flash or HTML5 capability, the website must still function properly.

Achieving all of these requirements is no small order for a website designer. Planning is essential to exceptional design. Web designers must consider every aspect of web design and anticipate their customers’ navigational behavior to create a website design that will attract visitors and convert sales.

The question then becomes, “How can web designers successfully accomplish this goal?” This article will review some of the basic aspects of website design to help companies appeal to the masses and still increase revenue for their clients.

Where Are All the Web Designers?

A simple question is–what has become of web designers?

Do you think that a potential client searching for a designer and looking at someone’s portfolio is actually looking for someone to design their site? Of course they are! So, there’s no need for you to keep telling them that you design websites. Instead, tell them why you do it. Change your message so as not to sound like every other freelance designer out there.

People visit your portfolio, not because they want to know whether or not you design websites, but because they want to see visual images of what you have done. They know what they need and they need you to give it to them.

Also, remember that the success of your designing career does not hinge on your website alone. Word of mouth, reputation and the quality of your work are the strongest sources of clients and it all comes down to you. Keep in mind that you need to have a brand, and your brand is your work.

Let’s now talk about some basic web design practices that tend to be forgotten by the “experts.”

The Need for High Usability

SEO techniques and link building drive website traffic to the site, but once the visitors land on a page, it is the designer’s job to entice them to stay and look around. What are the components of a highly usable website? Here are nine such components:

1. Capture the Audience. The design must capture the user’s attention when they land on the page. At first glance, they should know what the company is promoting and be able to find the most important pieces of information quickly.
2. Keep the Content Simple and Straightforward. The most important information should be readily available. Users should be able to scan the page and find the content easily without reading deeply. Good formatting is essential to keeping the reader’s attention.
3. Include an ALT and Title Attribute for Images. A descriptive ALT attribute and title attribute will allow visitors to navigate to the page they are interested in without waiting for the entire page to load.
4. Leave Text Outside Images to Attract Search Engine Spiders. Text inside images is not detected by search engine web crawlers or spiders. Include text outside the images to attract visitors to the site based upon relevance to search topics. Additionally, many web surfers turn off the images in their web browsers and therefore, will not be able to view the catch phrase or word that may capture the attention of the user. Design for every type of user, and your website will attract more visitors.
5. Ensure that All Links are Working and Intuitively Placed. Ensure that all the links are placed strategically placed on the website. The navigable links should describe the current location of the visitor, the previous location of the visitor and other options for the visitor on the site.
   Ensure the links adequately describe the information connected to the link. CSS may be used to emphasize the links so the user can easily spot the link on the page. Include text links and a text based site map to help lost users find their way on the web site. Text-based site maps are also important in search engine optimization, because web crawlers can easily pick up keywords from site maps. Repetition on each page is instrumental. Depending upon the link building system, there is no way to determine what page the visitor will land on first. Ensure that the visitor can easily navigate throughout the website, regardless of their landing page. Include a link to the home page either through the logo or elsewhere. The links should be consistent and in the same location on every page.
6. Include a Site Search Box. A search box will help navigators find the information they are seeking easily. Include the search box to increase the usability of the website.
7. Increase the Load Speed of the Website. While catchy graphics will capture an audience, they will also deter an audience if the page takes too long to load. Many visitors will navigate to your competitor’s page while they are waiting for yours to load. In the time it takes your website to load, your competitor has already won your visitor’s business. This is not a good strategy.
8. Use Web Crawlers and Spiders to Increase Traffic. Web crawlers and spiders are used by sophisticated web sites to find links to other relevant websites on the web. These spiders scour the web and constantly build links to improve the search engine research position (SERP) in Google’s search engine. Linking to relevant, high traffic websites will increase your company’s chances of improving their SERP. Diversification of the websites your company links to will also improve your SERP. Blogs, social media websites, company websites, community forums and other sites are all considered fair game for link building. This is a continual process that must be monitored regularly to maintain a high ranking in Google. These links should be natural and relevant to be within the guidelines of White Hat SEO techniques. The better and more relevant your links are, the higher your ranking will become in a search engine, such as Google.
9. Ensure Your Keyword Density is High. Keyword density is also essential to increasing web traffic and creating relevance in Google’s search engine. Web crawlers also search for relevant keywords during Google’s searches. The more relevant your keywords, the higher your web page will become.

Make Your Website Design Work on All Platforms

Unfortunately, the only way to ensure your website is cross-compatible on all platforms is to test it on as many browsers as possible. The most popular browsers, currently, are Internet Explorer and Mozilla Firefox. With Internet capability on mobile devices, designers also have to design for these devices.

The three main web design technologies available are:

• HTML
• Cascading Style Sheets (CSS)
• JavaScript

Each is displayed differently by browsers. Websites may load perfectly on one browser and may appear disorganized on another browser. The version of a browser may also affect the loading capability of the website. Ensure compatibility on all web browsers to avoid deterring visitors to your site.

Use an HTML validator to ensure that all of the coding is correct. This will aid in compatibility issues. A validator may be found at http://validator.w3.org. If the code is correct, the website should be optimized to fit multiple browsers. The validator will inform the browser of the version of HTML the site is using.

CSS technology can lead to some web browser compatibility issues. This technology tends to truncate the website as it is viewed. CSS is desirable because this technology does not cause browsers to crash.

Flash often impedes the loading of some websites on computers that do not have this capability. For instance, the new Apple iPad does not feature Flash. A website designed with Flash will probably not load properly. Always design a non-Flash version of the website for users that do not wish to install the plug-in onto their computers. Additionally, recognize that search engines will not track links on a website created with Flash technology.

Most mobile devices require the most rudimentary websites available. To load a website quickly on a mobile device, there should be no use of frames, graphical links or high resolution images. Minimize the graphics for faster loading on mobile devices. Scripting, pop-ups and complex form fields are all difficult to navigate on a mobile device.

Create your website for the lowest common denominator, the mobile device, to improve the usability for all users. Test the websites on actual devices, instead of emulators, to ensure the ease of use of the website. Blackberry, Android and iPhone are the most popular platforms that companies should test first.

Conversion of Flash to HTML5

Because of the increasing popularity of smart phones, clients are challenged to design eye-catching web designs for both the computer and mobile devices. Flash was the primary way to create a visually appealing site as many web designers have done for Nike, Gucci and Coca-Cola. Flash intensive sites, however, do not work well for mobile devices. Thus, HTML5 was created to fill the void.

There are several tools available to aid in the conversion of Flash to HTML5. Two are briefly reviewed below:

• Adobe. The tool allows web designers to export Flash CS5 animations into HTML code, HTML5, Scalable Vector Graphics (SVG) or other tags. The code will perform as though it was still flash but it will be rendered directly in the browser. Since most browsers support HTML5, the website becomes virtually universal.
• Google Swiffy. Google Swiffy also allows designers to convert Flash to HTML5. With this software, companies may design websites with Flash content without requiring a Flash Player. This software has been proven to work for Chrome, Safari and iPad applications. The application will not convert all Flash content. However, simple animations and ads will be converted easily.

Your Turn

Though there are many steps to exceptional website design, clients that pay attention to all aspects will build a website that will attract customers, retain customers and convert sales. After all, isn’t it that the reason why you are developing a website?

What design tips have I forgotten? What tips would you add?

Image by Danard Vincente

Related posts:

1. Want To Know How To Design? Learn The Basics.
2. Website Design is not Graphic Design
3. 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
4. Interview With Adrian Diaconescu of Rubiqube – We Talk About Design, Blogging and Freelancing
5. How You Know When Your Website Design is Finished