Responsive Web Site Design Concepts

Responsive or mobile first design is essential in today's world. The use of smart phones and other mobile devices is growing exponentially across the world. This means that your web site has to be ready for the small screens and touch inputs of the typical mobile device. In the past the emphasis for web site layouts has been to make the best use of larger screens on desktops and laptops.

The new approach has been gaining traction and is now the best practice standard for web based software and web sites. If it's doesn't look good on a mobile phone, it's not a good looking web site.

The two main approaches when dealing with the goal of presenting a web site to users on a mobile phone are:

1. Build a separate mobile friendly web site
   This has been the approach for the past 10+ years. Users browsing a web site or web based system are redirected to a separate mobile web site that was specifically built only for mobile devices.
2. Build a responsive web site
   The web site's content intelligently shifts and resizes itself according to the size of the user's screen. This approach is much more cost effective, but it requires a design that is compatible with responsive technology.

This has caused a new problem. Web professionals and designers have had to wrap their heads around this new concept. The design is not static and so traditional web design principles need to be combined with an understanding of the possibilities of responsive web sites. Sections of a page can be hidden or displayed based on the user's screen width, for example. Once you can master these concepts the results can far surpass anything that was possible before.

We've gathered a few resources here to help you understand the challenges of designing a responsive web site:

• This page has a great description that can guide graphic designers and visual artists to understand responsive design constraints. Click here to visit.
• This page is a little bit more technical. Click here to visit.

For more information, please contact us.

Comments