Beginning responsive design


Responsive design is the buzz word these days and with my clients moving towards tablets / smartphones as their prime source of interaction…they have now started to demand that their websites should be tablet & mobile friendly. I had a lot of questions to answer for myself & here is a list of links that ultimately helped me get started…I am hoping that this may help some of you who have decided to change lanes similarly…

Responsive design Framework – All of designs are based on media queries.

http://css-tricks.com/css-media-queries/

Though its technically possible to custom code all the CSS, personally I feel its best to select an existing framework, that gives you a head start. There are many available frameworks and all of them based on Grid Layout. Though it may seem stifling at the onset, you can get quickly used to it as you learn along the way. The only issue being that you or your graphic designer now has to preplan the layout & content for Mobile, Tablet and Desktop. Grid layout automatically adjusts to the size of the media, based on the breakpoints in media queries. You can completely control their flow in the layout, resize them, hide them on certain media etc. Here are some of the leading responsive frameworks, completely free to use –

http://foundation.zurb.com/

http://getbootstrap.com/

http://purecss.io/

If you quickly want to learn about grids, check these tutorials…..

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-getting-started/

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-the-grid-system/

once you understand the grid system for any one framework, you could comfortably work with any responsive grid framework. The only thing that changes is the syntax that it uses.

If you designing in WordPress, click links below –

http://wordpress.org/themes/responsive ( based on zurb foundation 5)

Zurb foundation 5 uses jquery 2.0, while wordpress uses 1.10 for backward compatibility. But user on net have posted that it works fine.

http://cyberchimps.com/responsive-theme/

The best part when you switch to these frameworks is that they not only have css for grid but also ready to use css for website design elements such as forms, buttons, tables, menus etc. They also have option to customize the colors and out a freshly baked css that suits your color scheme. Check links below…

http://foundation.zurb.com/develop/download.html#customizeFoundation

One thing you may have noticed, is that you need to  ABANDON THE “PX” unit. Get used to em. Pixels are fixed size units, where as Em are scalable units. Using Em allows us to give the font size control to the user. For example Different users may use different font size setting say – small, medium, large on same mobile device. When you use Em, the users are able to control font size on your web site page. Here are some links that better explain this.

http://webdesign.tutsplus.com/articles/typography-articles/taking-the-erm-out-of-ems/

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

pixel to em converter.

http://pxtoem.com/

If you still think framework may not be such a good idea, as you are now going to be dependent on code written by someone else and may spend more time discovering all css than actually designing, there read this discussion on forum here –

http://graphicdesign.stackexchange.com/questions/16387/do-web-frameworks-such-as-bootstrap-or-html5-boilerplate-offer-anything-to-a-des

and just in case the website that you are planning is a very simple one, you could custom create all the responsive css and responsive elements yourself. Check out the links here.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://wp.tutsplus.com/tutorials/theme-development/building-a-mobile-first-responsive-wordpress-theme/

Either you can use a framework & I would recommend editor such as sublime text editor or Notepad++ or use Adobe Dreamweaver. I basically use Adobe Dreamweaver CC currently and its got an option “Fluid Layout” to begin with. So its got all the css for grid system already built into it, along with buttons to test mobile, tablet & desktop versions of your website.

Here is a nice tutorial that you can follow, to begin with.

http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver.html

http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html

http://www.adobe.com/inspire/2013/06/css-designer.html

Here is something to keep watch on, MACAW is a kickstarter project http://www.kickstarter.com/projects/macaw/macaw-the-code-savvy-web-design-tool?ref=live and is described as a next generation web site design tool. It supports fluid layout & has awesome features that should watch on the video on their site. Its supposed to release the MAC version in Jan 2014 & the PC version in couple of months.

sachinwalvekar