Hi, I'm new here!

 

I've been reading up a lot about responsive web, how great it is, how it obviously makes sense etc, but I'm now at the stage that I'm ready to build, and can't seem to find any good instructions on how to do so.

 

I learn best by doing, and have been searching tirelessly for a proper walkthrough that will show me step by step how to put something together. It doesn't even have to be based on my own code, I'd be happy with something where I can download a .zip file of a previous website and then work through making it responsive, I found a great little tutorial that did just this except it wasn't for fluid grids, it was more based on loading 3 different CSS stylesheets for 3 different widths, which isn't something I'd like to do.

 

Essentially I require step-by-step help on building/converting a site to a responsive fluid grid layout, but all I've found is articles detailing things that it's possible to do, or why it's great. I downloaded a few of the frameworks that are recommended, but then just ended up staring blankly going 'what now?' as there is very little explanation.

 

The site I have is linear already, with a large graphic for the header, navigation (with JS reveal for subnav), feature section and content section all in one column at 960px fixed width. The only part of the design that isn't one column is the footer, which has a left and a right.

 

Ideally for the responsive design I'd like the whole thing to obviously reduce down in size, images resizing too. I'd like the two footer sections to stack on top of each other, and I'd like the menu to be fully open the whole time, rather than revealed. I also plan to remove some of the heavier graphic elements (like the background image to a colour instead, and remove some of the @font-face I've used to make loading times better). I understand I can do most of this with a separate stylesheet?

 

Essentially, can anyone point me in the right direction of a full walkthrough on how a responsive site is built. Example code, snippets etc, rather than something that merely explains some of the functionality? I have always struggled to learn this way and I really need to just sit down and DO something following a tutorial rather than reading about it and then trying to figure it out, which always ends in frustration when I don't really know what I'm doing in the first place...

You might like to have a go with Twitter's Bootstrap.

What really nailed it for me was Ethan Marcotte's book 'Responsive Web Design'.

 

http://www.abookapart.com/products/responsive-web-design/

What really nailed it for me was Ethan Marcotte's book 'Responsive Web Design'.

 

http://www.abookapart.com/products/responsive-web-design/

 

QFTW. (I can't find my copy anywhere and it's starting to annoy me - I may have to buy another).

It's one of the only books i bought as a download.

I generally like to have my books in paper form but i wanted it that day

I guess that seems like the best place to start, and I have a little book token voucher for Amazon, looks like it's time to add to my ever growing webdev bookshelf!

It's one of the only books i bought as a download.

I generally like to have my books in paper form but i wanted it that day

 

I much prefer paperback too, but it seems the book is only available in French... oh dear! E-book it is!

The one sold on a book apart (mikes link) appears to be English.

Edited July 24, 201214 yr by WBC

The one sold on a book apart (mikes link) appears to be English.

 

Yes, I have given in and ordered it, even with the delivery and wait time from America

 

In the meantime, I'm still looking for something I can use now, as I doubt the book will be here for a few weeks. Still searching and struggling to find any information on how to actively use a fluid grid.

Skeleton works for me.. unless you absolutely have to have a full width structure

Edited July 24, 201214 yr by oakleaves

I've recently just started building my first responsive site after doing quite a lot of reading (mostly about responsive images which are proving to be problematic). After all that I decided to go with the Goldilocks approach. It separates layout into 3 sections which they call baby bear, mummy bear and daddy bear, going from smallest to biggest incase you didn't guess. The idea is you get 3 layouts which are completely independent of the device they are being used on, the layouts will just adapt their margin sizes so rather than develop say for an iPhone and a specific Android phone, baby bear would cover both of those but the margin sizes would vary slightly because of the different device widths. The site explains this far better than I'm managing to.

 

So to actually using it; it basically gives you 2 stylesheets, one is the main stylesheet the other is for layout. In the main stylesheet you have all your CSS and the layout rules for baby bear, then you have a media query in your HTML files which asks if the device is over a certain width, if so, load layout.css. In layout.css you have mummy and daddy bear which you can adapt accordingly. What I did was play around with the media queries until I worked out exactly what was changing what (a lot of browser resizing) and from there you can start doing it with meaning.

 

Hope this helps, the Goldilocks Approach is worth looking at for anyone really, I much prefer it over developing for specific widths.

Skeleton works for me.. unless you absolutely have to have a full width structure

 

Also started off by using Skeleton. Theres a good video on webdesigntuts thats runs through creating a responsive site using it - http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-starting-out/

I've recently just started building my first responsive site after doing quite a lot of reading (mostly about responsive images which are proving to be problematic). After all that I decided to go with the Goldilocks approach. It separates layout into 3 sections which they call baby bear, mummy bear and daddy bear, going from smallest to biggest incase you didn't guess. The idea is you get 3 layouts which are completely independent of the device they are being used on, the layouts will just adapt their margin sizes so rather than develop say for an iPhone and a specific Android phone, baby bear would cover both of those but the margin sizes would vary slightly because of the different device widths. The site explains this far better than I'm managing to.

 

