It's time to make your web site mobile-ready

[Dan Robinson]

If you have a web site with a layout width of greater than 320 pixels (basically any site designed since 1994), you might be shocked to realize that right now, your site is essentially 'broken' for half or more of your visitors. Users on iPhones and most Android phones have to scroll sideways back-and-forth constantly (or zoom in and out) to read the text and view the images. Even though I've been doing mobile versions of sites for clients for years (I work in web development), it somehow never occurred to me to think about my own sites. I came to this realization late last year as I watched my mobile traffic numbers climb over 40%. I knew I'd have to redesign, but the monumental nature of the task made me procrastinate. Finally, as I watched the mobile percentages consistently climb over 48% early this summer, I knew I couldn't put it off any longer. In August, my site's mobile viewership peaked at 70% of my traffic:

The lower left section there is all 'Samsung' devices. iPhones all show up as the same type of phone in Analytics, while the different Android variants show up separately. iOS and Android traffic is about equal. If you have Google Analytics set up on your site (it's free), you can see this data by going to Audience > Mobile > Overview.

There are two ways to tackle the problem: 1.) Make two or more versions (or style sheets) of your site, then use scripts to serve the right version for each user depending on their horizontal screen dimension; or 2.) Create a single design that fluidly 'adapts' to different screen sizes. There is no easy way to optimize for mobile. You will have to compromise no matter which way you go, and both will be a lot of work if you have a large site. Option #1 allows you to keep your nice traditional desktop layout that's worked for many years - but you'll be maintaining multiple versions of the same content, and since there are a wide variety of screen sizes, it's almost impossible to make designs that will work perfectly in every one.

I thought I'd share what implementation option I settled on and why. I chose option #2, a design that adapts 'on the fly' with text that wraps fluidly depending on screen size, and images that shrink to fill the screen on smaller widths. This allows me to maintain only one version of the site. The drawback with option 2 is that you can't use some types of content that don't work well on mobile devices, and you can't use some mobile-standard functions because they look awkward on desktops. With option #2 (adaptive designs) you will need to avoid:

- drop-down navigation menus
- small text (including in navigation and on images)
- large tables
- fixed sidebars
- large right or left-aligned images

Essentially, you need to keep in mind the phone & small tablet users, who will be using touch to navigate. Your links need to be as large as possible so the user doesn't have to pinch/zoom to click on them.

Some other tips:

- You can use the CSS width:100% and max-width properties together to make your images shrink to fill the screen on phones, yet they won't expand bigger than their actual size on a desktop with a large monitor.
- I use a single-column content cell with a range of 320 to 1000 pixels.
- You can use inline-block divs to make 300-pixel wide columns display side-by-side on desktops, which will then stack on top of each other on phones.
- Use the top navigation for only the top four or five sections (again, no drop-downs as those are not very mobile-friendly), then put more detailed navigation at the bottom (this allows phone users to click right over to another page without having to scroll all the way back to the top).
- Test on multiple devices. Desktop browsers are good for simulating various sizes of screens when the window is sized down manually, and I've found this is a good enough estimate of what a phone will show.

 

[Shane Adams]

Seems to me that an end user having to pinch down or spread up the screen size (which takes a second or less) is a lot more acceptable than me having to spend hours to redesign my site for user convenience. If I had traffic at all anyway, I might consider it, but for (what I assume is) most of us who just have a site to share our work with the world, there's only so much legwork I'm willing to do so every device can have a half-second quicker ease of access.

I don't mean this to sound harsh or snarky, because I access sites on my phone daily like everyone else, and I don't mind taking an extra second here or there to pinch or spread. I figure that's why those devices have that feature.

 

[MClarkson]

I really hate most mobile websites. Most of them either look terrible, remove most of the functionality of the page, or both. I'd rather designers leave the layout the same, and let me scroll around. Its much better than way.

 

[Dan Robinson]

Just to clarify - I'm not saying make a stripped-down version of your site for mobile devices, I'm suggesting making your entire site mobile-friendly to be easier on smartphone visitors. In recent years, the status quo was for companies to make these bare-bones mobile sites just because they had to. The industry is getting away from that now, due to how much mobile access has advanced. Now, the *priority* is the mobile site.

Here is the result of applying adaptive design - you can resize your browser window all the way down to 320 pixels to see how it would look on a phone (or just access it on the phone). Nothing on the full site is lost, and the site still displays on a desktop the way I want.

http://stormhighway.com/types.php

Maybe it's a matter of opinion, but scrolling back and forth constantly (for each line of text!) to read a fixed 1000-pixel wide web page on a 320 screen is like nails on a chalkboard to me. I couldn't stand the thought of more than half my readers having to do that.

If your site is a single-column layout, mostly text with a few inline images (a blog), making it mobile-friendly is simply a matter of applying this style to the main table cell or div:

style="width:100%; max-width:1000px; display:block;"

And boom, it's done. Like I said, if your site is more complex, you're looking at a lot more work. The way I see it, it's something better done sooner or later. I think I waited way too long to do it myself, given that my mobile viewership was at 40% last year.

I work in the industry (since 1998) and I'm just sharing what the trends are and trying to help others out.

Edit - added the display:block to the style (needed for the Safari browser)

 

[Skip Talbot]

Seems to me that an end user having to pinch down or spread up the screen size (which takes a second or less) is a lot more acceptable than me having to spend hours to redesign my site for user convenience.

I totally agree, and wouldn't bother myself to rewrite my personal chase page just to cater to the few smartphones that make it onto my webpage. These designs and tips are great to keep in mind when or if you do a site overhaul though. I overhauled mine a couple years ago. I was using just basic HTML, tables and images to force the site's layout. It was very much fixed in the way it was presented. When I overhauled the site, I dumped the tables for divs and floats and used CSS to apply a consistent and adjustable format across the entire site. It was a bit of setup work, but a website overhaul is a project I'd do only every few years in the off season when I'm looking to update my stuff.

