Responsive Web Design: Tips and Tricks

RESPONSIVE WEB
DESIGN: TIPS AND
TRICKS
Gautam Krishnan
http://www.gautamkrishnan.com

CONTENTS
• Introduction
•
•
•
•
•
•
•
•

1. Simple DOM structure
2. Media Queries
3. Breakpoints
4. Box-sizing
5. Max and min properties
6. Em and Rem units
7. Meta tags on your page
8. Eliminating touch delays

• 9. Bring native scrolling to your
web app
• 10. Backface-visibility
• 11. Lesser jQuery bindings
• 12. Avoiding hover states
• 13. Avoid using orientation in
media queries
• 14. Relative design
• Thank you!

INTRODUCTION

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, in the next slide -

// 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 */
when QAing large screen-only issues */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
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, userscalable=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: ftlabs.github.io/fastclick/

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:
http://dontwakemeup.com/webkit-backface-visibility-and-browser-crashing/
http://stackoverflow.com/questions/16166849/ios-multiple-divs-with-webkit-backfacevisibilityhidden-crash-browser-when-zo
https://discussions.apple.com/thread/5397323?start=75&tstart=0

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.

THANK YOU!
• You can grab the text version of this and many more tips and tricks
on design and programming at my blog here:
http://geekaylabs.blogspot.in/
• Follow me on Twitter @gkthegr8.
• On the web: http://www.gautamkrishnan.com

Responsive Web Design: Tips and Tricks

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Responsive Web Design: Tips and Tricks

Similar to Responsive Web Design: Tips and Tricks (20)

Recently uploaded

Recently uploaded (20)

Responsive Web Design: Tips and Tricks