So to actually using it; it basically gives you 2 stylesheets, one is the main stylesheet the other is for layout. In the main stylesheet you have all your CSS and the layout rules for baby bear, then you have a media query in your HTML files which asks if the device is over a certain width, if so, load layout.css. In layout.css you have mummy and daddy bear which you can adapt accordingly. What I did was play around with the media queries until I worked out exactly what was changing what (a lot of browser resizing) and from there you can start doing it with meaning.

 

Hope this helps, the Goldilocks Approach is worth looking at for anyone really, I much prefer it over developing for specific widths.

 

Thanks. So I guess this doesn't use fluid grids at all then. My question is how do you make certain divs stack on top of each other? I thought fluid grid layouts where the best way to go so it's adaptive on any width, not just 3 preset ones, which was what the tutorial I used before was telling me to do (normal.css, small.css, smallest.css )

For a proper responsive site you have certain breakpoints but allow the site fluidly move between these points.

 

So you'd use @media-query to identify these break points and a nice smattering of % widths to accomodate for the change in sizes within break points.

 

For instance, you may set a max width on a DIV as 960px but allow the DIV to move within this by setting it to have a 90% width. Then when the screen gets resized to a certain breakpoint, you'd set a new max width.

For a proper responsive site you have certain breakpoints but allow the site fluidly move between these points.

 

So you'd use @media-query to identify these break points and a nice smattering of % widths to accomodate for the change in sizes within break points.

 

For instance, you may set a max width on a DIV as 960px but allow the DIV to move within this by setting it to have a 90% width. Then when the screen gets resized to a certain breakpoint, you'd set a new max width.

 

So I guess using a mixture of a fluid grid and media queries for different sizes?

 

I'm still completley baffled about how to actually build this though. I currently have divs at 960px, so if I put a media query in that brings up a new layout stylesheet at iPad width (lets say) and adjusts the div from 960 accordingly.... this isn't using a fluid grid?

 

I keep seeing this talking of using fluid grids, things adding up to twelve, downloading frameworks, but no one is explaining how to put this into practice (although I am just about to check out the video tutorial some have suggested so maybe that will have the answer.)

 

I just want to be able to download one of these excellent framework/fluid grid systems with all these gutters and stuff and get to work, but none of them really explain how to use them.

 

I've only every designed fixed width so I really am clueless Sorry if this sounds like going round in circles. I understand the concept, I just don't know how to properly put it into practice.

 

