Page 1 of 1
Responsive Design Pitfalls to avoid
Posted: Thu Aug 02, 2012 10:46 pm
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.
Re: Responsive Design Pitfalls to avoid
Posted: Thu Aug 02, 2012 10:52 pm
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
Re: Responsive Design Pitfalls to avoid
Posted: Fri Aug 03, 2012 12:25 am
by applejack
Why don't you just use css?
Re: Responsive Design Pitfalls to avoid
Posted: Fri Aug 03, 2012 12:31 am
by carasmo
This is for jquery.
Re: Responsive Design Pitfalls to avoid
Posted: Fri Aug 03, 2012 12:42 am
by applejack
Yes but why complicate it using jQuery when you could just use css?
I am just asking the question trying to understand.
Re: Responsive Design Pitfalls to avoid
Posted: Fri Aug 03, 2012 12:51 am
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.
Re: Responsive Design Pitfalls to avoid
Posted: Fri Aug 03, 2012 1:32 am
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.
Re: Responsive Design Pitfalls to avoid
Posted: Thu Aug 09, 2012 12:07 am
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
Re: Responsive Design Pitfalls to avoid
Posted: Thu Aug 09, 2012 12:45 am
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.