Responsive Web Design Techniques

We can all probably agree that responsive web design is the future of the Internet, kind of amazing how it works across so many platforms. What amazes me about this is that it’s really taking off as more and more people are using things like ‘i’ products to browse the web.

I recently found this, http://jasonsantamaria.com/articles/golden-grid-system, which does the responsive web design for you. I’ve not really taken a deeper look at this nor would I know how to begin with something like this. I really wanted to here from people here you have had experience with responsive web design.

Nice link Sega. I’ve never used that myself, though I have been reading some articles on some subjects lately. One of which is this topic. Sitepoint had an article on this.

Some of the key concepts in responsive design have been in play for a while now. Media queries are done a lot nowadays. Not specifically for tablet or mobile (though it does happen) but with the overwhelming nubmer of these sure to start happening, we’ll have to incorporate it more.

Relative sizing, also been around for a while. It’s pretty rare to see a design which incorporates all the elements of a responsive design, though I do agree it probably will be the future of the internet

I’m still finding my way around responsive design, but here are the ones that appealed to me when I first started to look into responsive design, going from those that sparked an interest

Less Framework: http://lessframework.com/

inuitcss: http://csswizardry.com/inuitcss/

1140 css grid (a reverse of 320 and up): http://cssgrid.net/

Skeleton: http://getskeleton.com/

to those that really impressed me:

The Goldilocks Approach: http://goldilocksapproach.com/

Fluid Baseline Grid: http://fluidbaselinegrid.com/

320 and up: http://stuffandnonsense.co.uk/projects/320andup/

which uses

Mobile ★ Boilerplate: http://html5boilerplate.com/mobile

I ended up not using one or the other, but learning from them, from the last four ones in particular, and applying what I’ve learned from them on my own system.

Sega, I can wholeheartedly recommend Responsive Web Design by Ethan Marcotte. There are some things I dislike in the book, e.g. assuming people have 16px font size by default which results in the hated (at least around these parts) 62.5% on body rule. Regardless of that, however, it’s a fantastic book.

The problem with any grid system is that they have to cover all bases and you end up with far too much code and a structure that doesn’t suit the task in hand in a lot of cases. They also entice beginners into using them when in fact beginners should be learning basic layout constructs first.

While most grid are very clever and have some good concepts the time taken to learn, strip out, debug, maintain and deploy is actually longer than it would take to start from scratch and do it yourself. Unless you just whack out the whole grid and use it without modification which most of the good grid systems suggest you don’t do anyway - i.e. just take the bits you need. Unfortunately, a lot of inexperienced coders use grids as a crutch and don’t understand how or why they work so often get lost in design and end up with spaghetti instead of clean code.

However, having said all that is is still useful to look under the hood of the grid systems and to see the techniques and methods they use as some are documented well and you can learn a lot from just reading through the code. There are often common fixes to common bugs documented so you can learn a lot. You will also see at what screen sizes you should be catering or applying your media queries to and also what specific meta tags you need. After, you’ve done that then you don’t really need the grid system any more because you should be able to code it for yourself and set up your own base grid system.

With responsive web design there is so much more than just changing the screen size and indeed some iphone users are now complaining that they get 3 or four lines of large text rather than a whole site that they can zoom around and scale as they wish. They don’t like to be fed a 320px wide site just because they are viewing on a phone and want the actual site displayed and then just zoom around with their own controls. You can never please everyone even with best endeavours.

Actually (although I am in the minority) I’m still not keen the page jump that media queries give you as you change the screen size. Usually when I’m reading a passage I will resize the screen to see the paragraph/section that I am interested in but then the media query clicks in and I have to search around the page for the same passage. I would prefer a scrollbar to appear and the screen not to change. Responsive design seems to assume that people only have one size of monitor whereas its the browser window that matters as I am constantly moving resizing and juggling my browser window thousands of times a day -because that’s just the way I work. (I just did it now so that the text I’m typing is at eye lever and not at the bottom of the monitor.)

A common approach these days is to start with a simple basic page that expands and contracts to any device width and then progressively enhance it with media queries for more capable devices rather then reverse engineer it for smaller devices. The problem is that as soon as we come up with a sure-fire way to cater for all devices the devices change and the goal posts are moved. A developers lot is not an easy one :slight_smile:

