Responsive Web Designing

Responsive Design

This document contains useful information about responsive web designing and things that need to keep in mind to develop an easy and successful responsive web project.

Why Responsive?

In traditional approach, we used to make separate sublayouts for desktop and mobile pages. But instead of making separate sublayouts and to overcome this headache of managing them separately, we can manage them in a common sublayout by using breakpoint approach in front-end development.

Media devices and breakpoints

Category	Devices	Resolutions / Breakpoints
Extra Small devices	Phones	<768px
Small devices	Tablets	≥768px
Medium devices	Desktops	≥992px
Large Devices	Desktops	≥1200px

Design guide formats (PSDs)

Design guide for desktop and tablets can be made consistent, but in case of mobile, it should be different. Generally we use 1024px wide PSDs for desktop design and for mobile 640px wide PSDs. In mobile design we take exact half of measurements for each of component, as our mobile screens are 320px wide. Now the question comes into mind is why we use 640px wide PSD for mobile design? So the answer is Retina Display.

Retina Display is a marketing term developed by Apple to refer to devices and monitors that have a resolution and pixel density so high – roughly 300 or more pixels per inch – that a person is unable to discern the individual pixels at a normal viewing distance. Apple's Retina Display made its debut on 2011's iPhone 4S, which featured a 960x640 pixel screen with four times the number of pixels (326 pixels per inch) as the iPhone 4.

Framework and structure

To manage the structure of responsive design conveniently, we can use the bootstrap framework, it overcome the headache of managing things (like media queries, styling etc.). It’s free and easy to use. This framework includes a long lasting list of plugins to customize the HTML components and controls, in addition to responsive structure support. It follows mobile first approach, then tablet and then desktop (for example, media query for desktop min-width: 992px etc.). It supports both style sheets structure, CSS and LESS. Following structure can be used as a standard.

Main style sheet: import all model of style sheets (mobile, tablet and desktop). In these three stylesheets, we can separately import all stylesheets for different models, from different folders.

Now we can separate our style sheets for different model by placing different stylesheets in different folders (mobile, tablet and desktop).

In the following screenshot, we can see the structure of stylesheet (here we are using LESS stylesheets). Main stylesheet file is “style.less”.

 

In main stylesheet we import all three model stylesheets (inside breakpoints folder) as follows

 

Now, these files contains the references of individual model’s styling. For example, content of “mobile.less” is as follows

These files contains the styling for mobile layout. Similarly for the tablet and desktop layouts, we will follow the same approach to manage the stylesheet structure.

In addition to this, if we want to manage any style for specific device (for e.g. mobile), we can add media query in “mobile.less” as follows

Adaptive Image Technology

This is a Sitecore port of the popular Adaptive Images script. This module detects a visitor's screen size and uses the built in Sitecore image features to deliver re-scaled versions of images if necessary. It is intended for use with responsive designs.

Why would I want this? :

• Ensures you and your visitors are not wasting bandwidth delivering images at a higher resolution than the visitor needs.
• Will work on your existing site, as it requires no changes to your mark-up.
• Takes retina displays into account so that images are served based on a combination of screen size and pixel density.

The users screen size is detected and added as a cookie with a small line of JavaScipt that is added to the main layout file(s) in your Sitecore solution. Once the screen size (and pixel density) is detected then it is possible to deliver appropriately sized images to the user.

Conclusion

Responsive web designs are easy to manage with different frameworks and saves the developer’s time, also, we do not need to manage separate layouts and sublayouts for mobile, tablets and desktops. Therefore, it saves project time and budget. Our web site will look consistent on many devices in between desktop (large devices) to mobile phones (extra small devices), will result in client satisfaction, in less development effort.