Mobile users have different browsing habits than desktop users. Understanding these differences in habits is key to responsive design.

Understanding how to efficiently cater to these different users is essential.

Break down what is important to desktop and not for mobile and the opposite.

Include everything, both desktop and mobile in your main content and control each by screen width.

Always have at least two css files, one for desktop & one for mobile so you can control each individually.

Let containers & images scale by screen size to increase flexibility.

View what you have accomplished, with a wide smile!

modern web design is - unlike web designers would state - not very focused on the user, but largely dependent on a mixture of fashion trends and marketing fads. one of the buzzwords everyone is so obsessed with is "mobile first".

It's true that design is trendy, sometimes mindlessly so, but these particular fads have some merit. We've known for a long time that a clean design is better (in most cases) because it more effectively gets users where they want to go while keeping them relaxed.

What we've discovered more recently, largely because of mobile, is that people respond well to even more extreme levels of simplicity. Big buttons, a small selection of (up front) choices, etc.. This has created a trend towards "wasting" space with large elements and soothing white space but I'd say that trend is very much focused on the user. There are of course exceptions but the average user actually wants big obvious things to click on, preferably combined with no choices beyond those that are required to reach their intended goal.

This is somewhat opposite of the traditional developer perspective. We naturally want to put as many important (as defined by us) resources as possible in front of the user. Mobile has taught us that the masses don't want that (at least not right up front). Give them the extra choices somewhere deeper in the experience, initially just make things easy.

Which means all that white space and those oversized elements aren't a waste at all, they're an investment in user experience.

Me personally, I like as much information (and links) as possible above the fold. But I think it has become clear that the average user (in most niches) absolutely does not. What we didn't realize before the explosion in mobile use was that there is a huge percentage of the population that doesn't enjoy old school web application UIs. They'll deal with them if they have to but they're going to switch to more elegant alternatives as soon as they find them, because they feel better.

I think that there is an association between responsive design and very simplified UI, because when you simplify by excluding things from the small screen version, you start thinking about whether you actually need those things at all.

@lammert, Adsense Support uses the same design as the rest of Google Support, but it is still pretty horrible. It does not go a good job for either mobile (important navigation below the fold) or Desktop (wasted space).

The issue I have personally with a lot of redesigns I see is that if I shrink my browser window and look at the same page, suddenly it looks better. In that sense, the said site looks better scrunched down than it does in a grand full size monitor view. That's perplexing to me, but apparently it's not for most everyone else.

Well, the "general rule" is to design for mobile first. So I guess that is what most people do. But it doesn't need to be that way. It's an "implementation" issue, not a "responsive web design" issue. I personally re-designed my site for "tablet first" and love the design I'm now using - a design that works great with all sizes of browsers and where nothing is lost when the desktop version is shown.

As for the sidebars you mentioned, well....where do you put them on a smartphone? As a previous poster mentioned, you can put it above the content, below the content or "display:none" it away.

Even on desktops, though, how important are sidebars? Really? Few sidebars contain real useful information. Most sidebars contain ads, popular link type stuff, and related articles. Rarely is there anything "important" in a sidebar.

Moreover, if a designer is putting "critical" information in the sidebar, wouldn't it make more sense to put that critical information in the main content section instead - for both desktop and mobile versions?

I hear you about poor implementation and design. The new ESPN design that just rolled out is, well, "not so great" when viewed on a desktop but works just dandy in mobile view. But again, it doesn't need to be that way. It's just choices that the designer made. And since many if not most designers are building for "mobile first," the desktop does sometimes end up lacking.

But it need not be that way. It's just poor design choices...not some "fatal flaw" with responsive design.

I think you need to remember that we are in "Version 1.001" of responsive web design. I personally believe responsive design is here to stay since the benefits it provides greatly outweigh the negatives (who among us - and who lack a dedicated IT department - really want to maintain both a desktop and mobile version of our websites?), but how responsive designs are implemented will change - probably dramatically - in the years ahead.

Finally, one final thing you have neglected to mention about website display on a smartphone. Making a website "mobile friendly" isn't just about making a site fit nicely on a smartphone. It is also about making a website "touch friendly."

Making a site "touch friendly" generally requires some fairly substantial changes in how a site is designed - regardless of the "viewport" size. And "touch friendly" has nothing to do with screen size - after all, iPads and larger tablets show the desktop versions of my own and most other websites. Yet a website that isn't "touch friendly" on an iPad or other large tablets become nearly as unusable as a non-mobile friendly site when viewed on a smartphone.

