Smartphones and tablets are everywhere, and they all have access to the Internet. As a business, it is in your best interest to take them into account; if your web page does not display correctly on these devices, you stand to lose customers. The buzzword is “responsive design,” which is a way of creating a web design so that it will respond to whatever device is used to view it.
Why use responsive design?
All you have to do is think of your desktop browser, with an average minimum width of about 960 pixels, and in many cases much more. That’s all the room in the world for big images and columns of text. Now think of your Smartphone; even in portrait mode it will at best be half the pixels found on your desktop monitor. If the page is designed for a fixed width of 960 pixels, it will display perfectly on the desktop and ridiculously small on a tablet and on a Smartphone, odds are the visitor will have to scroll horizontally while zooming in and out. Scrolling and difficulty in reading must be avoided to keep the visitor on your site.
The goal of responsive web design is to work with any browser or device used to visit the site. Responsive design identifies the device viewing the page, assesses its features and delivers the style that is ideal for the device.
Limit the content
When mobile viewing devices are considered, the best web sites are those that limit the content to the most important issues. There is limited real-estate on a Smartphone so cut right to the point. When designing responsive web sites, design for the smallest screen first. By doing this, as a designer you will be forced to determining what is important and get it up front and at the top of the page.
Use CSS to create the design
Even though you are designing the site to display on different devices, there are certain basics that you will want regardless. Things like the font, colors and icons can be set in your style sheet. Once the HTML has been written, you can use CSS to remove certain elements that you don’t want displayed when the site is viewed on a mobile device.
Once the small screen has been defined in the style sheet, move to the next screen size which will probably be a tablet. Even though a tablet can handle a desktop design, it is best to make a less complicated version for tablet viewing. When designing the tablet version you can begin reintroducing some of the elements that were not displayed on the a smaller mobile device due to limited space.
There is no escaping the future, it is with us now. Web design at its best takes any and all viewing platforms into account so that your users and customers can always easily access your content.