Responsive Web Design

Hello Experts,

I would like to start designing responsive designs and would like to know the best resources out there to learn this. I will be using HTML5 and CSS3 and would like to create one website to support desktop, tablet, and mobile users.

I'm currently using HTML5 boilerplate for HTML5 and not sure if I need a boilerplate of some sort for responsive design or not.

I would like to know and be able to understand how to layout a design from paper or photoshop and from there determine how to make that design responsive using percentages so it looks nice when going from desktop to tablet and or mobile devices with a nice transition.

Thanks in advance!
Who is Participating?
I would suggest that when you make your Photoshop design, you decide how the layout will change across devices.
For example if you design a page with a large banner image, would you expect the image to display on a handheld at a smaller size or simply hide it.
If you design a horizontal menu how should it appear on a mobile device? Once you've answered those questions you will need to come up with that number of variations of design in Photoshop.
As this is responsive design you won't need to have different size images or buttons as your CSS will take care of scaling images down depending on the size of the screen.
Have a look at Bedforshire Uni website and shrink the browser window to see what happens or look at my test to see how layers disappear.
If the question is about percentages try using a grid to layout your content check Columnal grids which should open in Photoshop though my weapon of choice is always Illustrator.
Kyle HamiltonData ScientistCommented:
@media queries will be your friend for this. is great resource. John Resig is an insanely smart javascript guy (author of jquery btw) Paul Hayes is CSS3 Genius an amazing resource for compatibilities and other goodies

but that's not even scratching the surface.

be careful with bioler plates and frameworks. Most of them are pretty bloated, and even the HTML5 boilerplate authors encourage removing unused features.

but most importantly - test, test, test...
asp_net2Author Commented:
Ok, what do you suggest about taking ideas from pen/paper or even layouts created in photoshop to making those designs responsive using percentages so that the layout adjust from desktop, tablet, and mobile with a smooth transition?

Also, you suggest media queries which is how you target those devices but which media queries are most widely used?

Also, when you use media queries how do you make smooth transitions in your design from going from one layout to another using media queries smoothly?
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

You are trying to do the work in backward order.  You cannot do design and then add content, if your developing for users.  They don't care about design.  They visit web sites for content, and that is where you need to start.

What is the content?  What does it need to have to be usable for the visitors?  determine what the content needs and then you know the parameters and limits of your design.  When design dictates limits on content it cripples a site.  When content dictates design, the site may not be as pretty, but gets more users because design only impresses the first time it is seen, good content holds visitors, brings them back and make encourage them to post a link to your site.

asp_net2Author Commented:
Hi COBOLdinosaur,

Thank you for that info. But can you please provide feedback for the question(s) that I'm asking? That is most important to me right now.
I thought I was doing that.  You want to start out doing a design without knowing what the design is supposed to support.  With that approach, a design that works is primarily luck.  Do Google and Amazon have very different designs because they have very different content; or different content because the design is different.  

Even if you are just experimenting you have to have parameters and requirements based on content, otherwise it is just doodling and you might learn something about code from playing with it, but you won't learn much about design unless you have defined requirements that force you to measure final result against requirements based on what the design has to support


Ray PaseurCommented:
I generally agree with COBOLdinosaur.  The development process usually involves specialists  from more than one field.  An interface document is generated providing a contract between the content developers and the front-end developers.  It names the elements of content (semantic) and assigns the CSS tags, so that the structure of the final web site can be marked up in a variety of ways to achieve the right look and feel for whatever screen or device is used to view the site.  The content developers can then work independently from the designers, because everyone agrees on the CSS DIV and ID tags.

For an example of this in practice, see: The CSS Zen Garden.

A Google search for "designing for mobile" will be helpful, too.  As a practical matter, you can design everything for mobile devices with confidence that it will work on desktop computers, too.

Learn about CSS @media.

Read everything here: and here:

Some good thinking here:

Hope some of that helps, ~Ray
I have not tried this service yet ( was going to today) but the infusion did not go as well and I am heading back to bed - - I came across their site once and it is just on my 4-burner stove with 10 pans trying to cook :)
Kyle HamiltonData ScientistCommented:
Just before everyone dismisses design as a bunch of pretty pictures... Good design will ensure that users are able to access the all important content in a way that is not painful - as is unfortunately the case with too many websites. If have to suffer through difficult to read/find/understand, or just plain butt ugly design, I will go find my content elsewhere :).

Honestly, there is not that much original content - chances are high it's available on a whole slew of other websites.

It's all important- content, design, performance, etc..
Kyle HamiltonData ScientistCommented:
Form & Function - "this, I tell you brother, you can't have one without the other!"

No one is disputing the value of good functional and accessible design, but making content fit design is backward.  Design should support content, not apply limitations on it.

A spectacular design will impress once, but if I return it will be because the site has the content I want in an accessible functional format, that is logically organized so I can find what I want.

You get that by starting from content and determining design requirements based on what is the optimum environment to present the content.

Honestly, there is not that much original content

Which is exactly why content has to trump everything else to make your version of the content the authoritative source.

Kyle HamiltonData ScientistCommented:
Cd&: With all due respect - I think you're missing my point. Design shouldn't be  dressing put on the content to make it more palatable. It should enhance and compliment the content in ways that "content" alone cannot do. These things are integral to each other in order to create the ultimate user experience. In fact the most minimal design is often the most difficult to achieve and requires a true design professional. Somebody sensitive to typography, proportions, white space, and other formal elements of design that are so painfully lacking from so many websites.

Stunning design purely for the sake of design has its place too, but that's not what we're talking about here....
I am not missing your point, and the only point of disagreement is the sequence of events to develop a web page.  There is no value in considering design until the nature of the content is known.  Design is the container.  Not all containers are appropriate for all content.  

Cd&: I have some content that I need to put in some thing.
K: No problem here is a paper bag.
Cd&: Uhm... it's a liquid, maybe a jar would be better.
K: We have a bag , not a jar; so freeze the liquid and then we can use the bag. ;^)

asp_net2Author Commented:
@COBOLdinosaur / kozaiwaniec,

I apreciate both of your feedback. But that still does not answer my original questions.

>> I would like to know and be able to understand how to layout a design from paper or photoshop and from there determine how to make that design responsive using percentages so it looks nice when going from desktop to tablet and or mobile devices with a nice transition.


I don't understand your point about getting content to fit into a design. I believe it's the other way around. If I have a design that has a header and 3 column layout in the middle along with a footer then what does the content have to do with the design. I still need that design to be responsive. From there I can determine what content in the layout I choose to display for the responsive design based on media queries.

I'm just asking what is the best method out there for putting an idea either from pen/paper or a layout in photoshop into a responsive design that will flow nicely from desktop to mobile.
Kyle HamiltonData ScientistCommented:

I think we're actually in total agreent. What I'm saying actually addresses the paper bag scenario and tries to prevent it. I just think there are a lot sieves out there trying to hold on to water... And that's just a shame.

I still need that design to be responsive.

Responsive to what?

Visitors don't come to a site to see your design.  They come for the content you have to offer.  From your insistence on the "design" being responsive I can only deduce that your approach is to make a round hole and if the content is square you will try to shave off the corners.  Good luck with that.

It may turn out that the content requires a different design approach cross-platform, and that you require media queries. It may be that some functionality will not work for all platforms.  Making it fit the viewport covers about 10% of the design, and seems to be your primary concern.

In any case your question has no answer as asked.  The key piece of information is missing.  What is the content?  Without that information you can do thousands different variations of design, and probably one of them will work for whatever content you finally decide will go into the design.

greetings asp_net2, , I'm going to say my two cents, even though you have specifically requested -> "how to make that design responsive using percentages so it looks nice when going from desktop to tablet and or mobile devices with a nice transition."

I have recently been trying to do some "Mobil" specific translations of selected web sites, , and for what I have tried to do your seemingly "One Size Fits All" calculate some percentages of page width, and do a CSS switch, just won't do it. I have had to make DRASTIC changes in the entire layout, often reducing and or eliminating images, and changing 3 column layout to two and even one column. For me a vertical cell phone has a much restricted view area, than a 1600 x 900 desktop, I had to deal with a ton of compromises, trying to balance that was "Important" content, and staying on a site "Theme" or visual presentation, and the user's view in a cell phone. But some have already said something about the "Content" pushing the layout, more than the layout pushing the content. Many Tablet users "like me" want a desktop view of site rather than a vertical cell phone view for most sites but not all.
One thing I did was to make a  m  sub-domain that holds the different layout and presentation for vertical cell phone as -

and you can have a link top o pages to go to desk, for ipads or bigger horizontal phones.  This was not an easy thing for me to try.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.