Creating a Responsive Design the Easy Way

Responsive design is all the rage now-a-days. It just magically takes the same content on your website and transforms it into a properly formatted and more user friendly version of your site for just about any device without the need for user-agent detection/redirection scripts or a specialized mobile domain.  From the big Fortune 500 companies and Internet giants such as Twitter and Google, to the small mom-and-pop shops and everyone in between are updating their layouts, content, and feature set to be more adaptable to any size screen.  It gains a larger target audience and a better user experience, as I’m sure everyone remembers the pain of constantly zooming and un-zooming on desktop native sites on your smartphones.  Believe it or not, this can all be done without making the lives of the developer and designer harder if done properly.

I’ve used many responsive and grid frameworks, from Skeleton to Bootstrap 2/3, to my current favorite Foundation by ZURB. They all have different styles for their markup, different classes, different features, and different libraries that enhance the user experience. To find which is right for you will take a bit of play, but it also depends on what is right for your web application. I’ve taken away from Bootstrap because the included styles were rather generic and a bit more work to modify, and the libraries added on a good deal of weight on the load time of most of the applications I made. Foundation is a bit more up my alley because of those reasons, but again for yourself and your apps, you’ll have to experiment a little to see what’s best.

With any responsive framework though, there are a few guidelines and tricks to make your life a bit easier while you’re scaling up and down screen sizes and here are some of them…

This is what happens when you have a coffee cup in one hand and a pen in the other, they both harmoniously meet on paper

Sketch it out

Even if it’s a rough sketch, something done on pen and paper, throw in a little color action with markers/colored pencils, but get your idea outside of your head before you start developing it.  I used to sketch everything in Photoshop myself, but then just found it easier, faster, and more of an organized effort to put the pen to the paper.  Odds are, especially if you have a harder time bringing your ideas to life, drawing on analog formats will be much more efficient and productive to producing your layout and feature set.
This is the rough sketch of the mobile view of an app I’m working on, which brings me to my next point…

Start with the mobile view first

If you’re wanting to make a responsive site, odds are mobile users are a large target in mind.  Why?  Damned near everyone has a smartphone now, and mobile web usage continues to increase every year.  It’s much easier to design your application and the functions and features of it on a mobile view first and expand upwards than it is to take a large screen layout and condense it down.  You’ll be able to focus on what really matters for the user experience, what features and content are more superfluous, and focus on usability in an almost streamlined fashion.

Stick with the Grid

Most responsive frameworks including Bootstrap and Foundation have been based off a grid system.  The most common of these grid systems is the 960 grid, 960 being the number of pixels in this grid on the horizontal plane.  There are 12 columns, generally 60px wide, with a 10px margin on either side for a total of 80px.  You’ll be tempted to modify grid size some, which of course the more power to you, but at a certain point things can get hairy, so in my opinion stick to the grid, and style around it.  This way it’s much easier to simply add a few classes to your HTML markup and have things scaling perfectly across displays.

Now, just because it’s based off the 960 grid doesn’t mean these frameworks or your design has to be limited to a width of 960px. Most grids can even go beyond 12 columns, to 16 and 24 giving more minute level of design. These days with high definition screens, you’ll end up having to set a few extra media queries for extra large screens even.  While designing this site, my development machine uses a 40″ 1080p TV as the display.  I had to use the base media queries for phone, tablet, desktop, and create a new one for extra large displays.  Nothing too hard at all, but another screen to be considered while setting your media queries and layout transformations.

Fall in love with rem/vw/vh

Most people remember how to set width, height, font-size, margins, and so on based on pixel values.  That’s still all fine and dandy, but with responsive design one of the newer CSS 3 specs gives you a powerful tool set to redefine your sizes into values that are more elastic.

You might have heard of em for size settings, which is the predecessor of all these new units from CSS 2.  The difference in em (elastic measure) and rem (root elastic measure) is that em is based off the parent item, it’ll inherit the size and set a relative elastic measure for the child item.  The benefit of rem is that it’s based off the HTML body root size, so whatever your CSS style is set to for your html tag will be the base for the elastic measure for rem.  Inherit sizes elastic sizes rule in RWD, and make your job significantly easier.

Another new set of units introduced to CSS 3 is vw and vh which stand for view-width and view-height respectively.  As you might gather, these units are relative to the viewport width and height.  These are rather handy especially if you want to keep things relative to the width/height of the viewport for a few devices in a specific media query as you’ll find that with the vast number of smartphones out there there are slightly different pixel ratios even for screens of the same size.  The only thing to note about vw/vh is that not all browsers full support them.  In order to have backwards compatibility, you can use a small JavaScript function to compute vw/vh to pixels if you’d like to go that route.

In-Browser, and On-Device Testing