One thing I absolutely love doing with responsive design is changing menus, and after using sites I know what I like for me and that is what I give users. My implementations have a lot to do with how you hold your device and where your fingers naturally lay. For example, mobile portrait view, getting rid of the hover style menu for a slideout menu with the open/close control at the bottom right. This is where most people's thumbs natural sit most of the time when holding the phone, go to landscape mode and I move the open/close control to the top right, where the thumb is now that they switched orientations. Now go to an iPad/tablet view and I keep the menu open but running top to bottom alone the right edge, again where the thumb naturally rests but I keep it open because there is more screen real estate.

The other thing I do is running javascript to enable click calling on any phone numbers and a few other niceties that make it a more "mobile" friendly experience without server side screen detection.

Thanks for the incredible reading! True point about making things more touch friendly. That is something lost in the discussion I think. Bang on with the Version 1.001 in all this. I think for me, I'm needing to breath a bit a realize that a lot of people see what I see, perhaps dislike many aspect that I dislike (regarding trends) all the while realizing that the designs should hopefully improve in the near future. It's still quite surprising to me that some of the biggest sites on the planet are dropping the ball. I know for a lot of sites that monetize via Adsense, that the sidebars were and still are a key. People will have to find a way to get nice mobile clicks using their design choices. I'm good in that regard via Wordpress, but not all my sites are so lucky as to be using Wordpress. Anyways, I appreciate what everyone has written. A kick to the gut can be a good thing!

jimhoo9: Good point about the "touch-friendly" aspect. That's easy to forget.

On our main site, we use quite a few custom interactive maps. The markers are easy to click with a mouse, but they don't always respond to a tap. I ended up taking the maps off our mobile-optimized pages--partly for bandwidth and display reasons, but also because it can be annoying when you tap on something and nothing happens.

I'll just jump in here I guess. Responsive design gives you the ability to shape your user's experience based on the device (screen width) they are viewing your site on. People on telephones don't necessarily expect the same experience as a desktop user. That's my first point. What you show a user on a given device needs to address that user's expectations.

Sidebars? What I want to be able to do is read the content and navigate the site in a logical fashion. Shrunk down pages with sidebars on a phone are hard to read. Period! Well, unless you have eagle eyes.

Most responsive WP theme's are gonna put right column content (and often left column content) below the body column. That doesn't mean it's the only way to do things. As martinibuster stated. WP can be modified, Bootstrap can be modified. Whatever the framework, it can be modified. And you can always build from scratch.

So back to point one. When designing for a phone, you almost always have to make compromises. But you can have your secondary menus or whatever where you want them too. Sometimes it's as simple as creating two copies of your sidebar, one that only shows on desktop (a right column for example) and another that shows at the top of your page but only on mobile (with panels or whatever). Worried about hiding ads (such as Adsense). Just load your ads into a visible container with JS or jQuery and don't put your ad code into your HTML where it could possibly be hidden. jQuery makes screen size detection pretty easy. Most things that you can't do with CSS media queries can be done with jQuery (where alternative layouts are concerned). This isn't a coding forum but examples abound around the Internet.

Bottom line is that you can create many experiences from a single responsive layout. You don't have to let the original theme author's whim rule your user's experience. For what it's worth... ;)

Thank you for this thread MrSavage, and especially for being stubborn :)

All I want to say is that I am among those who fail to understand the "mobile first" approach everyone seems to be suggestiing these days. I am getting around 32% mobile users, so a desktop first approach would seem more appropriate. Which is why I have rebuilt my layouts to look almost exactly the same as before, with added mobile functionality.

I'm at over 80% mobile, so it'll always be mobile first for me.

On my biggest site, mobile traffic is 54% of all traffic and that number has been climbing for years. So, to me mobile first makes a lot of sense.

I have other sites where mobile usage is more like 30%. Those sites will not be converted to responsive "until I get to them". And that won't be before April 21st.

I am among those who fail to understand the "mobile first" approach

Everyone saying this is not getting what this is really about, page speed.

Why Google is advocating 'mobile first' is about making a page that progressively enhances (with media and to a degree content) aka grows in page weight as the ViewPort width increases. Traditional 'desktop first' designs of responsive type do the opposite. All users get the full page load regardless if they display it or not. See comments in the other thread about the impact of 'desktop first' on phone user's data plans. None of the 'mobile first' push is about making ANY layout compromises to address Google's concern for page speed.

What Google wants us to avoid is a mobile user having to draw down EVERY object that is served to a desktop with a majority of them set to display:none or width set to 10% or so. A mobile user shouldn't be expected to choke down a 2 megabyte plus page to end up actually displaying <75 kilobytes!