Even though I didn't design it for that purpose, I noticed my phone does a pretty good job rendering my personal site. It gets rid of the divs that are just borders/background space which appear on my desktop browser, and only presents the inner most section with the content. In landscape mode, the text is perfectly legible and the images look great. The content scales to fit the screen's width. No horizontal scrolling or zooming once you're reading a log.

I wouldn't rewrite a site just to accommodate visitors with tiny screens, but if you ever update the layout or design of your site, Dan has some great suggestions you could employ.

 

[Dan Robinson]

I wouldn't drop everything to redesign your site now if you don't have the time - like Skip said, whenever you get around to doing a re-do, keep it in mind. But you might be surprised at how much mobile traffic you're already getting now. For most of my web clients, it's at least 30 percent. My site's at 50%-70%. The only exceptions are industrial company sites that are primarily being accessed from office cubicles.

There are some good bulk find-and-replace tools that are great for making mass changes to many pages at a time. Also consider implementing server side includes when you do your redesign. You can put the header/footer/navigation into include files so that when you want to make a global change, you just change one file.

Some of the newer CMS system versions (Wordpress, etc) are including mobile designs built in so you don't have to worry about doing it manually.

 

[Todd Rector]

Expanding a bit on adaptive design:

One of my ongoing projects at work (web administrator for the State of Iowa) is helping our agency websites incorporate "responsive" design (also known as "RWD - Responsive Web Design), which uses CSS3 media queries, flexible images and fluid theme layouts which can adapt/reflow to whatever device it's being viewed on. This might mean a desktop viewer will see a several-column layout and an iPhone user might only see one, but they will always see USABLE content from the same website, formatted in a sensible way; we don't have to synchronize content with a completely separate "mobile friendly" site or try to detect what browser du jour you are using and redirect based on that.

Many of the popular content management systems (Drupal, Joomla, Wordpress, etc) have made RWD easy to incorporate into your site by having dozens if not hundreds of available responsive themes, so if you are using a CMS for your website, you might be just a simple theme change away from having your site look great to 99 percent of your viewers.

 

[Adam Lucio]

If your site is through wordpress, theres a plugin you can install that converts it to a mobile look when someone visits it from a mobile device. On top is how my site looks when visited on a desktop, and the bottom is a screenshot from my phone of the mobile version no work on my part other than installing the plugin. You can access all the menus by clicking the 3 bar icon on the upper right. The only parts that seem to be lost are the ads and things on the right sidebar, but all the meat is there and easy to view, and thats what counts.

 

[Dan Robinson]

Here is the code to make a two-column layout that "stacks" on a phone. In other words, here you get a right-hand sidebar on a desktop, then on a phone, everything stacks into one column (the sidebar shows up underneath the main content). I find that in practice, the table wrapper for these works more consistently across all platforms than a div wrapper.

<table border=0 cellpadding=0 cellspacing=0 style="width:100%; max-width:1000px;"><tr><td><div style="float:left; width:100%; max-width:600px; display:block; margin-right:3%;">Put your main content here</div>
<div style="float:left; width:100%; max-width:300px; display:block;">Put your sidebar nav/content here</div></td>
</tr>
</table>

That's just the basic code - you can of course tweak it how you want. You can have as many of the left-floating div columns as you want. I have four in my site footer for all the navigation - they display in four columns on desktops, then stack into one column on phones. All the content is there no matter what device you are on.

 

[Dan Robinson]

Just a quick update to this thread and to the code I posted above. Now that I've done about 10 or so of these sites in actual production, I have found that display:inline-block works better than left floats. So, a multi-column adaptive layout that will stack on a phone is as follows:

<table border=0 cellpadding=0 cellspacing=0 style="width:100%; max-width:1000px;"><tr><td><div style="display:inline-block; width:100%; max-width:550px; margin-right:0.5%; margin-left:0.5%;">Put your Column 1 content here</div>
<div style="display:inline-block; width:100%; max-width:200px; margin-right:0.5%; margin-left:0.5%;">Put your Column 2 content here</div>
<div style="display:inline-block; width:100%; max-width:200px; margin-right:0.5%; margin-left:0.5%;">Put your Column 3 content here</div></td>
</tr>
</table>

Max-width can be changed to whatever you want, that should be the width that each column will show for desktop users. You can also add as many columns as you want.

By the way, Google now causing non-mobile optimized sites to display lower in searches performed on mobile devices. In other words, if you have a fixed-width desktop site, your site is going to be ranked lower in searches for users on phones and tablets. Again, mobile is taking over big time, that could mean a big traffic drop. https://developers.google.com/webmasters/mobile-sites/?hl=en

If you haven't already done it, I'd recommend getting Webmaster Tools set up for your site. It doesn't cost anything, and there is a lot of useful info there. (WT is separate from analytics).

 

[Dan Robinson]

Couple additional important things. You need to have this meta tag in the header of your site for all of this to work properly:

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">

Also - here is the code to make an image adaptive:

<img src="/yourimage.jpg" style="width:100%; max-width:700px;">

Change 700 to whatever the horizontal dimension of the full-size image is. You don't need to worry about the height attribute, all browsers will scale it properly.

Again, the max-width attribute ensures the image will not expand beyond its actual size on a desktop screen, while the 100% width attribute tells it to fit the screen on anything smaller than the max width.

 

[Dan Robinson]

I'm bumping this thread because Google's "non-mobile friendly penalty" supposedly goes live tomorrow.

http://www.forbes.com/sites/parmyolson/2015/04/20/googles-mobile-search-ranking-showdown/