@Paul_O_B;
I can completely agree that people might re-size their browser window, most people tend to view a page on full width to fit their monitor size. We can’t please everybody user experience in responsive web design. I would think this would just be a case of getting used to it. There are times when people attack new trends and changes, but when a change is going to happen with or without our approval, it’s always best to be on board (IMHO) so that we can get the reward to the latest trends and ideas. I feel responsive web design works! Maybe this topic is still a little early but it is the future.

I think you’re spot on with knowing what’s going on under the hood. Trouble is I don’t know! I’ve never really used frameworks before, I tend to previously think of frameworks like 960 grid systems as something similar to a microwave for people who don’t know, or can’t be fussed cooking. So maybe there is some truth to that. If I knew how to do responsive web layouts effectively on my own, I would not use a grid system.

@kohoutek;
Cool, thanks for the link to the book, I will give that a read. It’s times like these I wished I had an iPod for my eBooks :stuck_out_tongue:

@itmitică;
Super, thanks for all those links. Now you’ve just confused me on what I should use!

@RyanReese;
Much appreciated. I think responsive web design is the future.

Grid systems, universally, being CSS frameworks, are idiotic rubbish that much like HTML 5 I can’t fathom how anyone is DUMB ENOUGH to see advantages in using. Herpafreakingderp.

As to “responsive design” this is nothing new to people who’ve been designing fluid all along… It’s an evolutionary not revolutionary concept, finally giving us the tools that prior to this we’d rely on scripting to accomplish (see ‘mcSwitchy’). Now like any old concept it has a new name.

If you are used to designing fluid, used semantic markup with separation of presentation from content, and understand specificity; it’s just the next logical progression… and if you have a fluid layout built using simple containers, it’s also piss simple to do.

Take a fairly simple markup:

<div id="pageWrapper">
	
	<h1>Site Title/Logo</h1>
	
	<ul id="mainMenu">
		<li>blah</li><li>Blah</li><li>blah</li>
	</ul>
	
	<hr />
	
	<div id="columnWrapper">
		
		<div id="contentWrapper"><div id="content">
			<h2>Sample</h2>
			<p>Sample Content here</p>
		<!-- #content, #contentWrapper --></div>
		
		<div id="sideBarWrapper">
		
			<div id="firstSideBar">
				<p>Blah Blah Blah</p>
			<!-- #firstSideBar --></div>
			
			<div id="secondSideBar">
				<p>Blah Blah Blah</p>
			<!-- #secondSideBar --></div>
			
		<!-- #sideBarWrapper --></div>
		
	</div>
	
	<hr />
	
	<div id="footer">
		Footer Content
	</div>
	
<!-- #pageWrapper --></div>

feed it this for media=“screen,projection,tv”


#pageWrapper {
	min-width:752px;
	max-width:68em;
	width:95%;
	font:normal 85%/150% arial,helvetica,sans-serif;
}

* html #pageWrapper {
	width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
}

h2 {
	padding:0 0.8em 0.8em;
	font:normal 125%/120% arial,helvetica,sans-serif;
}

p {
	padding:0 1em 1em;
}

#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
}

#contentWrapper {
	float:left;
	width:100%;
}

#content {
	padding-top:1em;
	margin-right:17em;
}

#sideBarWrapper {
	float:left;
	width:16em;
	margin-left:-17em;
}

and you already have “responsive” – aka semi-fluid – two column layout… it already adjusts to a range of screen sizes and auto-scales up to font size. Media queries just provide simple extra steps… for example adding or removing columns:

media=“screen and (min-width:1238px)”


#pageWrapper {
	max-width:74em;
}

#content {
	margin:0 17em;
}

#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

#firstSideBar,
#secondSideBar {
	position:relative;
	float:left;
	width:16em;
	margin-left:-17em;
}

#secondSideBar {
	margin:0 -17em 0 0;
	left:-100%;
}

hey look, three column layout. Split the one outer #sideBarWrapper into it’s two sub-child columns.

media=“screen and (max-width:751px)”


#pageWrapper {
	min-width:192px;
	width:100%;
}

#content {
	margin:0;
}

#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

Single column layout for narrow displays… Toss in the various trips to make the iphone actually obey what you’re telling it to do, and DONE.