For the record I am NOT a Google 'fan boy' - I just read what they have published and feel there are webmasters here who have mistaken interpretations about what Google wrote.

Mobile first? Desktop first? To me this implies a misunderstanding of what responsive design can be. There doesn't need to be a priority. Each can be it's own thing while it's all just one thing. If you want simple then perhaps you're stuck with this kind of thinking but if you're willing to get creative and learn a bit about CSS and browser scripting, then there is really no need to put yourself in a box like this. It's not the same as building multiple versions of the same website but it is about creating different ways for the same page/content to render, depending on the device. Sometimes you'll use media queries, sometimes you're change things up with Javascript or jQuery and sometimes you might want to make alterations on the server. What we're talking about here is a highly flexible set of technologies for rendering your content on the page in a way that's suitable for the device it's being viewed on.

And to heck with the whole "Google made me do it" discussion. If you're creating a responsive website to make Google happy, you might be due for an oil change. If you haven't figured out that the world is going mobile and if meeting the needs of your audience isn't enough reason to get with the program then you're never gonna figure out how to make Google happy.

Well said. Responsive design is a logical evolution. And it really is as flexible as you need it to be, especially when you use server side scripting in addition to RWD. Then you get the best of both worlds: Flexible design without maintaining multiple versions of a site along with less page weight for small devices.

If I had to pick a downside it's that the much loved mobile option to "request desktop site" doesn't work for responsive sites because the content changes based on viewport size as opposed to user agent. Now the only way to do it is to spoof the viewport size :/

@ moTi - I see sites like that all the time these days and it annoys me too. I bought a big monitor so I could see more stuff at once, not scroll past a headline in 40pt text and a stock image big enough to be a wallpaper.

Fonts don't scale perfectly in proportion so if you just size up from mobile > tablet > desktop 'by the numbers' you can end up with text that looks far too big on a big screen. Using three images (and catering for Retina displays also) is hard work, so many layouts use one. The height to width is a consistent ratio but it looks crap on desktop, because the sweet spot is set in the middle.

I've found that you need to adjust the ratios between different things as you go up and down the scale, and that includes images too if you really want to do a good job.

But perhaps, for those sites that annoy us both, desktop is the afterthought. The user they wanted to please the most was someone on a tablet - the old 1024x768 or even 1280x960. We are now where the mobile users used to be - frustrated because we are no longer the priority.

If I had to pick a downside it's that the much loved mobile option to "request desktop site" doesn't work for responsive sites because the content changes based on viewport size as opposed to user agent. Now the only way to do it is to spoof the viewport size

I also LOVE the option to view site in "Desktop" view..... and you can provide it with a little scripting.

First you you will have to have all your smaller view CSS defs in a separate CSS file.

Then create a "Full Site" link and add a query string...... www.example.com/?fullsite=1

Next add a condition around that CSS file that checks for the fullsite var and won't load that css file if the fullsite var is set.

Then do something to keep the fullsite value persisting either with a session var or with code that keeps the querysting set as they click through the site.

I was referring to the option from a user perspective, i.e. that the 'request desktop' menu option in mobile browsers has no effect on RWD sites.

I completely agree that it makes sense to give users a full site link/option as a result.

I love responsive design because i get the same content as a desktop.
I loath 'mobile' specific sites because:
a) they rarely get the targeting right. I have 9 browsers on my phone. and use about half of them in any given day. Mobile stats are off by atleast 20% (especially GA - it doesn't get browsers right - It currently thinks FireFox android is FireFox desktop)
b) they make me go to a desktop to get the "real" content that is never right on a phone.
c) they try to give you an 'app' feel when you are after a 'web' feel.

So side bar widgets to bottom? I couldn't care less. I' cant remember a time in the last year when I have click on anything in a sidebar. Waste of bandwidth.

So side bar widgets to bottom? I couldn't care less. I' cant remember a time in the last year when I have click on anything in a sidebar. Waste of bandwidth.

I agree when it comes to normal Wordpress sidebar widget content. One change I am contemplating is moving top navigation to the sidebar for tablet and 'smartphone' mobile. Why? Mostly on the few sites that have a large amount of menu items. Currently the menu top level wraps to 2-3 rows of item choices that, in portrait view significantly pushes body content down (aka a lot of content lost to 'below the fold').

