Responsive Web Design Demystified

This is a forum topic for discussing the article "Responsive Web Design Demystified":

http://www.elated.com/articles/responsive-web-design-demystified/

What exactly is responsive design, and how do you create a responsive website? This tutorial explains the concepts, and walks you through the basic steps for creating a responsive website layout.

Brilliant stuff! How about a followup with some of the stuff you mention, including scaling images, fluid type resizing and loading different images for mobile?

--
ELATED : )
http://www.PageKits.com
Professional Website Templates

Great Tutorial!
Simple, clear, step x step.

Q:
==
Is there any code that could be added
in order to make the last [DEMO] in the article,
also work in MS-INTERNET EXPLORER 8 and 7 browsers?
(we'll have to live with these 2 browsers for a while...).

Thanks!
Sfdude

[Edited by SFdude on 30-Sep-11 13:07]

@simon: Thanks for the suggestions - I'll add them to the list for future articles!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

@SFdude: IE7/8 don't support media queries natively, but there are some JavaScript polyfills out there that do the job - for example:

https://github.com/scottjehl/Respond

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Great article. These are the kind of articles that make me register and post comments like these.
You've earned yourself another feedreader, clearest tut I've seen on the net.

--
Making a better web.

@pieter: Thanks for the compliment

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Great article, helpful and very well written. I'm really glad you explained the "viewport" meta tag instead of just saying to use it (like a lot of articles seem to do).

I'm subscribed to the RSS feed of probably 30 or 40 different different web development blogs and sites, and this article is by far one of the best I have ever read. Well done!

@Daniel15: Thank you! Yes, I thought it was important to explain the viewport meta tag. Mobile viewports can be quite a tricky topic!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Another great article Matt, Thanks.

I've adapted this principle into a couple of WP themes but your article has highlighted a point I've missed re: iPhones.

http://ethanmarcotte.com has been championing this design principle for some time and, it's something I'm definitely taking to heart.

How about a follow up with some advice on images in responsive design? That would be real useful.

Thanks again,

Phil.

Outstanding article! Very succinct and enlightening.

Wondering when we could have media galleries like WOW Slider and Nivo Slider for responsive layouts.

I'm fairly sure you could write a workaround using javascript or jQuery for older IE browsers based on the viewport width and then importing the relevant documents stylesheet that way for backwards compatibilty.

@refreshcreation: That's exactly what Respond.js does: https://github.com/scottjehl/Respond

Awesome stuff!

@bionic frog: Thanks - yeah I'm thinking about a followup article that delves deeper into responsive design (images, fonts etc).

@ed1nh0: That would be nice Although WOW Slider works fairly well on my iPhone as it is.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks. Very useful.

Really good article, clear and well explained. I have tested the code on Windows Phone and works really well. Thanks for this.

--
Anthony Baker
Solutions Architect
blog.anthonybaker.me

@arbbot Thanks for letting us know about Win Pho (7?). Good to hear!

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates

Yes, the tests were done using an HTC Windows Phone 7 (although I'm inclined to omit the "7" since is until now it is a decent mobile development platform )

You can check my own staff at http://blog.anthonybaker.me

Cheers!

--
Anthony Baker
Solutions Architect
blog.anthonybaker.me

I published the results of running the tutorial output on the Windows Phone emulator and a Windows Phone device. It worked perfectly without needing to make any kind of modifications. You can check the results (with screen shots) on my blog. I took the liberty to use the tutorial demo URLs for the tests and post screens hots of them. Hope that is fine with you.
http://blog.anthonybaker.me/2012/01/adaptive-layout-on-windows-phone.html

--
Anthony Baker
Solutions Architect
blog.anthonybaker.me

@Antony. That's really great - fantastic to know this stuff works well on WinPho7 too. Thanks for that - much appreciated!

How do you find your WinPho7 phone? Do you use it as your "everyday" phone, and do you like it? I find myself drawn to the interface, as Apple become ever more fascinated with modelling real-world objects, which personally I dislike.

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates

@Simon. Thanks for keeping track of the comments. I'm glad to share stuff since this article has helped me so much.

I really like my windows phone. I used as my everyday phone. I had a WinPho 6.5 before and it was a total junk and a nightmare for app development, but definitely, WinPho7 changed that radically. My wife has an iPhone as many of my colleagues, and several more have Android phones. I honestly find that WinPho7 is way better. The interface is totally refreshing, clear and uncluttered. Easy to personalize and change. The development environment is the best out there. Trust me, I have done work with Apple and Android tools and they are quite bad compared to WinPho dev tools. They are heavy...I grant you that, but way better. The Emulator is great, Visual Studio is probably the best IDE out there and Expression Blend is the best UI development tool. I know I'm a bit subjective because I'm primarily a .NET developer, but that's what I believe and I have tried to test all the other open source, apple and android tools out there. You could differ because of principles or philosophy which is totally fine, but in terms of experience as a user and as a developer, there's no match.
Regarding apps, well WinPho is still quite new. There are already 50,000 apps out there and it is also true that in general thery are a bit more pricey than their counterparts in Android and iPhone, but is minimal. Just my 2 cents. Cheers!

--
Anthony Baker
Solutions Architect
blog.anthonybaker.me

It's interesting you say this as a dev. WinPho7 seems to need some very cool apps that aren't on other platforms, and if the devs are happy, that's a start!

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates

Fantasic article! :0). very clear and well explained.

@angiemck: Thanks

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

I'm a fairly new web designer, just getting in to responsive and adaptive designing and this article was amazing. I NEVER comment on articles that I read on the web, but this one - I just couldn't resist. I feel more confident about designing a site already! Thank you, Thank you, Thank you!!!

--
Catie

@catiepershing: Thanks for your kind words - I'm glad you liked the article

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

that's really amazing. the CSS code you have shared is really awesome and i just love that. thanks for sharing all those here. looking forward to have more.


<a href="http://www.danawebdesign.com/">long beach web design</a>

[Edited by lngbeachwebdsgn on 18-Mar-13 02:14]

--
a hrefhttp://www.danawebdesign.com/long beach web design/a