• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: Responsive Design Pitfalls to avoid
PostPosted: Thu Aug 02, 2012 10:46 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Thu Aug 02, 2012 10:52 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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:

\$1:
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:

\$1:
$(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.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Fri Aug 03, 2012 12:25 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
Why don't you just use css?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Fri Aug 03, 2012 12:31 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
This is for jquery.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Fri Aug 03, 2012 12:42 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
Yes but why complicate it using jQuery when you could just use css?

I am just asking the question trying to understand.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Fri Aug 03, 2012 12:51 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Fri Aug 03, 2012 1:32 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Thu Aug 09, 2012 12:07 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design Pitfalls to avoid
PostPosted: Thu Aug 09, 2012 12:45 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting