This morning, after blearily checking my phone for news updates, I saw that most of the news on the feeds that I most read were dedicated to mobile devices. Irony is delicious on a Monday morning.
However, mobile devices are where it’s at, so to speak, and to ignore optimization for mobile devices is a sure way to take oneself out of the running when it comes to branding, marketing, communications - you name it.
One of the first things you should do when presented with the challenge to mobile-optimize your website is run your site URL through the W3C Mobile OK Check. This site is a great tool to help determine how wonky your website will appear on various mobile or tablet devices and can then help inform next steps in what you can do to help alleviate said wonkiness.
Some other best practices that might be right for a website are:
Liquid Layouts: most websites are built on the concept of “fixed-width”, meaning the width of the site is determined by a fixed number of pixels based on general website guidelines or best practices. The most common width a standard website bases itself on is 960px (pixels). This is based on the idea that most browser screens will be of the widescreen variety and as such would need a larger website base. However, a user is no longer limited to a desktop screen - they have laptops, tablets, smartphones to contend with as well. And you want to make sure that your website looks respectable on each device. Cue liquid layouts. Sitepoint provides a fantastic series of articles on responsive web design, but in a nutshell a liquid layout is essentially your webpage auto-sizing itself to match the browser width that it is viewed on. Your developer can update the HTML or CSS code on your website to add this functionality and you’re one step closer to optimizing your website to “look” better on different screens. Caveat: just because your website fits the width of the screen that it is being viewed on, doesn’t mean you are enhancing the user’s experience. If you have a content-heavy website with lots of drop-down menu’s and links to multiple pages, simple resizing might actually hurt your end-user experience.
One Column Layouts: if you have the budget and the time to overhaul your website and make it a wonderful user experience on websites, mobile devices and tablets - revising your branding a layout to a one-column format is a great solution. What this means is that instead of multiple pages, drop-down menus and sites-within-a-site, your page is now just one long scrolling column with links to different sections either on the top of the page or throughout. I personally love this format because it’s simple, clear and it forces company’s to think about a story-arc within their site, i.e. why should a user keep scrolling? What’s the story here that they will be engaged with? What content is really relevant? And finally - humans are visual creatures, a scrolling one-column layout allows you to play more with design and visuals versus lots of links and drop-downs - it actually promotes engagement, which in the end is what you want your website to do.
Responsive Design versus App: let’s face it, apps are sexy and exciting. They allow for a richer user experience on mobile devices and allow to really focus content and direction versus a regular website. There is also a stronger “call to action” when it comes to apps - most users know that once on an app, they will be expected to do something whether it’s checking the weather or paying a bill or buying that perfect ceramic baking dish on an ecommerce site. Here’s a neat infographic from BiznessApps that speaks to this particular decision:
Mashable also has a great article that speaks to this particular decision. The one major factor that every company needs to keep in mind when thinking about developing an app is cost. Apps are not cheap, but if the financial investment is outweighed by potential consumer interest and engagement, not to mention conversion to actual dollars it is definitely a route worth exploring.
And who says that irony only needs to be tongue in cheek?