Shouldn't We All Be Developing Sites For Responsive Design

[engine]

Shouldn't We All Be Developing Sites For Responsive Design [googlewebmastercentral.blogspot.co.uk]

Our commitment to accessibility means we strive to provide a good browsing experience for all our users. We faced a stark choice between creating mobile specific websites, or adapting existing sites and new launches to render well on both desktop and mobile. Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses. With a mind towards maintainability we leant towards using the same pages for both, and started thinking about how we could fulfill the following guidelines:

1.Our pages should render legibly at any screen resolution
2.We mark up one set of content, making it viewable on any device
3.We should never show a horizontal scrollbar, whatever the window size

There's a lot of sense in the idea, and it's something that i've been wrestling with for some time now.

[Robert Charlton]

Great reference, engine, and thanks for posting it. I've been wrestling with this too, and in fact I've been hesitating to move ahead on a particular site redesign project because I've been wanting to see where the multiple device issue is going.

With regard to Google, the approach taken will not only affect design, but also the technical aspects of crawling, indexing, ranking, and redirects. As I read it, the Google article suggests that Google would like to resolve the issue of mobile redirects by eliminating them.

In the discussion below, I provide links to a lot of the discussions we've been having in that area as of Sept 2011...

Mobile Redirect Header Response and SEO
http://www.webmasterworld.com/google/4363444.htm [webmasterworld.com]

Note, btw, the thread that's linked to in our Supporters area, where we discussed Responsive Design, also back in 2011.

[netmeg]

As long as we're linking stuff, I'll do it too! Here's a post I started a little while back about Responsive Design and AdSense:

[webmasterworld.com...]

All my sites are going into responsive design now. But for the sites with AdSense - the bottom line is, I'm not happy with the way it works. If you know how to code, you can maybe write something that substitutes a mobile ad unit when it detects a mobile browser, but responsive design is based on viewport, and I don't think I can detect viewport with PHP. I am looking at several possible solutions, but probably won't have time to test and implement before my peak season hits.

So for now, I'm serving responsive design for everything down to a tablet size, and using a mobile plugin for smartphones.

[phranque]

Do people still care about horizontal scrollbars?:
http://www.webmasterworld.com/webmaster/4396370.htm [webmasterworld.com]

Mobile website design:
http://www.webmasterworld.com/html/4395640.htm [webmasterworld.com]

[Leosghost]

Do people still care about horizontal scrollbars?

Personally, I hit a horizontal scroll bar, I'm gone, without stopping to read, or let the page finish loading..

[Andy Langton]

Responsive design all the way! It's about the most elegant and future-proof solution to the plethora of devices out there.

IMO an individual solution to individual devices is going to deliver better results, but it's rare to have budget and maintenance time for that.

[Zivush]

I think that not all of the desktop sites' content fits mobile users.

Some ignorant questions:
1. Why wouldn't any site have a specific different content for mobile devices.
2. Why mobile browsers adapt their design for the desktop sites.
3. Why wordpress, drupal and the likes platforms adapt their version for mobile devices.
4. What about the duplicate content issues.

[incrediBILL]

Personally, I hit a horizontal scroll bar, I'm gone, without stopping to read, or let the page finish loading..

Then you obviously don't use netbooks, tablets or smart phones as that strategy would basically stop you from using most of the internet on any of those devices.

[Dan01]

Zivush:

3. Why wordpress, drupal and the likes platforms adapt their version for mobile devices.
4. What about the duplicate content issues.

I have been thinking the same thing. Plus, I have seen what Robert said here several times:

As I read it, the Google article suggests that Google would like to resolve the issue of mobile redirects by eliminating them.

[Leosghost]

Then you obviously don't use netbooks, tablets or smart phones as that strategy would basically stop you from using most of the internet on any of those devices.

Smart phone yes ..the others no, ( and no intention of getting them ), they are gadgets, on smart phone if the site doesn't resize "responsively" to my 480 x 800 res..then I'm gone..I'm working through my older sites to make them so..and all new ones I make are responsive..
If I can make the effort ( It isn't like we all didn't have plenty of time to get ready for screens on mobile devices*, especially with regard to building new sites )..so can the other webmasters ..or they lose my interest , my clicks,( if they have ads or aff links ) and my custom if they are ecommerce..

Side scroll is an abomination..

*old sites can take longer to "re-jig", successfully..especially if one does not want to buy an idevice specially to allow for the quirks in some past ibrowsers..

[edited by: Leosghost at 11:56 am (utc) on May 4, 2012]

[Andy Langton]

