The UX Critic: Weather.com’s mobile web access takes huge step backwards

In mid January, Weather.com dropped their mobile website entirely. All previous links to the mobile site now redirect to the corresponding page on their main site. To start off, I do want to mention one key tip that Weather.com handled well.

Tip #1: If you switch domains, subdomains… or otherwise change the URL of a page, you should redirect users from the old URL to a new one which provides the same basic content as the old. Don’t just redirect them to the home page, or even worse, fail to redirect them at all.

The mobile web

The core issue with the next tips is: How to best handle mobile web users. Previously, weather.com offered up a m.weather.com version of their site that was designed specifically for mobile. The content was focused. The code loaded fast.

Responsive web design is very popular. In many cases it is the right solution. Weather.com highlights a handful of pitfalls with responsive design. From a user’s perspective, their previous solution – a dedicated mobile site – was far superior than the responsive site. Continue reading

Tips for Using SVG in Mobile Websites

A few months ago I designed and helped build a mobile website. A goal of mine was to create a fast loading, resolution independent interface. SVG has been around for over 10 years, but using it is still quirky. For example, Google decided to save 1MB by excluding SVG support from Gingerbread, and that has proven to be a painful decision for mobile developers.

While there are more complicated workarounds, I tried to make things as simple as possible. Here’s a couple tips I learned that I didn’t find elsewhere.

Scale down background images. Although you can set a SVG image multiple ways, if you set it as a background image, the default android browser will not properly upscale the images. So make them large in your SVG file, and shrink them down in the UI. Fortunately, increasing the size of the image(s) does not increase the file size.

Some have suggested changing the SVG files internal dimensions from px to a realtive value such as ems. However, in my tests this doesn’t help with the default browser in Android, even in Jelly Bean. Continue reading

Building Websites for Mobile is Very Important – A response to: “Time to Stop Building Mobile Websites”

(The following is a response to a guest blog post on Forbes.com titled “Time to Stop Building Mobile Websites“)

When I first read the headline of the Forbes guest post, I was puzzled. It’s akin to someone writing an article titled “The Titanic Never Sank.” It’s an inaccurate, sensationalist headline. The article also contained a fair amount of false information. The core message is good, but unfortunately the author made some extremely inaccurate claims when trying to prove his point. I’m going to address those points – both their fallacies and core facts.

Step 1 in building your mobile website is to determine your target audience

Focusing on mobile as a separate channel is a distraction that turns the platform into an either/or proposition that hurts results.

First off, it completely depends on the goal of the website. Many successful founders will even suggest some companies focus on mobile first and not even bother with a desktop presence. Secondly, some websites have functionality and flows that simply do not translate well to mobile. Third, it’s simply not feasible for larger websites to quickly rebuild from the ground up to offer a mobile presence via a responsive site. In the short term, providing a specific mobile version is suitable while the main site is overhauled. Claiming that not building a responsive site “hurts results” is an extreme overgeneralization that should simply be ignored.

The most important aspect of building a mobile website

“Mobile” as a separate marketing channel existed for about six months – somewhere back in 2009. It had an extremely short lifecycle because technology and user behavior caught up, waved a cheery hello and then raced right by.

I’ve been building mobile sites since 2001. I have no clue where the 2009 date comes from, but it has nothing to do with mobile sites not previously existing as a “separate marketing channel”.

The mobile and traditional Web separated initially because of slower processors, slower connection speeds and lousy displays. That distinction is disappearing – fast. […] The only difference? Screen size. My phone still has a relatively small screen.

You need to think about form factor in your marketing, not mobile versus desktop.

That was true, back in 2001. As far as modern smartphones go, that hasn’t really been the case for years. There were methods to deal with slower processors, connections and screen sizes… all since at least 2001. In many cases, the displays on smartphones are higher quality than those on desktop computers (eg IPS vs TN panels.) Mobile devices clearly have smaller physical screens than most desktops or laptops.

However, the biggest distinction isn’t even touched on – usability. How a mobile device is used is vastly different than a desktop computer. The idea of “Think form factor, not mobility” is very misleading at best. Again, one has to look at the target for the site – will they be using the site on their smartphone while sitting at their desk? Most likely not. They will be using it as a mobile device. Their connection may not always be great, the lighting conditions may not be as controlled and the environment in which the site is used may be much more chaotic. Because of this, how data is passed and stored needs extra care. How much contrast you give a design is also important, as is font, graphic and button size to name a few. It’s not just about the size of the screen, it’s about how and where the site is used. Continue reading