Who's building Responsive/Adaptive sites?

[wheezy]

I've spent the last few months reading and practicing @beep's awesome Responsive Web Design practices and think I'm finally getting a solid understanding of it. Here are some sites I've made recently that utilize it (Adjust your browser window width to see exactly what's going on):

http://joeljenkins.me
http://jthomasphotography.net
http://jfichemical.com

Yes, 2 of the 3 are mine, I had to experiment on myself first!

Quick explanation - Instead of building a desktop web site, a mobile website, a tablet website etc and try to keep up with all the various screen resolutions, we should be building fluid designs that aren't set to a specific pixel width (i.e., 960px). We need to build our site foundations to respond to various widths, whether narrow or wide or ultra wide.

Anyone else on here utilizing RWD in their builds now? I think that if you want to be considered a serious candidate for work in the near future, having knowledge of RWD will be quite important. Which means we've now added yet another !important skill to your tool belt for front-end designers.

I'd love to see your stuff and maybe we can help each other out on questions/implementation methods we're learning.

 

[anubis]

Wow. That IS impressive!

 

[Dolorian]

I have been doing it for a few months now in the agency I work in and it is really great stuff.

Instead of using fixed units like pixels for the dimensions of containers and images, you have to start using relative units like percentages. Likewise for type, instead of using points you star using ems. That way your content and container's dimensions is relative to it's parent container (all the way up to the browser window). So when you resize the window, the idea is that your site adapts to better present the content of your site in the current window's dimensions.

A great degree of control over the css at different window width's is achieved with css media queries. Really flexible as you can create css rules for each window width you need and have control over how the content of your site adapts.

You can have, for instance, a special media query for the device width of the iPhone and create rules to adapt the same site to offer a better viewing experience in it.

Here is a link (the agency I work for site) so you can see responsive web design working:

http://phixarmedia.com/index.php/portafolio

Drag the edge of the browser window on that page to the left and you'll see the content changing and adapting as the window gets narrower.

Hope this helps!

 

[wheezy]

I have been doing it for a few months now in the agency I work in and it is really great stuff.

Instead of using fixed units like pixels for the dimensions of containers and images, you have to start using relative units like percentages. Likewise for type, instead of using points you star using ems. That way your content and container's dimensions is relative to it's parent container (all the way up to the browser window). So when you resize the window, the idea is that your site adapts to better present the content of your site in the current window's dimensions.

A great degree of control over the css at different window width's is achieved with css media queries. Really flexible as you can create css rules for each window width you need and have control over how the content of your site adapts.

You can have, for instance, a special media query for the device width of the iPhone and create rules to adapt the same site to offer a better viewing experience in it.

Here is a link (the agency I work for site) so you can see responsive web design working:

http://phixarmedia.com/index.php/portafolio

Drag the edge of the browser window on that page to the left and you'll see the content changing and adapting as the window gets narrower.

Hope this helps!

Great site and explanation! Way to be on top of it, it really is the next generation of website building if you expect to stay on top of the industry.

 

[lucidmedia]

I think that if you want to be considered a serious candidate for work in the near future, having knowledge of RWD will be quite important.

I agree. My company is planning a large web redesign and we made it pretty clear to the firms bidding on the job that any sites made from here on out would be "responsive" (a term i hate by the way).

One of the largest of these responsive sites is the recently launched http://www.bostonglobe.com/ designed by Upstatement and developed by the Filament Group. It got a decent amount of press when it launched.

All of the designers learning web design in the program I teach in are being taught to think about design and code layout in this way. Last semester we had Ethan Marcotte come and and talk with the students (while he was consulting on the Globe) and this semester we re-developed the curriculum to focus on these ideas.

 

[wheezy]

I agree. My company is planning a large web redesign and we made it pretty clear to the firms bidding on the job that any sites made from here on out would be "responsive" (a term i hate by the way).

One of the largest of these responsive sites is the recently launched http://www.bostonglobe.com/ designed by Upstatement and developed by the Filament Group. It got a decent amount of press when it launched.

All of the designers learning web design in the program I teach in are being taught to think about design and code layout in this way. Last semester we had Ethan Marcotte come and and talk with the students (while he was consulting on the Globe) and this semester we re-developed the curriculum to focus on these ideas.

Ethan spoke at your school? That's awesome. It's nice to know that some education places are on the ball. It took me a few go's at it to get it figured out decently enough (old habits are hard to break *cough* fixed layout *cough*) but I feel so much better about the products I deliver to my clients now.

Responsive, Adaptive, whatever you wanna call it, some form of implementation is needed in today's ever changing viewport area. I think it's a brilliant approach.