Not exactly rocket science – unless of course you are only thinking in fixed widths or that grid asshattery, in which case the very notion of ‘responsive’ is alien… those of us who’ve been doing fluid and semi fluid this isn’t anything ‘new’ – we’ve been doing it all along!

It just took a fancy new name to get the fixed-widthtards (and their close cousins the elastiderps) with their crappy little stripes to pay attention.

I wouldn’t be so quick to dismiss all the work done in those “CSS Frameworks”. I’m sure there’s at least a little something to use and learn from any “CSS framework”.

<hr>

There are “CSS frameworks” that work by grids. And there are those that don’t use grids.

Take The Goldilocks Approach, for example. Reading just a bit from this demo page it has: http://www.designbyfront.com/demo/goldilocks-approach/?utm_source=goldilocks&utm_medium=goldilockspage&utm_campaign=goldilocks

What if we could create a truly universal design that was device independent – one that, no matter what device you viewed it on, looked like it was designed just for that device?
[…]
It’s tempting to first set the body font size. But the manufacturer or the user has already set the browser’s default size for readability, and we don’t think you should mess with it without good reason. (itmitică’s note: There is truth to both sides. :wink: )

However, if you base your entire design on this base font size (using ems), then as it increases or decreases, so will your design. Using ems allows your designs to be resolution independent.
[…]
…taking the device resolution out of the equation, you get layouts that should work across all devices and contexts, even ones that haven’t been invented yet. If, for whatever reason, a user has their base font size set to 80px, then this approach should still produce an appropriate layout for the space available. Talk about device independence.
[…]

Compelling enough? :slight_smile:

<hr>

Take the The Fluid Baseline Grid System for another example.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
[…]
FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns.

It looks very appropriate to me and it’s not something I’d so quickly dismiss.

<hr>

Finally, these “CSS frameworks”, grids or no grids, are the results of work done by trail and error. This means that they actually took the time to test, debug and fix for a multitude of devices and scenarios.

Take 320 and up and/or Mobile ★ Boilerplate. In their documentation there is insight hard to accomplish for a single developer by it self. And for that there is proof on SPF.

<hr>

Good or bad, you can learn from a rock, let alone from others hard work. That if you’re not the rock it self. You can even learn how not to be a rock your self. :slight_smile:

“CSS Frameworks”, “good” or “bad”, are hard work. A developer dismissing that, makes for an isolated developer that didn’t had the need yet for something like that. Eventually, all good developers turn to “CSS Frameworks”, to learn something new like iPhone fixes or bugs, if not for anything else.

Given that their page is uselessly broken here, with content blowing out of it’s containers on width – all because it’s JUST ANOTHER crappy fixed width that doesn’t scale to anything? Someone needs to explain to them what ‘responsive’ means. Let’s go down the list on the example… I’m probably going to use the word idiotic far, far too much.

That their example starts out with Paul Irish’s idiotic IE version sniffing garbage, jumps on the HTML 5 idiot bandwagon with the stupid malfing shiv (that typically does more to break pages than help), has H2 preceeding the h1 (on something that should only be one h1 without an IMG tag), puts an image in an aside (that’s REALLY gibberish), has nothing even remotely resembling a proper heading order to the point they look just thrown in there any old way – and that’s by EITHER 4 or 5 structural rules, the stunning examples of “if you have to use title on an anchor, there’s something wrong with it’s content”, use of commenting in a manner that could trip IE or FF rendering bugs… and then there’s the unforgivably bad media=“all”

  1. at which point why have a media attribute
  2. I’m so sure that for screen layout will be SO desirable when printed.

It’s disastrously bad and I’ve not even opened up the CSS yet.

Hey look, an idiotically massive reset… setting overflow-y on html just to annoy people with large displays, background-color on HTML instead of body? Lack of condensed properties, fractional line-height guaranteed to introduce rounding errors cross browser… and that’s just their ‘global.css’ crap.

Wow, the examples layout.css … nothing like declaring two CUSTOM fonts on the same stack – that’s more idiotic than the people who declare font-family:arial,“segou ui”,sans-serif; (if you don’t know what’s wrong there, back away from the keyboard).

Oh yeah, I’m SO impressed, and that’s SO what people should be using to design sites – NOT. I truly pity the nubes who don’t know enough not to be led down the garden path by bloated half-assed crap like that!