The executive boards of these organizations (mostly seniors) I do work for were asked to prioritize what top menu items were to be dropped in mobile. Six plus months later it's still a 'deciding to decide' situation. So to me this may be my way of making the 360px viewport width and up phones see the whole of all navigation trees. What I don't want is some slice-n-diced shortening of menu choices or a |||| (with no text label) that the many new to smartphones don't like or find 'invisible' due to inexperience.

I currently have no plan nor make many changes to accommodate the 230px viewport width 'flip phones'. They know they're on a 8+ year old technology phone. So they're used to seeing a scrambled eggs breakfast page layout most times - or the 'mobi style' aka .m 'old school' mobile pages.

My point is if content was important enough to be above the fold, how is moving it to the bottom of the page somehow ideal?

The mouse/trackpad-based wide-screen and touch-based small-screen interfaces work differently.

Positioning subsidiary content below the primary content on a mouse/trackpad-based wide-screen creates pain for the user, because scrolling down the page on a laptop or a desktop, while by no means a massive hassle, can still be a bit of a chore - and it would feel totally unnecessary if there were enough horizontal screen estate to see everything on-screen at the same time in the first place.

By contrast, positioning subsidiary content below the primary content on a touch-based small-screen creates very little pain, because finger-flick-scrolling is so easy. The pain point on a small-screen would more likely be if you tried to create a multi-columnar layout which required the font-size to be tiny or otherwise meant that each column would be able to display very little text per line.

So, arguably, building a low-pain layout on a wide-screen means displaying the <aside> or the <nav> on one side of the screen to the right or the left of <main> so that everything can be seen simultaneously, while building a low-pain layout on a small-screeen means displaying the <aside> or the <nav> vertically above or below the <main> within one or two easy finger-flick-scrolls, so that the <main> can display across the majority of the 320px width of screen-estate available.

I thought I responded here, but I'll throw out one other thing...

If your content is ordered in the HTML as
- left stuff
- center stuff
- right stuff

you've probably got a float:right on the stuff on the right. The dead simplest way to make that page work on a small screen is to remove the float. So in 90% of the cases, that's how it's handled and that has become somewhat of a convention.

Keep in mind conventions don't necessarily mean sensible. For many years nav on the left was a convention. Miserable. Click left. Load page. Go all the way to other side to scroll. Go all the way to other side to find nav and click the next item. It was horrible and usability experts pointed out that it was inefficient, but the convention was so ingrained that it was a topic of some concern here - was it really okay to put the nav in a place other than the third dumbest possible place (the dumbest being mid-page and the second dumbest being the footer).
[google.com...]

Similarly with blue links. It used to be any other choice was "dangerous" even though blue is actually a bad color for readability.

The mother of bad web design conventions is the decision to make hypertext links blue. Other colors would have been a better choice and would have increased the reading speed of the anchor text by a few percent.

-- Jakob Nielsen, 1999, [nngroup.com...]

Why this trip down memory lane? Just to say that things become standards even when they are bad because either the bad version was easy or nobody thought about it early on. I expect that people will get way more innovative over time with responsive designs and a lot of the ones we see today will be the "black text on grey background with blue links" of our time.

Just as a continuation of my frustration, how about the Masters. I just went to their site. So can anyone tell me that this isn't a smartphone site displaying on a desktop? I have a big monitor and it means nothing. Scrunch that Masters site down and oh yes, it's just wonderful. I need a touch screen for that site to make sense. Hide everything. There are about a handful (if that) of elements that I can interact with. This is the antithesis. I get how this design makes sense for a touch screen. From a logic perspective, it would appear that their mobile users out number the people using normal size displays. F'ing terrible in my books. I'll take a deep breath and hope this passes, but I don't imagine it will for a long while if ever. Afterall, if your organic traffic is at stake, people will be desperate enough to jump and ask how high. Nice site they have, the Masters. It's a thumbnail icon in the top right corner. Wow, that's so unique and creative... Again, my thoughts on this must be a very tiny minority. If the entire design of a website skews to a particular screen size, then I would hope the majority of users will enjoy the benefits of such a design choice. I just don't think that matters with the WWW. What matters is deadlines and organic traffic threats.

@ergo, I definitely hear what you are saying and the examples from the past. I guess the bigger issue for me is that when you have a "get mobile friendly or else you are dropping in the SERPS", that is becomes much different. If you had blue links for example, it's not like there was a warning that if you kept those blue links that you would drop off in the SERPS. People cave, obviously. It's dollars and sense (not cents). So as crappy as I feel in general about more and more sites I visit, the threat of lost traffic is going to be the biggest deciding factor.

Regarding a few other points made, when a site remembers my choice when I choose "desktop view"? No issue. If I have to choose between responsive vs. desktop/classic? I know what I will choose every single time. I would never in my wildest dreams choose a responsive view over a desktop view from recent past. I don't think anyone is suggesting that a responsive design is going to surpass the user experience of a "normal" display designed website, are we? Perhaps it can be made on par or about equal, but can it actually surpass a dedicated normal sized viewing design?

If the trend continues, and phablets become the norm, then I think there is even more head scratching for me on this.

I do understand the decisions with sidebar, or above the fold colums getting bounced to the bottom of a page. Something has to give. To me though, if the will is there, a mobile site would take innovation in design to minimize those sacrifices. One shoe, fit all means not a great fit for all, but certainly those with small feet will get the best experience. Responsive seems to benefit the small screen user in the vast amount of sites that I visit on a regular basis. Bad implementation? Okay, I've heard that over and over.

I don't think anyone is suggesting that a responsive design is going to surpass the user experience of a "normal" display designed website, are we? Perhaps it can be made on par or about equal, but can it actually surpass a dedicated normal sized viewing design?

Of course it can. It can do anything you want it to do.

You have (understandable) issues with some current trends in web design. But none of those things are caused by RWD. There are no inherent limitations or rules in the concept of RWD. You can do a completely responsive redesign that displays identically to the way it did before, pixel for pixel, on a large screen. The sites you're referring to just haven't chosen to do that.

If the trend continues, and phablets become the norm, then I think there is even more head scratching for me on this.

There's no doubt the trend will continue. And then new display and interface technologies will inspire a new trend, ad infinitum.

I suspect that once mobile has finished taking over computing, the next UI revolution will happen as a result of creative ways of improving the mobile display experience... Glasses, VR headsets, wireless screen connections, etc.. Along with improved input from motion tracking and maybe even direct thought interfaces before too long (hey, they already exist, they just suck atm).

However it develops there won't be any going back to a small selection of screen sizes. It will become increasingly difficult and expensive to maintain multiple versions of a site for multiple devices.

However it develops there won't be any going back to a small selection of screen sizes. It will become increasingly difficult and expensive to maintain multiple versions of a site for multiple devices.

Yes, and it often won't be necessary, because canny site owners will target specific audiences to a much greater degree than they do now.

I wouldn't want to read THE NEW YORKER on the future equivalent of Google Glass (for one thing, it would be too easy to get distracted and trip or be hit by a car or bicycle), but a site offering maps and directions for heads-up displays would work far better in that context than it would on a desktop, laptop, or tablet screen.

I definitely have appreciated reading other people's views and opinions on the topic. I know that I'm overly passionate about such things, so I appreciate people that are willing to debate and discuss this.

>>Masters

I think the big splash screen aesthetic is only partly driven by mobile. There has been a general move to say "If Google and Dropbox and and and have a very spare home page, it must be right." As opposed to "If Amazon has such a busy home page, it must be right" which is what I was hearing a few years ago.

The thing is, you can skin the mobile cat in many ways and what you are seeing is people tending to take the easiest route. That doesn't mean you have to. You can make a completely different mobile experience or you can just refuse to give in at all and just not get traffic from mobile users.

The other thing to keep in mind is that for the vast, vast majority of people, you will maximize utility at the point that you frustrate them the least. Most people do not find the fact that the desktop site "means nothing" frustrating, but they do find mobile touch targets too small to use incredibly upsetting.

So a site (mobile or desktop) that's simple, easy to use and not incredibly frustrating could add some incremental usage if it "meant something" (though to be honest I have no idea what you're talking about there). However, a site (mobile or desktop) that is frustrating to use will shed users like a dog sheds hair in summer.

I have run into an aggravating problem that I'm sure affects a lot of beginning WP site owners - the breakpoints predetermined in responsive themes are not what may be ideal for the site and its users. I have no problem to edit it to more reasonable settings, but WP attracts a lot of users who never bothered to learn more than how to operate the visual editor - drag'n'drop pages/posts. Now they may not be happy with what they have but it is another step to begin learning what, where, how to change defaults.

My sites were fine on a tablet without pinch or zoom in either orientation. Now it becomes a giant mobile site with mini menu, no sidebar if I were to go with the defaults. That's not a good user experience either for the theme customers or their visitors.

not2easy, this is why I tend to use either Bootstrap or Foundation. You can quibble, but they are on version 4 or 5 in each case (or is Bootstrap still 3) and I think they are better at this point at knowing what works across a wide array of devices.

Not to mention that SASS makes it easy to change if you decide to (LESS too, but I mostly use Foundation, which is SASS).