Responsive design: The basics are important

Ever have someone complain about your Website not working well on a smartphone? Anyone every try to tell you need a separate Website to achieve this? Run into a little sticker shock when your agency gave you a price?

Well there is a solution for getting your site optimized for mobile users WITHOUT building a separate site. It’s called responsive design, and has been in wide use for a few years now. Quite simply, it allows your content to flow into a custom layout based on what the user is viewing it on. Customer has an iPhone, they get a simplified layout that auto rotates based on their orientation. Same site on a small laptop? The layout now sticks to a horizontal orientation. All of this is done with style coding with no effect on your content. Sites with content management systems work exactly the same way, with no noticeable changes to your admin system.

Sounds simple, right? Well, not quite.

When done correctly, everything happens behind the scenes, allowing you to manage your Website as always. But for this to happen, it takes some serious restructuring of your layout, multiple styles and a LOT of testing. Not an easy to task to get right, and if done poorly, you could end up with a site that’s fine for some users, but unreadable for others.

So what makes set up so complicated?

First, responsive design works by detecting the user’s screen size, and showing them a layout that’s optimized for them. Simple enough, just do a size for mobile phones, one for tablets, and a large one for desktops? If only it were that simple.

Phones and tablets may look relatively the same as far as physical size, but their screen resolutions differ quite a bit. Starting with the simple platform, Apple, there’s the iphone 3-4, iPhone 5, Ipad 1-3, iPad4 and now the iPad mini. That’s five separate resolutions just with that one brand. But wait, we forgot when user’s rotate their screens? That simple action just doubled the number of screen sizes to 10 :-(

So what about the Android platform from Google, Samsung, and others? Another 10 screen sizes? Maybe 20? Keep counting.

Let’s not also forget notebooks, those cute little micro laptops that were all the rage way back in 2009. Still a lot of them out there, and their screen sizes vary as well.

So does my designer need to set up 50+ screens for my Website?

Well, not really. A good responsive designer needs to be well skilled in CSS (cascading style sheets) and flexible layouts. This allows the screen size to flex based on the user’s screen size and orientation. Not just a simple zoom feature, but rather a dynamic way for elements to move to an optimized location and size for the user. So for example, We look at a horizontal layout on one of those giant Galaxy 3 superphones, which shows the content filling from size to side. The same page on an iPhone 5 would look similar, but have less words in the content area for the column would be narrower. The actual layout code would be the same, but the code tells it to fill the user’s screen.

So why not just tell the page to fill the screen the same for everyone? Cause what works for a laptop doesn’t always work for a tablet which almost never works for a mobile phone. With a tablet, you’re using a mouse to make precision actions on text and buttons. But on a touch device, your 2 pixel mouse pointer is now a stubby finger. Clicking on 10 pt. type with a finger is far from an easy task.

For touch devices, you need to rethink your navigation and links to work with fingers. This means larger, easier to touch nav, links and buttons. Fortunately, responsive design allows us to identify the user’s touch device, and send them a layout with big, happy buttons. So far so good, until we get to mobile devices.

As expected, mobile phones have the smallest physical size screens that your user’s will have. But this doesn’t mean that the screens are the lowest resolution. Take the iPhone 5; it’s screen resolution is 1136 pixels wide. That’s wider than most of the smaller tablets on the market, and even wider than some old laptops! But just taking a normal layout and shrinking it down will result in buttons, links and even type that’s unreadable on it’s 4 inch screen.

In the case of the iPhone 5 (and other smartphones), we need a larger physical layout to make it practice to read and use. In most cases, we also have to reduce the layout to one main column, even though a two column layout would work just fine on a tablet. In case of mobile phones, we need code that reads more than just the screen size, we need it to read the device type, and give the user a simplified one column layout. And let’s not forget the touch friendly buttons and links.

So is this whole process something I can adapt to my current site without a redesign?

Well, yes and no. It really depends on the complexity of the design and amount of content. For example, if you have a complex layout with three columns, what happens to columns two and three one the user’s screen is smaller? Should they be left out, or do we have to merge it with the main column, and will the content still make sense? And what about photos, so we have important images that need to be on screen side by side? Not always possible with a smartphone.

More times than not, a new responsive design requires a rather major re-design/re-structure of your current Website. The more complex the layout, the less likely it’ll translate well. I’m not saying it’s impossible, just depends on how flexible you are with the content, and the needs of the end user.

When developing a new responsive design, we have to put content in order of priority, thinking small then working our way up. Critical text needs to be separate in the content management system so we can publish it for smartphones, while lesser content goes to tablets, and possibly less critical content goes to full size layouts. A lot of this is a big variable, depending on your business/communication needs.

In some cases, complex content is just not needed for mobile devices. As much as we think the world is going mobile, few people are going to read a three page technical part description with diagrams on their mobile phone while on the go. Those users are just going to want the basics, maybe a link to a video to explain and a way to email the info to their desktop computer. In this case, we can set up a separate content block for smartphones only; giving them simpler, easier to read content that’s practical for their device.

What if i have lot of important graphics or demos done in Flash?

Well Flash is clearly out of the question. Apple’s iOS devices haven’t used it since day one, and there are no logical translators out there (despite what some say). Adobe has also discontinued Flash support for Android, for it basically was garbage. In cases where you have something in Flash, it’ll need to be converted or redone in HTML5, video or jQuerry. This can be quite time consuming, depending on what it is.

For images, this is a bit easier, but still needs some planing. Obviously a small screen full of tiny images isn’t too practical for a mobile user. Doesn’t mean that images are out, just that they need to appear one at a time. Often, it’s more practical to give the user the option to link to a full screen version, or a slide show.

So does this mean I can’t get my Website converted to mobile for $500?

Unless you have a simple, text based, one column site, the answer is no. It’s a complex process that involves many variables; too many to list on one blog. More importantly, it’s not something for the inexperienced. And getting it wrong, means that your site will turn from an asset to a liability.

If you have a Website that’s working well for you, but really needs to be optimized for the mobile world, just give us a call. We have the expertise to know what’s needed to optimized your current site, or how to develop something simpler for mobile users. Remember, not everyone with a mobile device needs to read all 5000 of your product descriptions while standing in line at Starbucks; sometimes it’s just a matter of knowing what’s practical for the user.

 

 

Facebook Twitter Linkedin
This entry was posted in Mobile. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>