Recently, Helen Vozna wrote an article entitled Mobile Website Optimization: Where to Start. She wrote about optimizing the way search engines crawl your website by providing and submitting a mobile sitemap. However, there is a modern technology that allows you to optimize your website for mobile users, while retaining the original user experience that you have invested so much time in. This technology is called responsive web design.

The problem

Most websites you visit today will have a fixed number of pixels for their main content container. This is a wise decision, because as a designer this allows you to define the exact dimensions within that container. The W3Counter shows how the 1024×768 screen resolution owns a significant share in the global statistics. But viewing a website of 960 pixels in width on a screen of 1920 pixels in width leaves the other 50% unused, which might eventually reduce the user experience.

On the other hand, StatCounter states that the most common screen resolution of mobile devices is 320×480. To get your 960 pixels website on a 320 pixels screen, your mobile browser would have to zoom out to display everything. And then again, the user would have to zoom in to view the right bits of content on your website.

The solution

So there is a solution, called responsive web design. Basically it means that you define a dynamic stylesheet that behaves differently based on a range of screen resolutions. This allows you to resize, move and hide elements to whatever extent. The syntax speaks for itself:

@media (min-width: 1200px) {
.logo img { display:inline-block; }
.logo span { display:none; }
}

@media (min-width: 768px) and (max-width: 979px) {
.container { margin:0; padding:8px; }
.logo img { display:none; }
.logo span { display:inline-block; }
}

The workflow is straightforward. You start with designing a website based on a large display. Then, for each step down the ladder, you analyze the appearance and decide whether some elements should be modified by resizing, moving or hiding.

However, always remember that responsive web design starts at the very beginning of your process. Making an existent website responsive is not always as easy as it seems.

Responsive devices

The result

There are frameworks such as Bootstrap which have responsive features built into their design. Its fluid grid system and other useful features can help any designer and developer to quickly and effectively build web applications that are suitable for any device.

Using responsive web design can assist in optimizing your website for both visitors and search engines. At first, you will retain a substantial part of the original user experience for whatever device. Second, you will serve one version of your website’s content on one domain only, which is good for SEO and prevents outdated content on a mobile version of your website.

The discussion

Designing responsive web applications and frameworks can have many advantages for web designers, developers, visitors and search engines. However, the topic is heavily hyped and some critique on the technique has been aired.

First, it is important that you keep in mind that you wish to retain the original user experience at all time. If responsive web design does not provide you with the right tools to achieve this goal, you might want to forget about the concept and stick to a separate mobile domain.

Also, serving the same website to any device means that all elements of the website will be loaded at first, after which they might be hidden through the dynamic stylesheet. The fact that they will be loaded anyhow will influence the load and compilation time. Therefore, making sure your website’s load time is topnotch becomes even more important, as well as loading resources asynchronous through jQuery and Ajax.

The conclusion

Searching the web will give you a lot of results on the positive and negative aspects of using responsive web design for your web applications. The technique can help retain the original user experience and helps to optimize your website for search engines as well. However, it is the user experience which should be considered and retained at all time. Therefore, sticking to original solutions such as mobile domains might be a better solution, depending on your specific case. Therefore, always verify your website’s mobile optimization using WebCEO’s Website Audit Tool to avoid any issues that could lead to penalties from search engines.