Responsive website design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.

These days, every new client wants a mobile version of their website, and with the increasing number of smartphones, tablets, notebooks and desktops, it has become harder to keep up with the endless new resolutions and devices. Creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Responsive website design is the solution for building websites that respond to the user’s behavior and environment based on screen size, platform and orientation. This solution involves a mix of flexible grids and layouts, and an intelligent use of CSS media queries. As the user switches from their laptop to tablet or phone, the website should automatically adjust to accommodate for the new screen resolution. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market, thus a lower overall price for the website development.

Screen Resolutions

More devices with screen resolutions and orientations are being developed every day, and each of them may be able to handle variations in size, functionality and even color. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

The answer is: flexible layouts. This is not a new technique! Flexible layouts are being used for years, but in a different manner: columns widths are defined in percentages instead in pixels, allowing to adjust to some screen resolutions. In case of lower screen resolutions or mobile devices the layout would break. For a responsive design, everything goes further when styling the layout. Structural elements of a webpage (header, columns, footer), text and images adapt to screen resolution, in such a way that the template won’t break and will display everything in a proper way for each device.

Custom Layout Structure

For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. In other words most of the styles can remain the same, while specific elements on the page are changed with floats, widths, heights and so on, in order to display properly.

For example, we could have one main style sheet to define all the structural elements (wrapper, content, sidebar, navigation), colors, backgrounds and typography, and even the default flexible widths and floats. Then, we can detect if the layout is too narrow, short, wide or tall, and we can switch to a new style, that inherits most of the main styles and adjusts the layout’s structure with some specific rules.

custom layout structure

It is possible to resize elements proportionally or rearrange them as necessary to make everything fit (reasonably well) as a screen gets smaller, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. A responsive web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. At Nego Web Design we employ the best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

Responsive frameworks

When building a responsive website it’s usefull to use a framework that offers the basic HTML, CSS and JS functions. At Nego Web Design we develop themes and websites using the following frameworks:

Bootstrap – a simple, fluid framework from Twitter;

The Goldilocks Approach – fixed width for medium-large screens, fluid single column for small;

Foundation – an easy to use, powerfull and flexible 6 or 12-grid framework;

Skeleton – minimal responsive framework that includes a WordPress theme.

Conclusions

Responsive Website design and the techniques used by us when developing a theme are not the final answer to the ever-changing mobile world. Responsive Web design is a concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform.

Recommended resources:

Free WordPress Responsive Themes

Free Joomla Responsive Templates

If you are looking for a responsive website, we can build a website using a predefined theme or create you a custom solution that display awesome on a wide range of devices, for a wide range of users. Leave us a message!