For reference the site I am trying to convett (please don't judge! It's pretty awful, hasn't been browser tested properly, is only half working because I decided to try and get it responsive when I had finished the basic layout!) Mech site

Edited July 24, 201214 yr by Fran Haselden

Thing is responsive design is still quite new so though the idea is established the methods are still a bit hazy which is why there isn't any definitive answer. Goldilocks is fluid, it's similar to what you're talking about and what Mike posted. It takes 3 layouts so you will probably make fairly significant changes to your layout 3 times, i.e. menu items stacked differently or whatever. Along with this by setting a media query range, e.g. min-width:20em, max-width:30em, with % widths and em margins (em and %=responsive) you get 3 layouts that can adapt to several device widths.

 

I'm probably not explaining the concept very well so to try help you actually get started; download Goldilocks (or whatever framework you're going for though obviously I can't say whether this will work for you as well), create some simple HTML (I literally just did a h1 with my name in it), you'll see there is two stylesheets being called and one has a media query attached which says unless the width is a certain size ignore this stylesheet, this is where the medium and large layout css rules are stored but if we're not over a certain width we don't need them. So find the media query in the main stylesheet and set your h1 to have a big ugly red background with lots of padding so you can see it, now go to the layout stylesheet and give your medium h1 a blue background and your large h1 a yellow background. When you resize now you'll see the media queries working and this helped me grasp exactly how it was all functioning. From there I just started to build my site mobile up, so I'm currently just finishing the layout for the small width and then I'll probably be able to ignore the main stylesheet whilst I adapt the rules, such as where the menu sits, in the layout stylesheet.

Edited July 24, 201214 yr by jtuds

A quick example i just knocked up that might help you in your quest...

 

http://jsfiddle.net/MikeChipshop/SF87U/

 

Resize the result window to see it in action.

When the the visible window drops below 500px the divs inside the wrapper should fall in beside each other (using float:left) and each stage along the way should adjust fluidly.

Edited July 24, 201214 yr by MikeChipshop

I wouldn't use 960 grids any more. Don't forget that devices aren't just getting smaller, but also bigger too. I'm quite worried about this whole 960px issue, I think people are forgetting all too easily that screens 1800px wide and more are becoming very common now, and when you think about it, that's nearly 50% real estate screen space you're ignoring.

 

I personally now use a 1180px grid as I feel it utilizes screen width better.

 

Having said that, much like making a website mobile friendly isn't purely about shrinking down, now is it the case for making the site wider. Structure has to change again there too, so maybe this is why people are shirking from doing it.

I wouldn't use 960 grids any more. Don't forget that devices aren't just getting smaller, but also bigger too. I'm quite worried about this whole 960px issue, I think people are forgetting all too easily that screens 1800px wide and more are becoming very common now, and when you think about it, that's nearly 50% real estate screen space you're ignoring.

 

I personally now use a 1180px grid as I feel it utilizes screen width better.

 

Having said that, much like making a website mobile friendly isn't purely about shrinking down, now is it the case for making the site wider. Structure has to change again there too, so maybe this is why people are shirking from doing it.

 

 

As much as I hate to agree with Brightonmike, that is probably right.

 

The skeleton uses a 960 grid as well as fixed width elements. It was good for learning about responsive as it really keeps things simple but it is also limiting. It is good for people who are finding the transition to responsive design difficult.

 

The other way I think skeleton might be good is if you have to make your ecommerce store responsive. Most of them are fixed width and the one I use is 960px so it might be a simple way to make it responsive.

 

My personal current fave is Foundation by Zurb, though each job would have to be appraised as to requirements. I've been experimenting here with it.

As much as I hate to agree with Brightonmike, that is probably right.

 

 

Let's also not forget that more people are browsing the internet on their TV's.

 

MS is currently testing Internet Explorer for XBOX and i can tell you it's an odd thing browsing the web on the TV so it's going to need a whole other way of thinking.

What really nailed it for me was Ethan Marcotte's book 'Responsive Web Design'.

 

http://www.abookapart.com/products/responsive-web-design/

 

Ha I checked this out on Amazon and saw it hadn't got very good reviews. Reading them made me chuckle - my favorite was 'Whilst I am comfortable learning CSS and PHP I found the additional pressure of having to learn French a bridge too far.'

 

Think I'll opt for a e-book copy!

Edited July 30, 201214 yr by jheg

Yeah, seems to be an awful lot of French version out there

Let's also not forget that more people are browsing the internet on their TV's.

 

MS is currently testing Internet Explorer for XBOX and i can tell you it's an odd thing browsing the web on the TV so it's going to need a whole other way of thinking.

Display-wise, is it not just the same as a small computer monitor at 1920x1080 (ie. 1080p)? However, I'd imagine navigating using two joysticks opens a whole new can of usability problems!

Edited July 30, 201214 yr by andyl

Also you tend to sit quite a bit further away from your TV than you do your PC monitor.

This is true, but isn't that how 1080p works anyway? Larger pixels etc.?

 

To try to explain my understanding a little better: 1920x1080 is a low resolution, especially for a 30"+ TV. Most TVs nowadays are 32"+ I'd imagine. However, a 1080p TV playing 1080p content really does look fantastic when sitting the correct distance away. Won't this 'just work' for websites? Or is text still too small despite the enlarged pixels?

Edited July 30, 201214 yr by andyl

So far i've found navigating and absorbing content quite hard although i have a rubbish TV and rubbish eyesight, so not a good mix

 

I would imagine the mobile style of web design would work better on TV's. Bigger chunkier buttons, more white space etc.

 

If you get a look at Windows 8's Metro apps, they do seem perfectly designed for big screen viewing. I guess we're all just going to have another device to adapt to!!

 

 

 

@media tv

That's the way i'm assuming we'll have to go but i guess it depends on what the device identifies itself as.

I'm assuming the XBOX would be TV. Does anyone know what the PS3 does?

There's also Windows-based media centre PCs that don't identify as TV in their browsers, because as far as they're concerned they're a normal PC.

That's the way i'm assuming we'll have to go but i guess it depends on what the device identifies itself as.

I'm assuming the XBOX would be TV. Does anyone know what the PS3 does?

And the Wii has had a web browser since 2007.

And the Wii has had a web browser since 2007.

 

Haha yeah... and wasn't it bad! Almost as bad as iPlayer was on the Wii!

Still at the time it was the only thing i had to use so didn't complain.

 

IE 10 on the XBOX isn't to bad to be honest.

Although i can't see myself doing a whole lot of browsing on it.

 

Just another element to add to the responsive discussion

@media tv

 

Was going to say... I wonder if this exists?

 

Would be fun to put something together designed in such a way. I do wonder if the TV browsing will settle in the future for purely tech and entertainment based sites. I can understand wanting to access Netflix or XBOX or even Facebook via the TV browser, but I'm not exactly going to start checking my emails or looking for a new pair of shoes to buy via my TV. Maybe that's just me though!