Tag Archives: mobile first
New Site Added to the Wap Review Mobile Directory
9to5Mac is a popular news and rumor blog covering Apple Inc. The site was the first to report on a slew of new Apple products and features including Siri and the iPhone 4s' dual core A5 processor,
Last August 9to5Mac and sister sites 9to5Google and 9to5Toys (consumer electronics and deals) got a mobile first responsive redesign. It starts out with a simple one column mobile friendly layout and progressively adds things like retina resolution images, sidebars, an animated lightbox and desktop ads. The result looks and works very well with desktop browsers and just every mobile browser I tried including non-Apple ones like the Android Gingerbread browser, the Symbian Belle browser, Firefox Mobile, Opera Mobile and proxy browsers Opera Mini, UC Web and Nokia Xpress for S40. I even got 9to5Mac to load (slowly) and be usable in the ancient Myriad (formerly Openwave) feature phone browser.
The mobile first philosophy pays off in drastically reduced page size. In Firefox 17 on my Linux PC, 9to5Mac's home page weighs in at a hefty 7311 KB ( 2741 KB compressed). In the Myriad browser it's 502 KB, one sixth the size.
Almost as interesting as the site itself is that it's built using Octopress, a new to me, blog aware, static site generator that claims to create a mobile first, "responsive design" layout.
Unlike traditional blogging platforms, such as WordPress, which generate pages dynamically from data in a database, a static site generator runs on your workstation and creates static HTML pages which it publishes to your web server. Serving static pages is a lot more efficent that dynamically generating them, which should make the site faster and able to handle more users with the same server hardware. Static pages should also be a lot more resistant to exploits and hacking than a complex webapp using a database and server side scripting.
Octopress is a user friendly framework for Jekyll, the static site generator powering Github Pages. An added benefit of using a static site generator is that you can host your blog for free on Github, Dropbox or anywhere else you can publish file too. Octopress comes with quality documentation, tools (from Jekyll) for migrating from WordPress and other blog platforms and has a sizeable community of users.
I find Octopress intriguing though I''m not completely sold on the "mobile first" part. The idea of mobile first is that you send a minimal mobile friendly page with small images by default and then use front end logic to bring down full size images when a big screen is encountered. The page weight of the Octopress pages I looked at averaged 300 or 400 KB regardless whether I used a 320 px wide viewport or a 1680 px one. 400 KB is no problem for smartphones and fast cheap data plans but not something you want to send your developing world feature phone readers who are paying by the KB. The good news is that Octopress and Jekyll are open source with an active development community, so if there's something I don't like I can roll up my sleeves and change it.
WPMU.org is a great resource for WordPress publishers and developers. Don't be put off by the site's name which suggests it's about the "MU" multi-user/multi-site version of WordPress (which no-longer exists as a standalone product). Actually, WPMU.org is the most popular independent site covering WordPress and BuddyPress. Packed with WordPress lore, news, tips, tutorials and theme and plug-in downloads, it's a site that should be of interest to anyone who runs a WordPress or BuddyPress site.
Last July WPMU.org was redesigned in the "responsive" style which means that the site adapts itself, using mainly front-end (client side) logic, to a wide range of browsers, both desktop and mobile. In a post about the re-design, one of designers talks about how they used a "mobile first" approach that delivers 320 px wide images by default so that mobile devices don't have to download large graphics intended for desktop browsers. If the front-end code detects a wider viewport, it replaces the images with larger ones.
The design targets devices ranging from modern mobile browsers with a screen width of 320 px or more on up to tablet and desktop browsers. I tried it with the Android Gingerbread browser, Opera Mobile 12, Opera Mini 7 and Firefox Mobile 12 (all on Android) and with the WebOS 126.96.36.199 and Symbian Belle (image top, right) mobile browsers and in Chrome (image below), Firefox and Opera on the desktop. The site generally looked good and worked well on all of them, which I find pretty impressive. The only glitch I noticed was that lightbox images in posts where badly clipped on the right side on all my mobile devices (image right). Hopefully this can be fixed.
The mobile first approach works pretty well. According to Opera Mobile 12.0 for Android, the homepage was a relatively svelte 247 KB in the mobile browser, while in Firefox it was 1184 KB.