Responsive Web Design with Mobile First Approach

Hi, I am trying to learn RWD and so far the tutorials i have followed seem like Adaptive Web Design rather than RWD. I have followed learnable.com and http://www.lingulo.com/tutorial-content/html5/. I am calling these adaptive web design because 1) these are not mobile first and 2) these are px based and not %.

I am attaching the learnable tutorials that i have followed so far here. I can’t attach the lingulo attachment since that is 1.74MB. Please inbox me and i’ll send you the lingulo project via email.

I am looking for a good tutorial/book/training resource that teaches RWD with mobile first approach. Please let me know if you have successfully followed any resource.

For learning purposes, i am trying to stay away from different frame works at this time.

Thanks.

An introduction in SitePoint.com: http://www.sitepoint.com/building-a-responsive-website-introduction/

There are many others on the Internet.

Here you have a good listing of them: http://www.ugurus.com/responsive-design-tutorials

After consulting them, the idea is to seek for specialized tutorials and articles focusing on specific problems and issues regarding RWD (typography, images, navigation, media elements, slideshows, etc.).

Please have a look at this page: http://www.hongkiat.com/blog/responsive-web-tutorials/

Thanks @JM Rosón Bravo. I’ll be looking at these resources after work today. You are correct, typography and navigation are two important things that i am after here.

I have also enrolled in the following (new course at learnable):

Hi,

Responsive web design is a broad term that basically means the site will fit nicely in the device that is viewing it no matter the size of the viewport. It has become to mean percentage fluid/elastic sites but the general term is for sites that will display well on any size device.

I believe adaptive design is really a subset of responsive (you can debate the semantics for ever) but adaptive basically means a series of fixed widths that change at certain breakpoints to allow the design to fit into the viewport.

Mobile first, in a sense, has nothing to do with the above and the term was coined for a design that catered for mobile browsers and older browsers (those that don’t understand media queries) and therefore the base CSS was the code that mobile browsers got by default. Strip out the media queries and the design will still work everywhere; albeit in one column most likely. These days mobile first has to come to mean something slightly different in that you design the mobile view first even if you are using media queries and then enhance it for wider devices. In most cases mobile first means using min-width media queries and working larger rather than using max-width media queries and working smaller.

I don’t think it matters at all these days whether you take the mobile first approach or the desktop first approach as modern devices and browsers have come of age and can handle media queries very well. I actually prefer the desktop first approach because that’s how all my work arrives (in Psd format) and that’s the view I need to get right first.

Regarding the files you attached then your grid example is a percentage layout and more or less mobile first. The other example is more of an adaptive approach but still has fluidity at certain stages. Either would be fine for the task in hand so the question is "what is it that you don’t like about these approaches"?

To be honest I would use neither of those approaches and I use a different concept using a ‘device agnostic’ approach where the breakpoints you use are controlled by the design you are creating and not some expected device size. You create your design and then you add a breakpoint at points in the design where the design doesn’t seem to fit or doesn’t look right across the whole range of its width (open and close your browser window). In this simple way you collect all devices on the way.

I prefer to use a fluid approach, not necessarily percentages, but more likely max-widths with free flowing content for the main section and maybe a fixed width for the sidebars or min and max-width for the sidebars. The problems with percentages is that 20% becomes too small very quickly to hold any real content so you have to be careful to make life easier. With this approach it becomes quite easy to find the point at which the design needs to be modified to look better and then you create your breakpoint and use your media query to effect the changes.

More info:

http://www.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

1 Like

Thanks @Paul for breaking it out. Really loved reading the two articles in your post.