Thursday, January 9, 2014

Responsive Web Design: Tips and Tricks

I recently worked on an application (Zoho Pulse) and made the application responsive for mobile and tablet devices. The website was previously built for web, and I had to face a lot of challenges to make it responsive. Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. 

1. Simple DOM structure:
This is perhaps the most basic of them all - keep it simple. Complex DOM means a complex layout, which means a lot more burden for you. It also would mean that the interaction and scroll will become sluggish - an effect you don't want. Divide your website into proper sections (like a header, left navigation pane, content area, etc.)


2. Media Queries:
Media queries in CSS adjust the content based on width of the device. Choose to display/hide content using media queries. Make sure that only the most important content of your page is displayed on mobile devices. You can hide everything else that you feel are not-so-important.


3. Breakpoints:
Make sure you have the right media query breakpoints for standard devices. Uneven breakpoints would make your website behave oddly in different devices which might nearly be of the same display resolution but above/below the breakpoint.

Here is a list of common breakpoints borrowed from the Foundation framework by Zurb:

// Small screens

@media only screen { } /* Define mobile styles */



@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */



// Medium screens

@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */



@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */



// Large screens

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */



@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */



// XLarge screens

@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */



@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */



// XXLarge screens

@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */



4. Box-sizing: 
You probably know this property, but you will start appreciating it more while using it in responsive design. It helps you control the size of your divs even while resized. Box-sizing: border-box property gels the width, padding and border properties of the element within the specified width. In other words, the padding and border are 'inset'.





5. Max and min properties:
The max-width, max-height, min-width and min-height properties limit the maximum or minimum height/width of the element. Enough said.


6. Em and Rem units:
If your website is zoomable, the clarity of your fonts may be lost if you have specified the fonts in px units. It is well known to specify font sizes in ems. But what does it mean?

"If you define a font-size as 1em (font-size:1em;) you are telling the browser to set the font height to the same height as the parent element default height."
Rems are different from ems in one distinct way – ems use the containers font size to calculate, whereas rems are root based, I.E they use the HTML font-size as the base to calculate from.


7. Meta tags on your page:
I use this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

It indicates that the height and width must be of that of the device, the zoom must be set to 100%, and must not be allowed to be zoomed in or out by the user. 

<meta name="apple-mobile-web-app-capable" content="yes" />

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.


8. Eliminating touch delays:
Touch devices have a delay of nearly 300ms to allow double click. Anything more than 50ms as a negative impact and makes your app look sluggish as it takes time to respond. To eliminate this click delay, you can use the Fastclick plugin.


9. Bring native scrolling to your web app:
Mobile browsers do not scroll content like a native web application does. The 'momentum' or 'kinetic' scroll that your phone provides for apps isn't provided for browsers. To use this, you need to add a CSS property in your scrolling container:

webkit-overflow-scrolling: touch;


10. Backface-visibility:
The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside. However, it is known to crash Safari in iPhone and iPad, so it is better to avoid this property.

Some more information on this here:




11. Lesser jQuery bindings:
More jQuery bindings would mean that you are increasing the initial loading time and the DOM becomes heavier, also the performance and response is affected. It is generally advisable to use lesser jQuery bindings and use plain JavaScript instead.


12. Avoiding hover states:
If you find your website to be sluggish while scrolling, the single main reason would be the :hover selector in CSS. When you scroll on content that has a hover state, the browser mistakes the touchstart of scroll to be that of a hover state. Instead of scrolling the content, it shows you the hover state of the element, which makes the scroll look sluggish. Avoid hover states wherever possible and the best suggestion would be to gather all hover statements into a single file and not loading it for mobile devices.


13. Avoid using orientation in media queries:
@media screen and (orientation:portrait)
@media screen and (orientation:landscape)

These statements in media queries allow you to define styles specifically for portrait or landscape orientations. It is, however known to cause problems in Android when the "focus" event of input boxes is fired. Sometimes, the whole layout goes beserk.


14. Relative design:
This is again the basics of responsive design revisited. Try to specify all widths and heights in %. It allows content to adjust automatically to the available width/height.



Got more ideas? Do leave a comment below! Also, you can grab a presentation of the same here on Slideshare.