Chrome DOM Inspector
You can scale down the size of your actual window, but the device emulators give you more tools and specificity

One of the best tools in your arsenal can be built right into your browser.  If you don’t know about Firebug for Firefox, or Chrome’s built in DOM Inspector, this might change your life.  Not only can you modify the DOM on the fly for quick testing, but they both also have another feature that makes RWD easier.  You’re able to scale the viewport up and down to different sizes with lists of various popular devices.  This will help you see exactly where the media queries start and stop, how they scale from each other, and give you a hands-on tool set to manipulate it without a constant cycle of saving layouts and stylesheets, and reloading on your phone.

Now, the thing to remember is if you have the resources available to you, even if you have to borrow a friends iOS/Android device for a few minutes, test your design on the actual devices as well.  Even though Firebug and Chrome’s DOM Inspector will emulate the screen sizes and set the proper user-agent for the specified device you’ll be sure to find some odd quirks to how the actual devices render your markup.

 

Other than that, all I can suggest is to try the various RWD frameworks, see which one is best for you, your application, and the devices you’re wanting to build for.  They all have different features, some overlapping, and what’s best for you is going to be different from what is best for someone else.  Otherwise the above tips will hopefully make your transition into the RWD realm a bit easier.

8 Responses to “Creating a Responsive Design the Easy Way”

    • Reply here!
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod semper odio, vitae blandit metus dictum id. Donec ultrices lacus sit amet nibh fringilla, in congue neque cursus. Proin interdum ultricies felis tincidunt vehicula. Vivamus bibendum aliquam nunc sed elementum. Quisque nec diam blandit, interdum urna at, fringilla ex. Praesent tincidunt pharetra pellentesque. Donec sed luctus dolor. Quisque cursus orci sit amet accumsan rhoncus.

      Quisque nec tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices commodo ex, eu maximus nulla congue et. Phasellus semper turpis ut fermentum laoreet. Vivamus sodales pellentesque dapibus. Donec suscipit suscipit erat id interdum. Integer eget efficitur neque. Cras gravida diam at commodo pellentesque.

      Reply
      • A sub sub comment!

        Nunc hendrerit lorem nec fringilla sagittis. Donec fermentum sem eget urna ultricies, et mollis massa tempus. Donec velit est, facilisis at porttitor in, finibus et lacus. Pellentesque ultricies lobortis ante in luctus. Cras consequat velit et diam venenatis, eu pulvinar quam tincidunt. Maecenas eget volutpat risus. Nulla quis commodo orci. Nunc eros neque, pellentesque in sagittis quis, feugiat tincidunt dui. Nam lacus lectus, tincidunt vitae neque et, malesuada lobortis sapien. Morbi feugiat nunc mauris, eu dictum eros dapibus vel. Quisque ut viverra tellus, eu volutpat leo. Donec et mollis velit, eu hendrerit mi.

        Fusce sit amet porta est. Donec a libero non libero lacinia egestas sed id quam. Nam metus dolor, aliquet nec commodo nec, mollis in purus. Etiam varius venenatis ipsum nec tristique. Nam cursus magna non mi faucibus sollicitudin. Phasellus volutpat mi vitae metus commodo, ut tristique leo pellentesque. Morbi lacinia euismod libero ut sollicitudin.

        Reply
      • Ken Moini says...

        Quisque nec tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices commodo ex, eu maximus nulla congue et. Phasellus semper turpis ut fermentum laoreet. Vivamus sodales pellentesque dapibus. Donec suscipit suscipit erat id interdum. Integer eget efficitur neque. Cras gravida diam at commodo pellentesque.

        Reply
    • Nunc hendrerit lorem nec fringilla sagittis. Donec fermentum sem eget urna ultricies, et mollis massa tempus. Donec velit est, facilisis at porttitor in, finibus et lacus. Pellentesque ultricies lobortis ante in luctus. Cras consequat velit et diam venenatis, eu pulvinar quam tincidunt. Maecenas eget volutpat risus. Nulla quis commodo orci. Nunc eros neque, pellentesque in sagittis quis, feugiat tincidunt dui. Nam lacus lectus, tincidunt vitae neque et, malesuada lobortis sapien. Morbi feugiat nunc mauris, eu dictum eros dapibus vel. Quisque ut viverra tellus, eu volutpat leo. Donec et mollis velit, eu hendrerit mi.

      Fusce sit amet porta est. Donec a libero non libero lacinia egestas sed id quam. Nam metus dolor, aliquet nec commodo nec, mollis in purus. Etiam varius venenatis ipsum nec tristique. Nam cursus magna non mi faucibus sollicitudin. Phasellus volutpat mi vitae metus commodo, ut tristique leo pellentesque. Morbi lacinia euismod libero ut sollicitudin.

      Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>