Compelling? I think not. They talk a good talk, but their results are just bloated uselessly complex garbage… to the point I don’t think it’s creators actually have a clue what they are talking about.

You don’t even want me to go into the others you mentioned. Sad part is I agree with many of the methodologies they advocate in their text – I just wish they’d practice them!

Where did you spot this fixed width?

I’ve looked again, and the only problem I see is the contact form at the bottom. Removing


footer #subscribe-form {
    text-align: right;
}

solves it.

I wouldn’t be so harsh on The Goldilocks Approach. From my tests, it scaled well. If there are a few bugs to be found, I’m sure it’ll all be solvable.

Their trying to build something. And their approach, design and otherwise, is certainly a brilliant one:

Responsive design requires a new way of thinking, and there’s still plenty of discussion and exploration to be had before we can settle on what is ‘best practice’. We’ve found this approach to work well for us, but how do you think it would work for you?

PS I’m not worried at all, you going into the others I mention. It seems you have your mind set to a certain pattern, and you find reasons to put anything else down. I don’t mind. If it works for you… But not so far as a couple of days back you were one of those not practicing what you’ve been advocating. :slight_smile:

As a prophylactic measure; Let’s please leave out any personal attacks. This thread—like many others—is a good one, so let’s keep it that way.

Dankeschön!

I assumed (incorrectly) it was fixed width since it was giving me horizontal scrollbars on both the desktop and laptop regardless of how wide I made it - should have looked deeper, it’s that they used EM without understanding them. My bad.

<mordin>I MADE A MISTAKE</mordin> :smiley:

That quote from them:

Responsive design requires a new way of thinking

Says a lot of what’s WRONG with ‘responsive design’ IMHO, in that it’s NOT something new or a new way of thinking – unless all you’ve done the past decade is crap out fixed width websites that have been useless from an accessibility standpoint all along – no matter what the PSD jockeys think or how “pretty” it is. It’s just the natural next step from fluid and semi-fluid, and the exact same thing as McSwitchy!

But because we can slap a fancy new name on it and have CSS to do what we used to do with JS, it’s some miraculous innovation. NOT.

You tear things apart so you can build up again stronger, or kill it before it kills you. Anything else is status quo namby-pamby feel good nonsense… type of thing I’d expect out of an “encounter group”. Show me something GOOD and I’ll actually praise it.

… and when a LOT of said methodologies almost by definition load horribly and disastrously broken for me; what am I supposed to say about it? When you peek under the hood and it looks like something tossed together by someone who just took a 1 week wonder-course out of the back of a moving van, what am I supposed to say about it?

Slap the rose coloured glasses on everyone’s heads, pat them on the back and say well done? I think not.

<yakko>If you can’t say anything nice, you must be at the Ice Capades.</yakko>

If by that you mean something written before we even HAD media queries as anything approaching deployable much less well documented, then sure… That could be said about 99% of the web.

That it still worked BECAUSE it used EM’s, well… Might not have been perfect, but better than most. Better than most that USE media queries to be brutally frank.

Off Topic:

Did you notice that the keyboard in the video at 3:38 is wacky reverse? All the keyboards, actually.

I tried copying and pasting your example and could not decide exactly the position of the missing closing </div>.

Please supply a working validated copy because I would like a simple template for practicing “responsive design”.

So let me assume this right, because I am not enterily sure. I was creating responsive web design years ago when I widths things in percentages?

e.g.
#containers 80%
#containers .panel 20%

I think the examples I’ve seen on frameworks are more responsive that just sizing. I’ve noticed that @kohoutek; website is responsive, but works a little different to the frameworks. If it’s just a case of using percentages and min-width max-width etc. Then I can start creating responsive web designs now. However, the examples on responsive frameworks and templates sold are more polished and work a little better. Not sure why this is.

I assume something like this is what’s meant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>
<title></title>

<style type="text/css">
#pageWrapper {
	min-width:752px;
	max-width:68em;
	width:95%;
	font:normal 85%/150% arial,helvetica,sans-serif;
}

* html #pageWrapper {
	width:752px; /* give legacy IE the crappy fixed width, OH WELL! */
}

h2 {
	padding:0 0.8em 0.8em;
	font:normal 125%/120% arial,helvetica,sans-serif;
}

p {
	padding:0 1em 1em;
}

