Congratulations! Your brand new, shiny, top-of-the-line website is complete! So, how does it look on the iPhone? Or an iPad? Or … yes, a Blackberry?
One of the toughest design challenges in recent years has been how to overcome the seemingly countless display sizes and resolutions offered by an endless array of devices. From smartphones to tablets to “phablets,” it’s safe to say that people are viewing websites on mobile devices now more than ever. In fact, 2014 may be the first year where mobile browsing overtakes desktops and laptops as the top device for surfing the web. What that means is that a website has to serve several different masters depending on where it’s viewed: it needs to be readable and concise on mobile devices, robust and open on desktop and tablets, and gorgeous no matter where it’s viewed. Easy, right?
Like it or not, the idea of having a mobile-friendly web presence is no longer a luxury, but a necessity.
Customers expect it, and, to a greater extent, Google is more likely to rank your site higher if it’s mobile-ready. To traverse the changing web, you can go one of three routes when designing/developing websites: dynamic, responsive or parallel.
Dynamic Sites: The Icebergs
A dynamic site sniffs out the device you’re on, and serves up only what the site needs you to see. This can be done using different templates, or by serving you different pages depending what you’re viewing the site on — we lovingly refer to it as “site-lite.”
Responsive isn’t easy. It requires extra design time and extra planning to determine where the views change and alter. But that time will pay dividends when you have a site that looks great on any device.
It’s all the same content, mind you, but a curated mobile experience tailored to the device. That said, more times than not, dynamic sites are usually meant to serve on of two views: Mobile and … everything else. For some, this limitation is exactly what the doctor ordered. For others, there’s always …
Responsive Sites: The Transformers
Responsive websites adapt and reconfigure based on the size of the window you’re viewing it on. Behind the scenes, the site is looking at the size of your viewing area, and assigning “breakpoints” to customize the experience for you. It’ll hide certain elements, show others and even completely change the navigation menu. It will suit your needs, but at the price of time and architecture.
Responsive isn’t easy. It requires extra design time and extra planning to determine where the views change and alter. But that time will pay dividends when you have a site that looks great on any device.
But, if you’re feeling nostalgic, there’s always…
Parallel Sites: Why Develop One Site, When You Can Develop Two?!
There was a time — let’s call it the early 21st century — where developers had to account for people viewing sites on mobile devices for the first time ever. It was scary and new, and an all-around headache.
So, alongside a regular website, developers would whip up a second mobile site that would get loaded based on the device. Often, that site would contain different content, a different navigation and different images.
Essentially, it’s double the work, double the updating and double the size of a regular site. Oh, and Google is not a fan of duplicate content on your site, so you run the risk of being blacklisted (it sounds bad, and it is). It was a nightmare then, and it’s a nightmare now.
Which Is the Best?
Obviously, different websites require different information to be displayed on mobile view. If the site is small and lightweight, content-wise, it makes sense to display all, or most of that information, on mobile. But, if the site is more robust, and your primary goal for your mobile traffic is to entice the viewer to contact the service, you may want to just display the relevant email, phone number, address, etc.
Here at Altitude, we’ve developed both dynamic (Iceberg) and responsive (Transformers) websites, depending on what fits the needs of the client.
Recently though, we sat down to write the functional spec of a responsive view of a particular site. We started to remove elements from the homepage for mobile breakpoints, until we were only showing the necessities for that view. Now, usually, we’d go dynamic for that view, and use a different template, but we found it much more efficient to develop the site as responsive. The scalability of the responsive framework will make it easier to maintain the site, and to potentially hide or show more elements should the client desire to. Yes, it’s more work up-front, but the benefits greatly outweigh the headache of carefully scripting the architecture.
The bottom line? Nine times out of 10 we advocate for the responsive site.
Why? Because creating for a fluid grid ensures that, no matter what crazy sizes phone and tablet manufacturers dream up in the future, whatever is developed today will be able to adapt and maintain a seamless viewing experience. And while it sometimes feels like shooting at a moving target, we’re more than up to the challenge.
