CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
trainoasis
trainoasis

Reputation: 6720

twitter bootstrap - responsive web design: load time on mobile devices?

I am creating a twitter bootstrap page that needs to be able to adjust itself to mobile phone/tablet users ... I am using 'hidden-phone' and other classes:http://twitter.github.com/bootstrap/scaffolding.html#responsive
It works perfectly and shows a totally different style on mobile phones for instance.

The only thing I am concerned about is the load time on mobile devices. If I have some code with 'hidden-phone' class for instance, it has to be checked to know that it must not be rendered. So, would it be a better idea to have a separate .html/.php files for mobile users? Or is there a better way to not load every jquery, css and other javascript stuff and html code on mobile?

I hope the question is clear enough, if not, let me know and I'll try to explain better.

Upvotes: 3

Views: 1723

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25475

If large images are an issue, I try to load them as a background image via CSS. This lets you specify different (background) images for different viewpoints using @media requests, eg 

@media (min-width:980px){

.image-background{
width:800px;
height:400px;
background:url("large-image.jpg") top left no-repeat;
}
}

@media (max-width:600px){

.image-background{
width:400px;
height:200px;
background:url("phone-image.jpg") top left no-repeat;
}
}  

etc

You can refine this more by using percentage for the width of the .image-background div and use new CSS options like cover or contain to scale the image within the div.

This approach isn't practical for all images on a site, but say you have a large splash image on a home page I've found it's worth the trouble.

Edit
Another image related option which is interesting is adaptive-images.com which resizes images on the fly, based on the viewer's screen size and break points you set.

It can be installed retroactively on responsive sites, so it might be worth testing to see if it's a good match for your site.

Good luck!

Upvotes: 1

nickhar
nickhar

Reputation: 20853

You could create separate files and scripts for supporting different devices or screen sizes, but this would create a somewhat fragmented codebase.

Bootstrap has media queries built-in, so, you could use them to extend or restrict the CSS that they use based on the screen width. Instead of including all classes and styles for every device, you could split them up and do something like:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="default.css"/>
<link rel="stylesheet" media="screen and (max-width: 1023px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="phone.css"/>

Doing the same with javascript is easy too. You can provide media query style inclusion for your JS files. One example is using the script-loader yepnope.js and Modernizr.

You can use the mq() media query testing within yepnope which allows you to execute or include JS functions/scripts, by testing for media queries:

yepnope({
    Modernizr.mq('only screen and (max-width: 485px)') // Media query test
    yep  : 'phone.js',
    nope : ['default.js', 'tablet.js'] 
});

If you design your framework/codebase well, it would reduce the footprint for mobiles and all other devices.

Upvotes: 2

Related Questions