Responsive web design

Published: February 6, 2013

I redesigned karljones.com using responsive web design* principles, with three different layouts based on browser width:

  • Desktop: display two columns, main and sidebar
  • Tablet: display one column, collapse sidebar below main
  • Mobile phone: display one column, hide sidebar

Each of the three sizes also has CSS for different font sizes, the idea being a page that reshapes itself to look good on any given device.

Try it: on a desktop browser, watch the sidebar collapse into the main column, then disappear altogether, as you drag the browser narrower. Better yet, compare a desktop browser and a mobile device browser, see the difference.

This is a start — an improvement on life before media queries — but only an imperfect and temporary solution to a long-standing (and fast-evolving) problem.

The idea of “write once, display anywhere” asks too much of media queries and CSS, much the same way that the Holy Grail asks too much of knights-errant.

What we really desire, of course, is a Brass Head — an “automaton … reputed to be able to answer any question.”

Alas, “reputed” is ever the rub, and answering “any question” exceeds our current technology. “Indistinguishable from magic” will have to wait for another day.

–KJ


* By “responsive web design” (a fashionable term, open to some degree of interpretation) I mean media queries and other CSS rules. See also Wikipedia:

Mobile devices, mobile browsers

Published: May 3, 2011

Of course Mobile is big. And right now, of course, Apps are big.

But do Apps make mobile web browsers obsolete? On the contrary — mobile web browsers are more important than ever:

A few years ago, Morgan Stanley published a report in which they predicted that somewhere in 2012 more mobile devices would be shipped than PCs. Well, it happened two years earlier than predicted…. The way we interact online, email, etc., is shifting to mobile devices.

But is all this usage happening in native apps? No, as it turns out. 40% of Twitter’s traffic comes from mobile, of which 78% is from the mobile website. Mobile browser users increased over 300%. What people forget is that growth of native apps also drives growth of mobile web use.
In a nutshell, more people are going to be accessing your websites with a mobile device than with a desktop device….

Even if you have native apps, like Gowalla with a client for iOS, Android, Blackbery, etc., people will still post links in your native app and where does that take you? To a browser.
Anyway, it doesn’t have to be either a native app or a mobile web site. You can hedge your bets and do both… so you’re protected if Steve Jobs pulls the rug out from under you.

Jeremy Keith @ adactio.com

Via Jeffrey Zeldman.

[getImg id=”user-centered-mobile-design-lifecycle”]

Adapt.js: JavaScript Alternative to CSS Media Queries

Published: April 26, 2011

Adapt.js is a JavaScript library (or framework) that helps you design web sites for mobile devices:

For many developers that means using @media queries to selectively target the device screen size and orientation through CSS.

While the @media approach is a good one, it won’t work for every site. That’s why Nathan Smith, creator of the 960 Grid System, has released Adapt.js, a lightweight JavaScript library (894 bytes minified) that allows you to specify a list of stylesheets and the screen sizes for which they should be loaded. Essentially Adapt.js does the work of @media, but will work in any browser, even those that don’t understand @media.

… While using JavaScript to load CSS might seem a bit strange, even if you use @media queries you’re still going to need some kind of polyfill (usually JavaScript-based) to handle those browsers that don’t know what to do with @media rules.

Scott Gilbertson @ Webmonkey

How to Have Your @Media Queries and Eat IE Too

Published: April 12, 2011

Advice from Webmonkey about web design for mobile devices:

CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.

There are several ways around this problem. Since the main culprit when it comes to not understanding @media is Internet Explorer, conditional comments can load an entirely separate stylesheet for older versions of IE. But if you’re starting with a purely vertical layout (for mobile phones) and then applying your floats and positional rules for larger screens — which is the design pattern we recommend — that means you’ll need to handle older versions of other browsers as well.

Scott Gilbertson @ Webmonkey

Mobile Web Design Strategy

Published: March 25, 2011
  • Define your need for a mobile site
  • Consider the business objective
  • Study the past
  • Practice responsive web design
  • Simplicity is golden, but …
  • Single-column layout best
  • Vertical hierarchy, think collapsible
  • From “clickable” to “tappable”
  • Provide interaction feedback
  • Test your mobile web site

10 Key Considerations for Your Mobile Web Design Strategy

jQuery Mobile Alpha 3 Released

Published: March 22, 2011

The jQuery team reports:

We’re pleased to announce the third alpha release of the jQuery Mobile project. This release includes a number of bug fixes and enhancements to the original jQuery Mobile Alpha 1 and jQuery Mobile Alpha 2 releases.

jQuery Mobile Alpha 3 Released

Via Ajaxian

Mobile commerce: 25 essential tips

Published: March 17, 2011

Tips for tapping the mobile market:

  • Start with a mobile site
  • If you do opt for an app, provide the wow factor
  • Redirect mobile searchers to the mobile version of your site

See Econsultancy for all twenty-five items and more details

The iPadification of the Web

Published: February 1, 2011

Some thoughts from Peter Yared about how the iPad is reshaping web design:

Creators of Web content have poured considerable effort into reinventing their websites as top-down, gorgeously designed experiences for Apple’s tablet and other mobile devices, in the hope that what they give away on the Web might turn into something their audience will pay for as an app.

… There is no question that these new, “iPadified” sites look far better than their Web analogs. If anything, they look more like the mobile versions of websites. And since mobile sites are by definition focused and simplified, they are quite often better experiences. As venture capitalist Fred Wilson noted on his blog, sometimes companies should just use the mobile version of their site as their actual website.

Think about how Web design happens in the real world. Does anyone really care about your mission statement? In a groupthink-friendly marketing meeting, it gets tacked onto the homepage. And then a social-media expert recommends a Facebook plugin and sharing links for a dozen or so popular sites. Then a recommended-content widget to drive more pageviews. Sales wants more ad inventory. (Startups like BrightTag have sprung up purely to manage this mess.)

Against that tide of flashy flotsam comes the iPad. For the smaller screens of mobile devices, hard decisions have to be made, and the crap gets cut. Which raises the question: Why was it ever there in the first place?

Peter Yared @venturebeat.com

WordPress Mobile

Published: January 20, 2011

Various plugins are available to make your WordPress site mobile-friendly:

What do these plugins actually do? What is a mobile-friendly WordPress site?

1. Themes designed for mobile devices

— This is what visitors see when they browse the site

2. Admin panels for mobile devices

— These tools allow you, the WordPress admin, to write blog posts and do other admin tasks from your mobile device

Security Expert Warns of Android Browser Flaw

Published: November 27, 2010

Google is working on a fix to a zero-day flaw discovered by British security expert Thomas Cannon that could lead to user data on a mobile phone or tablet device being exposed to attack. Cannon informed Google before posting information about the flaw on his blog. ‘While doing an application security assessment one evening I found a general vulnerability in Android which allows a malicious website to get the contents of any file stored on the SD card,’ Cannon wrote. ‘It would also be possible to retrieve a limited range of other data and files stored on the phone using this vulnerability.’

Slashdot

Here’s a good assessment of the problem:

So let’s say you bought a Windows box. Maybe you got it from HP. Maybe you got it from Dell. Maybe from Sony.

Who do you expect to provide you with a patch when someone discovers a new Windows vulnerability? Microsoft, right? If it’s really serious it’ll probably pop up in the next Patch Tuesday. If it’s hyper-serious then it might come out three or four days after the vuln was announced.

That’s not the way it works in the Android world, annoyingly enough. Imagine if the version of Windows loaded onto that HP machine was a special HP version, full of HP customizations like a proprietary HP window manager and a proprietary HP web browser. MS can’t give you any patches because the HP customizations are a fork of MS’s source [code]; when MS does bugfixes, someone at HP has to take a diff of the new MS tree, merge it with the HP tree, and run it all through QA. Oh, and the store you bought it from? Some of them have their own variant source trees too, so the same machine bought from Best Buy rather than direct from HP has its own fork of the OS.

Now multiply this by a different fork for every damn model they sell. Oh, and because they only have so much money, HP/Dell/Sony/Best Buy/whoever typically only bother merging in the OS updates for computers they made in the last year. If you’re lucky.

Peganthyrus @ Slashdot