Responsive Web Design 101: The Basics Of What And How

Virtually every new client demands a mobile version of their site in addition to the conventional one. This is reasonable at the least – there are users on BlackBerrys, iPhones, iPads, Netbooks, Kindles and many other mobile devices out there.

We can expect that a new design will be needed to meet the innovations in the world of technology five years from now, and the same will be required time and again with continual evolution.

[m2leep]

Web design and development is fast approaching the point where we may not be able to keep up with the devices and resolutions being churned out into the market. It’s impossible, or rather impractical, to create a version of one website for each device in existence. But then again, website owners can’t just sit and sacrifice users who are on certain devices, not with the competition that is out there. So, what’s our other option?

 

Responsive web design is a technique of web design and development where websites are designed to change layout characteristics depending on the environment (device and platform) and behaviour of a user (orientation). In this approach, flexible layouts and grids are used together with clever application of media queries in CSS.

When a user moves from a laptop to an iPad, the responsively designed website will stick automatically to fit to the new image size, resolution and scripting of the latter device. This therefore does away with the requirement for creating different design/development phases each time a new gadget hits the market.

 

How Responsive Web Design Works

Responsive web design was borrowed from a concept known as responsive architecture, where a space/room adjusts automatically depending on the number and movement of people within the space. It uses various techniques and installations to expand, flex or bend wall structures depending on the number of occupants and their movement in relation to the walls.

A similar idea is used in web design; rather than create a custom site for each user group (on different devices), you create a design that automatically adjusts just like responsive architecture.

Now, on a building, motion sensors and robotics can be used, but in web design, the responsive aspect has to be introduced by adopting abstract thinking and building from techniques which are already in practice – media queries, fluid layouts, scripts to seamlessly reformat mark-up and web pages.

Responsive web design is about far more than just images that resize automatically and screen resolutions that adjust; it introduces a whole new way of design, a few features of which will be discussed below:

 

Screen resolution adjustment

Every new device represents a variation in the orientations, definitions and resolutions of screens, some of which are designed to support size, functional and colour variations. How does one design for portrait, landscape, square screens, and those that switch from one to the other?

You can group screen sizes to major categories and custom design for each, sure, but that is still overwhelming, given that more devices are still being designed and released. Think also that some users don’t maximize their browsers, or resize according to their preferences – basically, there’s just too much variation.

responsive-web-design

 

Making everything flexible

Some years back, flexible layouts were considered luxuries for websites – only text and structural elements had some flexibility. Even then, adding images could still create breaks in the layout and so could the flexible structural elements given the right kind of pressure.

Responsive design increases the flexibility of most things on a website – automatic image readjustment, working around layouts and basically far more options with larger disparities in screen sizes, resolutions and orientations e.g. from laptop to iPad.

Common techniques include creating mixes of fluid images, fluid grids and creating smart mark-up to step in where necessary. The fluid images are created in three main ways:

  • Concealing and showing image portions
  • Creation of sliding composite images
  • Placing images on the foreground such that they can scale with differences in layout

It may all seem easy, but it’s more than just inserting the features and packing up the toolkit. Some parts may have to resize by cropping in order to preserve quality while others can stand proportional resizing. However, this doesn’t address the quagmire that arises where layouts are extremely shortened or narrowed so that they look weird.

writing code

 

Working with images

A major part of the challenge that brings responsive web design is how to create image flexibility. A common method is to apply the max-width command in CSS, where the width is set to 100%. Images therefore display at 100% except where the screen width is narrower than the 100%. The image narrows accordingly in this case.

However, image download times and resolutions become more significant with mobile devices, especially where images were originally meant for larger devices. A technique to solve this is to include image resolution shrinking properties, so that larger images don’t take up unnecessarily large spaces on small devices. This method is supported on all modern browsers, unlike the previous one that precludes Internet Explorer.

freelance-web-designer

 

Working the layouts

With extreme changes in size, it’s also necessary to change the layouts. You can either have separate style sheets, but a more efficient method is to use a CSS media query. In this method, most styles retain their original characteristics; only specific style sheets would inherit the styles, moving elements around as required using heights, widths, floats etc.

For instance, there might be a single main style sheet as the default to define the major structural elements and the default flexible floats and widths. If the style sheet in use makes content/layout too anything – short, tall, wide or narrow – this should be detected and a new, more appropriate, style sheet be adopted. This new sheet adopts all characteristics of the default style sheet; only the layout structure is redefined.

web-designer-person

 

Conclusion

Even responsive web design as we now see it cannot offer a final solution to a continuously evolving mobile environment. Correct implementation of responsive web design merely improves user experience, rather than offering a complete solution. Constant work with different resolution technologies and devices in the future will hopefully bring better fitting solutions as time goes by.

 

Images provided by Shutterstock

FrontPage Image: Responsive web design on different devices via Shutterstock

In Post Image: Css code via Shutterstock

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.