#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
}

#contentWrapper {
	float:left;
	width:100%;
}

#content {
	padding-top:1em;
	margin-right:17em;
}

#sideBarWrapper {
	float:left;
	width:16em;
	margin-left:-17em;
}


@media screen and (min-width:1238px) {
	#pageWrapper {
	max-width:74em;
}

#content {
	margin:0 17em;
}

#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

#firstSideBar,
#secondSideBar {
	position:relative;
	float:left;
	width:16em;
	margin-left:-17em;
}

#secondSideBar {
	margin:0 -17em 0 0;
	left:-100%;
}
}



@media screen and (max-width:751px) {
	#pageWrapper {
	min-width:192px;
	width:100%;
}

#content {
	margin:0;
}

#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}
}

</style>

</head>
<body>
<div id="pageWrapper">
	
	<h1>Site Title/Logo</h1>
	
	<ul id="mainMenu">
		<li>blah</li><li>Blah</li><li>blah</li>
	</ul>
	
	<hr />
	
	<div id="columnWrapper">
		
		<div id="contentWrapper">
<div id="content">
			<h2>Sample</h2>
			<p>Sample Content here</p>
		<!-- #content, #contentWrapper --></div></div>
		
		<div id="sideBarWrapper">
		
			<div id="firstSideBar">
				<p>Blah Blah Blah</p>
			<!-- #firstSideBar --></div>
			
			<div id="secondSideBar">
				<p>Blah Blah Blah</p>
			<!-- #secondSideBar --></div>
			
		<!-- #sideBarWrapper --></div>
		
	</div>
	
	<hr />
	
	<div id="footer">
		Footer Content
	</div>
	
<!-- #pageWrapper --></div>

</body>
</html>


Oops.
<!-- Content, #contentWrapper –></div></div>

What I get for just belting it out raw on the laptop. Wasn’t actually meant to be used as working code so much as an example of the theory…

gimme a couple moments and I’ll toss together a working example of that which is a bit more fleshed out.

Here you go.

http://www.cutcodedown.com/codeExamples/fluidDemo/template.html

Gave it a bit of content and some simple style. Shows pretty clearly what I’m talking about – it’s simple. VERY simple to make what we used to call a mcswitchy layout using media queries. One, Two and three column switching of fluid layouts, with a practical max-width.

As with all my examples the directory:
http://www.cutcodedown.com/codeExamples/fluidDemo/

is wide open.

Gives IE6- a crappy fixed width … as the comment says “OH WELL” – IE 8 and lower doesn’t know media queries, so it gets the two column layout with a max width… all browser that know media queries get the full rigmarole.

NOT rocket science if you’ve been designing fluid all along. People who’ve only ever dealt with fixed widths and fill their pages with elements that aren’t viable for web deployment in the first place might be left scratching their heads – but they’ve been ignoring accessibility all along with their fixed widths too big for netbooks and mobile, too small for large format displays, fixed metric text more likely to make users like myself bounce than it is to make me dive for the zoom, fixed height elements with content that could change or be rendered a different size inside them, multiple equal size elements across a page, and host of other broken methodologies that to be frank have no business on a website in the first blasted place!

“But I can do it in Photoshop!” – RIGHT…

BTW - played with the width triggers a bit to better fit the demo content – all good layouts should be adjusted to what’s in them, not the other way around.

Set the single column trigger to 640px, since the two column version seemed alright down to that low (probably good for tablet)… and swapped the three column trigger to EM’s – the values I chose were good for large fonts, didn’t really do anything at small…

Testing – gotta love it. Methodology is sound, numbers just needed some tweaking – which is the problem with ‘grids’ – they shove numbers down your throat that might not even work for your content or with the methods they’re trying to promote. Just working with elastic sidebars and a fluid main column makes it easy.

Yeah, it worked. It doesn’t mean it was much better than a fixed size. It was scalable, but that didn’t help much. Using em didn’t help much either. The way it was displayed on certain devices wasn’t good enough.

The moment you’ve added media queries, it started to also become responsive. It started to have potential, to display well on a larger scale. It’s the moment it stopped to just work and it started to really respond to devices and device parameters the user is using.

<hr>

Do I see a little of The Goldilocks Approach in your


#pageWrapper {
    max-width: 78em;
}

? :wink: