Responsive Design Pitfalls to avoid

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Responsive Design Pitfalls to avoid

Post by carasmo »

http://www.netmagazine.com/features/fiv ... alls-avoid

Before I even began, I took a month of learning and finding the best practices and testing all the sites on different devices either with my browserstack account and/or a real device.

I load scripts at breakpoints and I make things fluid, there's too many sizes out there, so it's best to start mobile up and load only the css for the device size between the break points. Only two files:

base.css -- this contains all the non-floating base styles for the site

mediaqueries.css - this contains all the stuff for larger devices and smart phones.

Then you gotta be clever, try not to hide stuff for one and show for another, structure your html so that it stacks in the order of importance and if you get fancy, then be sure that a fixed footer will not work on an iphone. Don't get fancy, make it simple and don't try to show off.

Also, always provide a js off version. I was playing around with SquareSpace's glorious templates and then I turned off javascript, and there is a blank page. Nice. Not.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design Pitfalls to avoid

Post by carasmo »

Sometimes you have a script that works great for your desktop but is not appropriate for smaller devices. This happens with menus, sliders, and various things that work in a large environment, but will bomb, bog down, or not work on phones. There's a script out there called breakpoints I think, rather than that, I use this:

Code: Select all

if (document.documentElement.clientWidth > 767) { //if client width is greater than 767px

//something : a script for larger devices

} // end if client width is greater than 767


if (document.documentElement.clientWidth < 767) { //if client width is less than 767px

// something : a script for smaller devices
					
} // end if client width is less than 767

Unless you're playing around with a responsive site, you are not sizing the browser up and down, so this is for people coming to your site and staying at that size, like a phone or a tablet. If you want to see the action happen, you will need to refresh the page or you will need a script to refresh the page. Many, many refresh scripts bomb on IE and don't work on Firefox. Here's one I tested on everything, even old stuff:

Code: Select all

$(document).ready(function() {

// refresh if window is over or under 767px
var ww = $(window).width();
var limit = 767;

function refresh() {
   ww = $(window).width();
   var w =  ww<limit ? (location.reload(true)) :  ( ww>limit ? (location.reload(true)) : ww=limit );
}

var tOut;
$(window).resize(function() {
    var resW = $(window).width();
    clearTimeout(tOut);
    if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {        
        tOut = setTimeout(refresh, 100);
    }
}); // end refresh

}); //end jquery

Last edited by carasmo on Fri Aug 03, 2012 12:33 am, edited 1 time in total.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design Pitfalls to avoid

Post by applejack »

Why don't you just use css?
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design Pitfalls to avoid

Post by carasmo »

This is for jquery.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design Pitfalls to avoid

Post by applejack »

Yes but why complicate it using jQuery when you could just use css?

I am just asking the question trying to understand.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design Pitfalls to avoid

Post by carasmo »

You can't just use CSS for some things. If you have a horizontal accordion photo slider that requires both css and jquery, and it only works best at desktop sizes, then why load that script for small devices? You'd have the ability to design as if your site is not responsive at the larger size (this is by doing mobile first) and then when the site is smaller, you'd take the html that was making the accordion, and stack those images or even load a different script (like flexslider) to handle the smaller devices.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design Pitfalls to avoid

Post by applejack »

Sure but there are many sliders where the jQuery is kind of self contained and adaptive to screen size. The ability to work out the screen size via javascript has been around for a long time.

Personally I am yet to be convinced of the need for responsive design or at least the way it is being done at the moment. Depends on what the site is and also the size as in number of pages and complexity of navigation. Sometimes it might be better to just have a completely different template etc for "mobile devices". Though I did do a site recently where it was small enough and appropriate to make it responsive.

In terms of fulfilment I think tablet (ipad) specific coding is perhaps more useful.

At the moment there are so many different ways of doing different styles of coding it's kind of crazy with such things as Boilerplate, LessCSS, SASS, SCSS, Modernizer, wireframing and a myriad of other options.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design Pitfalls to avoid

Post by applejack »

See http://www.binvisions.com/articles/tabl ... size-list/

So maybe if > 800 might be more universal.

Also this looks interesting if you don't already know it apart from they use px instead of em for font size

http://twitter.github.com/bootstrap/index.html
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design Pitfalls to avoid

Post by carasmo »

If you do fluid design with some responsive stuff, the worry about device sizes is gone completely. Using other people's grids is a lot of overhead, IMO, nothing like making your own system. However the icons rock, I've copied the bootstrap CSS and the sprite for buttons because they have consistent buttons for all types, including upload fields and buttons and make them look exactly the same across browsers and old stuff too.
Post Reply

Return to “Tips and Tricks”