Displaying a web page that fits the users screen is vital. Realistically, you need to render your site for a smartphone and as high as 1920px!
That’s a huge range, and the number of options to do this is thankfully increasing.
Adapt.js is a lightweight option that decides which CSS file to load based on the users screen size. This handy cup of JavaScript is built with the 960 Grid System, so if you’re familiar that, implementing Adapt.js should be fairly natural.
Adapt.js – Adaptive CSS
The only drawback is the number of CSS files you have to provide:
- mobile.css – below 760px
- 720.css – 760 to 980px
- 960.css – 980 to 1280px
- 1200.css – 1280 to 1600px
- 1560.css – 1600 to 1920px
- fluid.css – 1920px and higher
There is a potential to have your site rendered with a brief flash of unstyled content while the correct stylesheet is being retrieved.
I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions.
If you are already sporting the 960 Grid System or are fairly familiar with it, this may be a viable option to get your site to look good on multiple resolutions.
Learn more, how to configure it, and download Adapt.js from the Adapt.js website.
James Cooper says
I’ve been using adapt for the last couple of months and love it. In fact I’m retro fitting my biggest site with it at the moment!
Eric Dye says
Sweet! Drop a link here when you’re up and rolling so people can see it in ACTION!
James Cooper says
This is a wp theme I’ve made using adapt: http://demochurch.org.uk/
Eric Dye says
Sweet!