Why Responsive Web Design is the Future

• One URL address – In the past, two or more websites had to be developed to cater to the desktop and mobile markets. Mobile websites often starting with a subdomain, m.domainname.com or www.domainname.com/mobile/. Now with Resposive design, one website URL can be served to access the website’s content. This change has been well received and rewarded among search engines with better indexing.

• Fluid Grids – The typical grid units that create alignment in a web design is fluid, such that the grid units resize according to the screen size. Also, your developer can set trigger points where this can happen (often at 640 px, 800 px, and 1024 px).
• Flexible Images – Gone are the days of assigning a fixed width to images. Instead the images can move and scale with the fluid grid. 
• CSS media queries – Catering to the end user’s browser window’s size, orientation, and screen resolution, on desktop and mobile devices. 

Benefits of Responsive Design

Along with points mentioned above, responsive design has many advantages:

• Responsive web design can reduce website development time. 
• Responsive web design can reduce user frustration and increase sales.
• With a single URL, it is now easier for visitors to interact with, share, and link to.
• Responsive design allows more efficient crawling as search engines don’t need to use different user agents to retrieve and index all the content. (Source: Google Webmaster Central)

What is 3D parallax effect?

You are probably already familiar with 3D in movies and TV, the 3D parallax effect is a new way to add layers, depth, and movement to your website by employing a combination of JQuery and CSS. And the great thing is you don’t need to wear the funny blue and red glasses. 

What are the benefits of 3D parallax effect?

The 3D parallax effect is a really cool way to add animation and visual interest to a site by creating layers that move at different rates (just like Walt Disney animations). There are many possibilities as you can control the layer positioning and timing, all without having to depend on Flash to make your website dynamic. 

You can view various demonstrations of 3D parallax here:

• Snow falling
• Underwater
• Vines swaying

In conclusion, why should you be interesting in using 3D parallax effect in web design?

If your website project has the budget to involve longer design process, dare to share your vision to  your interactive designer. jQuery effects are used more or less all over the Internet today, so get ahead of your competition and be one of the first to use the 3D parallax effect on your website. It should really make an impression. 

Here’s an example of this web innovation in application:

http://www.head2heart.us/

What is HTML 5?

HTML 5 (hypertext markup language) is the latest version of the  language used to create documents that define the structure of a website, such as paragraphs, lists, and links. HTML 5 has many new syntactical features from its previous versions, which include the <canvas>, <video>, and <audio> elements that allow a richer user experience. These innovations in the markup language has proven to be a viable solution to Flash’s desktop and mobile browser incompatibility issues.

Benefits of HTML 5

HTML 5 provides operability of interactive functions on popular web platforms like Chrome, IE8, Safari, Opera and others. HTML 5 connects data with video/clips/images more efficiently and web designs are delivered faster than ever before. With HTML 5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programs. Here is a short list of some of the functions that work across browsers using HTML 5.

• Drag and Drop, and automatic upload
• Style class list manipulation
• Communicate across windows using local storage
• Offline web applications
• Two videos playing in sync
• Interactive canvas gradients (Check this out here: html5demos.com/canvas-grad)
• Geolocation tracking (http://html5demos.com/geo)
• Real time message posting on same domain – real time message posting across domains
• Drag and drop effects (http://html5demos.com/drag)
• More elegant forms reducing dependencies on JavaScript.

HTML 5 Compatibility

HTML 5 is far from perfect, but all major browser developers are making strong efforts to ensure their browser is ready for the future. If you are interested in knowing how well your browser and operating system supports HTML 5, check it out using this website: http://html5test.com/. It’s not only important to understand what your settings are, but what browsers and operating system the majority of your target users are using in order to determine if HTML 5 is right for your website. By using audience tracking tools such as Google Analytics you can determine what type of technologies your users are using to view your website.  

According to an infographic from focus.com here’s where the most popular browsers currently stand on

HTML 5 readiness.

Why Choose HTML 5?

So now that you are armed with this information, is HTML 5 right for you? Compared to Flash, HTML 5 is relatively free, easy to implement, and more widely accepted. However, Flash is still a great choice for more powerful, interactive effects that are only available in Flash (where would we be in online gaming without flash?) So depending on the context and target audience, your developer may recommend Flash, HTML 5, or a combination of both. In the long term, HTML 5 may be the better, more universal, choice.

Web Safe Font Resources:

1. Google Web Safe fonts - http://www.google.com/webfonts/

Like with their search engine, Google offers easy search and filtering of their catalogue of web fonts. You can also preview what the font will look like with your own text, and if you like what you see you can add it to your own collection of fonts in your Google Account. Developers can easily add the font to your website with a quick snippet of code to the style sheet. And the best part? It’s Free!

Google web safe fonts

 2. TypeKit – http://www.typekit.com

TypeKit claims that it will change the way you design websites and we agree they are off to a great start. How? “Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.” Yes, we like it! However, unlike Google web fonts it is not free. There are a variety of reasonable plans to choose from,  including a trial account, and for most sites the Personal plan will do.

 3. @Font-face - http://www.font-face.com

 This last one is a CSS rule, but is more of a movement. The site offers information on the licensing issues of fonts and how to get involved by offering your custom font to the @font-face catalogue. The final goal? “An online repository of fonts for use with the css rule @font-face – FREE”.

3 Tips on how to Design a Search Engine Friendly Website:

1. Design for the reader

The content on your website must have the reader in mind. This is how Google is trying to model how their search engines crawl websites – as the end user! The text must be readable and color contrasted with the background. Avoid backgrounds that are too busy or of similar color to the text (which is a black hat SEO practice).

2. Design a clear navigation

While you may be tempted to have catchy or gimmicky phrases in the main navigation, it is better to have clear and simple titles. Search engines recognize common phrases such as “about us”, “contact us”, “products”, “sitemap” etc. and how it relates to the content on their respective pages. We’ve seen many sites try to customize their navigation by putting “my” or “i” in front of the menu item, such as “Mylibrary” or “ishop”, and while this may be trendy at the moment, it is not very search engine friendly.

3. Design SEO images

Imagine you had to view a website without seeing the images. If images could not be seen or downloaded, how would you or a search engine know what it is about? First, make sure that the image is relevant and needs to be there. Don’t just use an image because you had it lying around. Then, once the image is incorporated, make sure that it has an alternative tag  and a title tag, which are short descriptions of what the image is. If possible, provide a text link to the image. See example below and you can view the title tag by hovering over the image.

The tags for this image looks like:

img src=”image_name.jpg” alt=”computer monitor” title=”computer monitior designed by Tidal Interactive”

That sums up three easy-to-use tips on how to make your next website design search engine friendly. We’d like to hear from you. What are some search engine friendly design practices have you used?

A modern website design is not for everyone, but for many types of businesses the clean and user-friendly interface is a great fit.

Modern Web Design Ideas

1. Block Design

Block design clearly defines groups of information and allows the user’s eye to easily scan the web page. Block design is limited though for content expansion in the future as each block is a fixed height and width, fitting together like a jigsaw puzzle.

2. Floating Scroll Design

Although a little complicated to set-up, this type of design creates an interesting effect. By applying anchors on the page, a user clicks on the matching anchored link (i.e. “Services” in the page below) and is smoothly scrolled to the anchored position on the page. The header and main navigation stays in fixed position, which provides a consistent navigational homebase for the user. Check it out on www.watershedgroup.ca. The downside is that the code for smooth scrolling may not work properly on older browser types, causing the effect to be a bit jerky.

3. Banner as background

This design techniques utilizes “out-of-the-box” thinking, by integrating the hero graphic into the background. The objects in the homepage banners are transparent and can slide in just as a normal sliding banner would. This effect create an immersive experience for the website user. However, when you do want to change the graphic, you just have to remember to create an image with a transparent background and in the right size. To make sure the image is properly aligned and formatted you may need to seek assistance from your graphic designer. We also found that in older browsers, such as IE6 and on high web security settings, there seems to be a black outline around the objects. Because the end user controls their security settings, this may be something you have to accept as out of your control.

Here’s another example of banner as background design, but this one spans the entire visible background space above the page fold. For this website, each page has it’s own unique, yet content relevant background and emphasizes a professional, product-oriented appearance. One thing to keep in mind before you employ this design technique is to consider the image file size and the overall web page weight. If the image file size is not compressed properly then the slow page load time can negatively affect the user experience. We recommend minimizing image file sizes to under 100 kb. Let us know what you think.

Five Tips for Better Website Design

1. Define the purpose of your website

Your website design should be guided by an overall strategic purpose. Follow this intention through to the very last web page. For your website to be successful, it should fulfill its purpose. For example, an photography website’s purpose may be to showcase a portfolio of work and encourage visitors to book the photographer, either online or by phone. Therefore, the website design should guide the user towards acheiving these goals. When in doubt about whether a design element should be incorporated, ask yourself how it will help to fulfill the website’s purpose.

2. Know your content

How much will you be placing on a particular page? Your website layout should be designed around your most important content. By important, we mean that if you had too much content, cut it down to the most important messages. If search engine optimization is important, the designer should place a high priority on the styling of headers, links, and call-to-actions.

3. Draft a website wireframe

Although not required to create a web design, we’ve found that by first building a wireframe prototype has helped all project stakeholders determine what is important and finalize decisions before design begins. A designer can help guide the conversation, but by allowing the client to focus first on purpose, content, and navigational flow, the design team will end up with a well-defined blueprint to work within instead of having to guess what “might” work through redesign over redesign.

4. Embrace white space

Whitespace is just as important in web design layouts as it is in print design layouts. Well incorporated whitespace pulls the viewers attention to important content, such as the homepage slider and the registration buttons shown in the example below. Even though real estate above the fold is important, don’t be afraid of leaving 20 to 50 pixels of whitespace around focal points. You are not wasting prime real estate, you are making the most out of it.

5. Limit the number of different fonts

It’s important to keep your fonts simple and standardized for a number of reasons. First is to create cohesion and stability throughout the website by using web safe fonts that can be viewed across multiple browsers. Secondly, acessibility – making is easier for your website viewers to quickly understand your content. Lastly, the content administrator will be able to easily update content without having to worry about complicated formatting. Self-administration will save both the client and the developers money and time in the long-run.

1. HTML5 and CSS3.

These rather revolutionary new versions of the universal coding languages open a multitude of possibilities, where previously web designers had to work around rigid limitations. Beautiful graphics and complex animations are now possible through CSS3, making them much easier to process and decreasing the loading time for a website. For these reasons, they are starting to replace the use of Flash in websites.
 

While these coding languages are fully available for use, there is still a significant share of web users relying on Internet Explorer, which doesn’t support many of the HTML5 and CSS3 techniques . Its usage, however is going down, judging by web statistics, such as W3Counter. Quite amusing are the several online movements to prevent further problems with Internet Explorer, such as the IE7 countdown.

2. Shift to Mobile.

As we’ve previously discussed in our articles about Mobile and Cross-device usability, the online world is gradually shifting toward mobile devices. This opens up a variety of new ways that users will be interacting with websites, but also introduces new challenges in web design and development. Responsive and pure mobile websites are growing in numbers, while mobile apps are essentially replacing the very idea of a website, in some cases. 

3. Parallax Effects.

This might not be as universal of a trend, but it is definitely gaining popularity. These websites are presenting content in a unique and unconventional way – all navigation can be done through scrolling. It creates a very engaging user experience, but it is not something that would work for every site. The main application of this technique is for websites that rely entirely on the visual content and the wow-effect, such as online portfolios, galleries and showcases. Here are a couple great examples:
 

4. Solid Block Design.

This type of design is based on a re-thinking of conventional site layouts and breaking them down into solid rectangles, neatly complementing each other. Pepsi is currently utilizing this approach and it works pretty well:
 

Return-it.ca, a website for the non-profit product stewardship corporation Encorp, developed by Tidal, also incorporates some block design elements:
 

These major trends are changing web design in radical ways, making it an exciting time to be in this industry. There are also a number of purely aesthetic current web design trends that we’re not discussing in this article, mainly because these  go in and out of the trend and are not as significant.

We’ve learned that it is easy to design a good looking website, but it is difficult to design a good looking and user-friendly website. Thus, the first step before design is to understand who the user is and what you want the user to do on your site. Next, you can apply these tips to your web design.

Top Web Design Tips

1. Organize your content

Start off with a well defined site map and determine the volume of content you want on a web page. You can create a clear blueprint by laying out the website as a wireframe first. At this stage you can easily change pages and layouts around, avoiding costly and time-intensive changes later on. As a rule, limit web page lengths to 2 screens, if possible. Also, include a menu or a way back on every page.

2. Alignment

Readers like to scan a web page and aligning elements helps the user to visual group information and acertain their relative importance (visual heirarchy). Alignment or grouping works on any on screen elements: text, images, buttons, links, and any combination of them. Top edge and left edge are stronger than right or bottom-edge. Grids are really useful tools for web design and by applying it can create consistency throughout the website. This grouping and consistency can help the user navigate the website.

Guidelines shown on Dan-d-pak web design

3. Contrast

When you want to create visual interest or focal points on your website, apply the web design principle of contrast. Highlight images, text or links by using a different color, size, font weight (bold/strong), or other graphic design. Make the text large enough to read for your target user. When in doubt about whether or not you have emphasized the right elements, try out the squint test. Look at a web page and squint, what stands out?

4. Uniformity and Repetition

Maintaining uniformity throughout your website helps to avoid user confusion. Every web page should look like it belongs to the same site. By grouping similar information and repeating graphic elements you provide the user with predictability and navigational aids.

5. Optimization

Often overlooked but very important to consider is optimization of your design in order to minimize user frustration over slow loading websites. Try to keep your design’s page weight (number of KB) to under 200 KB. Images should be less than 100 KB and if you are aiming to reach mobile users, try to keep images under 20 KB. You can achieved this by compressing your image files. Also, avoid image based backgrounds and use CSS styling instead.

For text, it is a good rule of thumb to have no line of text exceed 650 pixels, this is to make it easier for the user to scan and easily see where the line of text begins and ends. Again, if aiming for mobile users, adapt your lengthy paragraphs to short paragraphs that utilizes bulleted lists as much as possible. For the most responsive design that can adapt to a screen size, try to keep your content to one column.

1. Product Search. 

• It is a common best practice to keep the search bar visible at all times, either in the site header or in a sidebar.

The Dish Jeans website by Tidal includes a simple and prominent search bar in the header.

• For a more diverse selection of products, specific filtering options help the user avoid clicking through unwanted results. Use product categories and subcategories as well as filtering by product features. 

This simple store locator is quick and easy to use.

2. Contact Information and Store Locator.

•  Not all users are comfortable doing their purchasing online, so it’s always a good idea to let the user find the closest store.

3. Catering to the Individual User.

• In order to induce loyalty, the site needs to store user data in customer accounts. 
• A common best practice for the account username is the email, as it simultaneously guarantees unique identification and won’t be easily forgotten by the user.
• The user should, however, be able to make purchases as a “guest”, without having to register.
• Based on past purchases, the site should make recommendations for similar products.
• The site should display a shopping cart icon, visible and accessible at all times – this lets the user know of the items they have added so far.
• Another good feature is a wishlist, for users who are hesitant or don’t have the means to make a purchase right away.

4. Prominent Calls to Action

•  Eye-catching and informative banners, buttons and other calls to action help the user find good deals and ongoing promotions the quickest way.

This banner from the Silver Star website, developed by Tidal, displays a clear "on sale" message

5. Simple and Secure Checkout Process.

• The checkout process can drive away even users who were ready to purchase, if it’s overly long and complicated.
•  A good way to improve the perceived process is breaking it down into steps. The user must know which step they are on, and how many are left.
• If the user’s credit card is not supported on the site – they can’t make a purchase. Providing as many payment options as possible helps avoid this issue.
• The user must know the full information about their payment, including tax, delivery and other related fees.
• The checkout process must not only be secure, but also be perceived as such – displaying genuine badges of active security features helps build credibility.
• Once the purchase is made, the site must provide the full information on the purchase in a printable confirmation page that is emailed to the user and stored in their account.

Lastly, as we’ve mentioned previously on our blog, users are gradually switching to mobile web browsing, at least for some tasks. With that in mind, providing a mobile-friendly e-commerce solution can make a big difference as well.