This year has been exciting. Mobile websites are really hitting the mainsteam. Just as the phone App gained popularity a couple of years back the mobile website is coming, and it’s coming big.
Like with anything, with a lot of people working on producing mobile websites there’s religion involved. And with religion I mean different ways of achieving the same thing. There’s a whole bunch of CSS Frameworks out there intended for designers & developers to use. This post is a brief introduction to some of them with some pros and cons.
CSS Frameworks to build Mobile Websites
Adaptive 960 Grid System
This framework developed out of the great 960.gs framework is pretty much like crossing 1140px with less framework, and then adding a whole bunch more designs. 6x designs! You have GOT to be kidding me! Might be useful if you’d want a website that is going to be displayed in an exhibition with both big touchscreens and small devices.
Pros:
- Fits on pretty much any screen. #win
Cons:
- HUGE design work. (6x designs)
Less Framework
The Less Framework by Joni Korpi is a great resource, and a great starting place for beginning to experiment with adapting for mobile & other devices. Less framework uses 4x modes; Desktop, Tablet & Cellphone (Portrait & Landscape). These platforms are the ones thats most commonly used (for now), and a website made with Less Framework will look great pretty much anywhere. Since Less Framework uses fixed values its easy to wrap your head around it. Unfortunately, since it uses fixed values you can get some nasty surprises when the browser doesn’t report your accurate resolution etc. This will lead to a situation where the ”wrong” design is displayed. You’ll also have to do your design 4x times, which is a serious pain in the ass.
Pros:
- Specific modes for Desktop, Tablets & Phones
Cons:
- Lots of design work (4x designs / page)
- When the browser doesn’t report the proper resolution you’ll get the ”wrong” design (Android, iframes etc)
1140px Grid
This framework by Andy Taylor focuses on scrapping 1024px as a design resolution and instead work with 1280px as a design resolution (with a 1140px grid). Instead of doing like Adapt 960 and Less framework the 1140 grid goes for being adaptive instead of static – which is better, but requires more work and a lot more clever solutions from a design point of view. This is brilliant. Why? First of all, it makes it really easy to create adaptive websites that fit into almost any window. It also has a second mode thats adapted for mobile (cramming all that info into mobile – dont think so!) . As such, it only uses 2x designs instead of Less frameworks 4x designs and Adaptive 960’s 6x designs. This makes 1140 a really good alternative since most clients aren’t interested in paying for all that design. This approach is pretty much like taking the best parts of Adaptive 960 and stripping it down to a bare minimum.
Pros:
- Adaptive design
- Just 2x designs – quick and clean!
- No cheating with images
Cons:
- Requires more HTML & CSS love (Not for beginners)