To my mind, the "default" should be responsive design, so that everything works reasonably well across a broad range of devices. And then if you have the time, investment and business case to customise for particular devices or device categories, then that will obviously create a better user experience.

One factor is that the rise of "smartphones" has been pretty swift, and smartphones cope well with the same technologies used on many desktop sites. So everybody is playing catch-up with the technology to some extent.

[netmeg]

The first time I wanted to serve my mobile users, I went the way of putting mobile content on a subdomain. Almost immediately had issues with indexing; in some cases the m.example.com was indexed, in others it was not, it kind of went back and forth and was a nuisance.

Now I'm all about detecting the browser and redirection, and that seems to work a lot better. The users have an option to view the full site if they want to. My mobile users get a shortened menu.

Since many of my sites are monetized, I still have to deal with that issue before I go full responsive, though. I also want to test what effect that might have on mobile revenue; after a couple years I have a pretty good idea of what I can expect now. Curious if responsive design will affect that.

(I think the default twenty eleven theme that comes with WordPress is now responsive out of the box)

[Harry]

I still think that responsive design is a hot balloon that has not been critically assessed. I'm not against responsive design per se. I've used them and converted some of my sites already using that. But they are not perfect solutions to serve users better. At best they are a stop gap.

I'm still a believer that a dedicated mobile site is the best solution and used without any redirection. Allowing users to pick what version they have wile serving them a page that is easily accessible on a mobile device because it is responsive is the best way to serve users.

I think people will become lazy with the responsive mantra. Just shrinking a page and showing results within a width that fits a screen is not enough.

Webmasters have to understand users, specifically those that use mobile devices and tablets and then built for them. Responsive design shoves a one size fits all approach to delivering information on a Website that may not fulfill the needs of all users.

I have kept all mobile sites for my mobile users as they offer the best way for them to use the site and was developed with their needs in mind. Users who surf on phones are different in their surfing than those that surf on tablets or desktops even if the contents they seek is the same.

[incrediBILL]

they are gadgets

Keep thinking that way because it'll cost you visitors, visitors me and others will gladly take from you. It's all about scalability, degradability and accessibility - it's not that hard to do but it you don't do it you're going to lose in the end. Thanks to @PageOneResults (he's a very bright boy) he helped me with a fully scalable responsive design for a couple of sites I'm working on that scales from my big 24" screens at 1920x1200 down to my smart phone.

I have all those devices and they all serve a purpose and when I can't do what I want with any of those devices and it's the sites fault, I abandon the site, not the device. Basically, you the webmaster don't tell me how to work or use the internet anymore. There's lots of competition out there and it takes very little time to find someone filling your niche for that device. Maybe your competitor doesn't do as good a job but if your site doesn't work on the netbook, tablet or smart phone, which is trivial to do, then you lose the business regardless of your superior feature set.


FWIW, got my wife a tablet for Xmas and she can't put the damn thing down. She barely uses her netbook, the previous electronic BFF, or smart phone anymore as I think the tablet just became her device of choice for the last 4 months. The tablet was the Goldilocks device, not too small, not too heavy, not too big, it was juuuuuuust right. ;)

[pageoneresults]

Shouldn't We All Be Developing Sites For Responsive Design?

Yes. And, if you don't do it now, you'll be that much further behind.

Did you know that GA reports Viewport Dimensions? Go to...

Audience > Technology > Screen Resolution

Ya, they refer to it as Screen Resolution and not Viewport Dimensions. What you'll see in the top 10+ are your most common Screen Resolutions. These are folks surfing with a maximized browser. Then, as you scroll through the report, you'll notice the numbers start to change to a variety of dimensions, these are the Viewport Dimensions.

At the end of 2011, I reviewed stats for a handful of domains under my management. All of them have a 320x480 in the top 20 Screen Resolutions. Many of them have a 240x320. The smallest I've seen is 122x133 with the largest being 5760x1080. Can your site scale to fit those dimensions?

Here are the Top 10 Viewport Dimensions for mobile and tablet devices. This is from a site that averages 200k visitors per day.

1. 320x480
   
2. 320x396
   
3. 320x240
   
4. 240x320
   
5. 480x800
   
6. 480x360
   
7. 360x640
   
8. 480x320
   
9. 640x360
   
10. 320x508
    

I wouldn't be surprised if Google looks for Media Queries and awards extra points. You?

Thanks to @PageOneResults (he's a very bright boy) he helped me with a fully scalable responsive design for a couple of sites I'm working on that scales from my big 24" screens at 1920x1200 down to my smart phone.

THANK YOU for allowing me to show you the way. :)

