All posts tagged ‘Mobile’

File Under: Mobile, UI/UX, Web Basics

‘WTF Mobile Web’ Tracks Terrible Mobile Web Design

Sometimes the best way to figure out what works is to see what doesn’t. That’s the thinking behind WTF Mobile Web, a new site that tracks examples of terrible mobile web design and user experience. Whether it’s a “native look” that inevitably looks wrong on all but one platform or simply treating the iPad as a mobile browser, WTF Mobile has plenty of examples of what not to do when developing a mobile site.

WTF Mobile Web is the brainchild of developers Jen Simmons and Brad Frost who are careful to note that the point isn’t to be mean or pick on specific sites. In fact, perhaps the best part about the site is that, as people were quick to point out, it’s guilty of some of the very same things it’s calling out in other sites. Hypocrisy? Sure, but it also illustrates just how hard it is to get mobile right.

As Simmons and Frost write:

The problem is that we’ve all been doing this thing called Making a Website for a long time in a particular way. And now everything is changing. Sure some developers are resistant to learning new things, but most developers are interested, excited and willing. But this isn’t a problem that you can fix by just switching out which bit of code to use. It’s bigger than that. Content strategy, design, business all have to change. The fundamental way in which people work together to plan and coordinate the creation of a website has to change.

Perhaps the most important thing to keep in mind is that, to paraphrase developer Steven Hay, there is no mobile web, no desktop web, no tablet web. There is just The Web, which we view in different ways. Design for The Web, avoid assumptions about devices (like assuming the iPad is a mobile device) and please, stop with the “native” designs.

If you run across an example of bad mobile design you can submit it to WTF Mobile Web.

So how do you build better mobile sites? Well, WTF Mobile Web has a few links to get you started, including one to Frost’s Building a Future Friendly Web slideshow, which we’ve covered before. Webmonkey has also been covering mobile and responsive design for some time so be sure to read through our archives.

WTF? photo by Daniel Lobo/Flickr/CC

See Also:

File Under: Mobile, Programming, Web Basics

Build Faster Mobile Websites With ‘Adaptive Images’

Responsive design is no longer just something you’ll find on the portfolio websites of the designers and developers who pioneered the idea. These days using media queries to adapt to varying screen sizes is well on its way to being a mainstream design goal.

Head over to a responsive design showcase like Media Queries and you’ll find plenty of “real world” websites — like Opera or Arizona State University — using media queries to build responsive websites.

But while media queries are a big part of responsive design, they don’t solve every challenge the small screen presents. For example, many otherwise great responsive websites still serve full size images to mobile browsers. Many responsive sites use the max-width image scaling technique which dynamically re-sizes your image to fit the screen, but sadly that doesn’t downsize the actual image file.

Using the max-width trick neatly handles images on varying screen sizes, but, by itself, it doesn’t address the bandwidth issue. In fact, loading big images and forcing mobile browsers to scale them is the worst of both worlds — large image downloads and processor-intensive downscaling. And, not only are large images a waste of bandwidth for mobile users, with mobile data caps becoming more common, you may well be costing your visitors money.

A far better approach is to use the max-width trick, but also serve smaller images to smaller screens — that means less bandwidth and little or no downscaling. Mobile platform consultant Peter-Paul Koch has a nice overview of how JavaScript can be combined with media queries to swap out your mobile-size images for larger ones on larger screens. The developers at Filament Group refined this approach with the Responsive Images project.

However, as nice as the Responsive Images approach is, it requires maintaining two sets of images on your server. For existing websites with content management systems already up and running, and tons of images tied to existing content, it can be difficult and time consuming to go through and create a second set of smaller images.

The burden of an existing CMS led developer Matt Wilcox to take a different approach to the mobile image problem. The result is what Wilcox recently decided to call Adaptive Images. The Adaptive Images script works much like the Filament Group’s Responsive Images code, but Adaptive-Images manages its own image resizing so there’s no need to do anything to your existing website — just drop in the Adaptive Images code and you’re done.

There is, however, one other big difference between the two that’s worth noting — the Filament Group’s Responsive Images takes a mobile first approach while Wilcox’s Adaptive Images does not.

That is, if JavaScript is disabled, Responsive Images falls back to using only the small image. Adaptive Images on the other hand will fall back to the large image. While we generally suggest taking a mobile first approach, in this case the convenience of slipping Adaptive Images into an existing site outweighs the advantages of a mobile first approach. However, if you’re building a new site from scratch and your CMS can’t handle tracking separate image sizes, chances are you’re using the wrong CMS.

To get Adaptive Images up and running on your website you’ll need to have an Apache 2 server with PHP 5.x installed. For more info, head on over to the Adaptive Images website or you can grab the code from GitHub.

See Also:

File Under: Browsers, Mobile, Programming

Speed Up Your Mobile Site With the ‘Mobile Perf’ Bookmarklet

Speed is the most important element of your website. The best designed, most informative site in the world is useless if it doesn’t load fast enough for people to stick around. Nowhere is this more true than on mobile websites.

Testing mobile websites is something of a headache — there is no Firebug for mobile browsers, which means no YSlow or other profiling tools. True, you can load the site in desktop browser and profile it that way, but sometimes what works on the desktop isn’t necessarily working the same way in a mobile browser.

That’s why Google developer Steve Souders’ created the Mobile Perf bookmarklet, a handy javascript bookmarklet that you can use to test sites on your mobile devices. The bookmarklet is really just a set of links to other bookmarklets, but combining them all in one place makes life a bit easier.

The Mobile Perf bookmarklet contains links to Firebug Lite, the awesome DOM Monster, CSSess, Zoompf and Souders’ own SpriteMe and Page Resources. If you’ve been looking for an easy way to test website performance on the small screen, grab a copy of the Mobile Perf bookmarklet.

See Also:

File Under: HTML5, Mobile, Web Standards

W3C Offers a Guide to Building Mobile Web Apps

If you’ve been wanting to start development on a web-based mobile app, but don’t know where to begin, the W3C has you covered. The web’s governing body has released a set of guidelines and best practices for developing mobile web applications.

If you’ve already been keeping up with the latest in mobile web technologies, the guidelines probably won’t have too much new information for you. But if you haven’t already explored the rapidly growing mobile web apps scene, the W3C’s guide makes a good starting place.

The guide covers everything from the (hopefully) obvious, like minimizing the number of cookies, compressing your files and using CSS sprites, to less-well-known tips like using Fragment IDs or caching resources by fingerprinting resource references.

One thing to keep in mind is that this overview is intended for web apps, not just websites. If you just want to develop a mobile-optimized version of your website, check out our earlier post on the best practices for mobile websites.

If you’re building something much more complex and application-like, the W3C’s guidelines make a great starting point to get up to speed.

See Also:

File Under: CSS, Mobile

Slide Show Time: Rethinking the Mobile Web


Embedded above is an excellent presentation by Bryan Rieger.

It argues for a mobile-first approach to web development — by building for small screens first, then using @media queries to “size up” the experience and adapt your content on the fly, you can make sure people see the best version of your site for their particular device. It makes the most sense on the mobile web, where viewports and browser capabilities vary widely, and where (as Rieger points out) our definition of what exactly is a mobile device remains open. It’s an extension of the old “progressive enhancement” approach from the first decade of the web.

There are also some great data breakdowns about devices and browsers at the beginning. The takeaway: We’re all developing for Mobile Safari and Android, but most of the world is still using something far less advanced to visit your site.

Of course, the browser audience will vary based on the content — here at Wired, most of our mobile visitors use iOS devices, and the bulk of the rest use Android. But for a non-geeky site, things will skew more towards mobiles with clunky browsers.

140 slides, takes 10-20 minutes to flip through. Best viewed in Fullscreen mode.

See Also: