Responsive design – Still a heavy footprint. Help?

[kruelintent]

Hi,

I have been working on a new layout for my website and I have embraced css3 transitions, jquery and responsive web design to get a reasonable looking site all the way from massive monitor to 200px wide (minimum)

Having a responsive web design on my site is great for a mobile browser/tablet but only if they are on wifi as the site is still fairly big size wise. I have several options for an HTML only/mobile only site. I could use a script at the top of the page identifying a mobile browser and bouncing them to a basic page. The basic page would then have a link back to the full page should the user want to get the full experience. The obvious drawback to this is that it would be a separate mobile website which is one of the main things I am trying to avoid by going responsive…

What do you do?

Thanks
Tom.

p.s. My (very much work in progress) responsive web design attempt if you want to see what I am working with… – http://new.kruelintent.com

[davidlab.be]

The main content text is way to stretched out to read on larger monitors. Just because it is responsive and adapts to larger displays does not mean you need to use every inch of the display width wise. Give your sight some margins and limit the max width to around 1500px and work on the design so the content is around 500px to 900px to make it more enjoyable to read.

[kruelintent]

Hi Springlab, I appreciate the feedback on the site but that isn’t what this post is for. For what it’s worth though I will be giving the main text a left padding so the twitter feed on the right and the left menu act as natural borders anyway. :-)

Any thoughts on the mobile site bit? Is there some funky trick I am missing to just not load the bloaty stuff when the site is visited by a mobile?

Thanks
Tom.

[stephrieger]

Hi Tom,
There is sadly no trick to doing this but you can do certain things to improve the performance.

1. Structure your CSS and media queries “mobile first”. This presentation will explain how (and why) to do this. (The main reason you want to do this is to load the smallest (kb) amount of content, images scripts etc. first, then use the media queries to progressively enhance the experience for larger screens rather than starting with a big screen design ans shrinking it down…which results in the small device loading all the ‘big’ content).
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

2. If your site uses large images, there are a variety of techniques you can implement to provide smaller images on mobile. Here is an article that describes most of these techniques.
http://www.cloudfour.com/responsive-imgs/

I would also highly recommend you only use the animations on the desktop. These types of animations cause lots of performance issues on mobile (even on the iPhone and other high-end devices).

This presentation is also useful and includes information about structuring media queries and some tips regarding performance.

http://www.slideshare.net/yiibu/pragmatic-responsive-design

[Author]

Posts