[Harry]

I like the way you try to "convert" him by putting the Google ranking carrot in front of him. ;)

[pageoneresults]

I like the way you try to "convert" him by putting the Google ranking carrot in front of him.

It works - most of the time. :)

I wanted to add a tip to the above, make sure your site is FAT FINGER FRIENDLY. A list of links with no padding or margin is extremely difficult to target on a mobile or tablet device. BIG buttonized links are the way to go for most. If not, make sure you've got adequate space between links or the user will have to zoom for targeting. I hate having to do that!

[Leosghost]

Keep thinking that way because it'll cost you visitors, visitors me and others will gladly take from you

You are missing my point..my responsive sites work on tablets..But I have no intention of getting one..:)

I even have some sites related to and covering the subject of tablets..But I have no intention of getting one..:)..

I pick 'em up just long enough to write about them and take pics of them..

Then I hand / give 'em back..

That said I'm sorely tempted by "Galaxy note"..because I can draw on one..and put it in my pocket..and it makes calls..the rest are all waaaay too big..

[rlange]

I really like the concept of responsive web design (RWD), but there's an elephant in the room that very few people seem willing to even acknowledge when promoting it: bandwidth. A lot of your mobile users will have bandwidth caps. You need to think about them.

You can display:none that large, flashy slideshow you have on your home page, but the mobile user's browser is still going to download the images and JavaScript.

You also have the issue of higher resolution images needed for display on a full-sized monitor. You don't need all of that data on a smartphone, but there's no way to swap out that desktop-optimized image for a mobile-optimized image.

Like I said, I like the concept of RWD, but I feel that it's only really useful for websites that are naturally "light" (limited use of images and JavaScript).

--
Ryan

[incrediBILL]

but there's no way to swap out that desktop-optimized image for a mobile-optimized image.

That's not true.

You can swap images of different resolution and do it several different ways either client or server side.

[Harry]

@rlange that's part of the problem with responsive design although as mentioned by @incrediBILL there are ways to serve images to mobile devices but they do involve a lot of compromise in themselves and are still not exactly full-proof and easy on the user's device.

Responsive design is cool and like I wrote above, I use it too. However, it's a stop gap solution at best and will not perform as smoothly under all scenarios and devices as well as a dedicated solution for mobile.

What responsive design handles well, is the middle ground occupied by tablets by being well adjusted for viewing contents on them. But there's always a loser in a one size fits all solution and in this case, it's rarely the full desktop which usually has more power, a better connection and better resources to handle anything and not really lag. Mobile devices, by their nature are finicky. You have to assume that your user is using the worst data access, that their device is slow, has a full cache will not handle particular tricks as well and so on. Just resizing images and reflowing texts and menus vertically and removing a few useless plug ins will not be enough.

The whole point of responsive designs is to serve mobile users better, but it usually means that they get the worse experience of all users. On the other hand, a dedicated mobile site does away with a lot of the crap and only delivers what a typical mobile user needs. There's no complicated media query trick to remove offending material or to resize stuff and load alternate CSS files. If it's done properly, it's built from the ground up to be as lean as possible.

On my sites, this is actually the case. The mobile site loads way faster than the responsive one and is easier to navigate. it just works. Often, I find that using the mobile site is the even easier to use with older browsers and those that don't support HTML5 or render something out of whack (looking at Chrome and IE).

But since the current in thing is responsive design, there's no point arguing that it works mostly in theory but is not the prefect solution for everything.

[rlange]

incrediBILL wrote:
You can swap images of different resolution and do it several different ways either client or server side.

I suppose, but any client-side solution would require additional JavaScript to switch out sources before they're requested by the browser. Any server-side solution would require either user agent sniffing (which breaks the device agnosticism of RWD) or JavaScript to store the browser's size in a cookie (yuck).

--
Ryan

[netmeg]

Whether it's responsive design or a mobile site, it does require really thinking about user intent (which more people should do anyway but I digress)

My mobile users mostly come to the site to look up the date, time and/or location of an event, they have no need for (and traditionally don't visit) the rest of the site. They get a shortened menu and a more mobile-friendly layout, with the option to go full site if they want.

That plus the ad situation made me go mobile plugin for them.

On my own personal site, where there's no ads, I love the responsive design - the sidebar content is nicely tucked underneath the 'meat' and it seems to work well in everything. I assume anyone coming there is coming to read, because there's no other reason to be there, regardless of device. So they get everything.

There really isn't a one size fits all solution yet - but we're a lot closer than we used to be.