5 Quick Ways to Make Your Site More Mobile Friendly

by on 28th February 2012 with 6 Comments

screenshot

If you’ve ignored mobile platforms in the past, it can be intimidating to finally make the jump and begin to support mobile browsing on your existing sites. There’s so much to learn, a million techniques to choose from and a limitless amount of work that you could potentially put into existing projects.

A question that designers and site owners alike always want to know is, “How can I quickly add mobile support?” Sometimes, you don’t have the budget to start from scratch and yet still desire a modicum of mobile goodness. Today I’ll walk you through five things that you can do to make your site more mobile friendly.

This article is part of our series on “looking beyond desktop design”, brought to you in partnership with Heart Internet VPS.

Use a Fluid Layout

screenshot

Fluid layouts have been around for years now. Long before responsive design as we know it today came along, several web designers and developers looked to this technique as the solution to the problem of multiple viewport sizes.

.someColumn {
   width: 30%;
}

Creating fluid layouts is fairly easy, all you have to do is drop static widths in favor of percent based widths in your CSS. So instead of column with an expressed width of 350px, you might set it to 30%. This width setting will automatically take the size of the viewport into account and set the width to 30% of that total. So if your browser window is 900px wide, the width of the column will be 270px.

So how do you pull this off in the wild? The trick is to understand the requisite math. You know you’re starting with 100%, so to pull of say, a five column layout, you might be tempted to set each column to 20% width (20 * 5 = 100). However, this would result in your columns filling the entire available width with no space in between them. You’ll typically want to add in some margins, which will eat up some of that width.

What you need to do is figure out how much margin you want applied to each column, then multiply that times the number of columns to discover the total margin. Finally you divide the columns into whatever is left over. I usually set something up on Instacalc to figure out all the numbers for me.

screenshot

Here you can see that I’ve set up a 5 column layout with 4% margins on each column (two on the left, two on the right). Click on the image above to go to this calculator where you can tweak these numbers yourself. Once these two values are entered, the rest is figured out for us.

Four percent margin times five columns equals twenty percent of our width for margins, leaving eighty percent left over for columns. Eighty percent width divided by five columns equals a sixteen percent width per column.

screenshot

No matter what size the browser window is, these proportions will be maintained.

Do It With Sass

screenshot

If you want a way to set this up easily in your CSS, you could use Sass to figure out all the math for you. Here’s a mixin that performs all the necessary operations, you simply pass it the number of columns and the margin for each column.

@mixin columnFix($columns,$margin) {
  $totalMargin: $columns * $margin;
  $totalContent: 100 - $totalMargin;
  width: $totalContent / $columns;
  margin-left: $margin / 2;
  margin-right: $margin / 2;
}

To implement this mixin, you use an include statement followed by the name of the mixin and the parameters we just mentioned. Here’s an example that automatically distributes four columns with a 4% margin on each column.

.column {
  @include columnFix(4, 4%);
  float: left;
}

The compiled CSS places a width of 21% on each column with a 2% margin on the left and right sides. This really shows off the usefulness of preprocessors like Sass and LESS.

.column {
  width: 21%;
  margin-left: 2%;
  margin-right: 2%;
  float: left;
}

Use a Framework

screenshot

If you’re cautious about building your own fluid layout from scratch, there are lots of CSS frameworks available that do all the work for you. Have a look at each of the following options, some of which even take care of media queries for you.

Toss In A Single Column Media Query

These days, my recommendation for mobile friendly sites is to go completely responsive. This allows you to create a single design that flexes and adapts to different viewports, which ensures that your site looks good on almost any device. This solution is elegant and simpler to implement than you might imagine.

That being said, you’re still going to run into several challenges when you attempt a fully responsive design. You have to wrap your mind around a completely new way of looking at web design and optimize your site at several breakpoints.

In the real world, you might not always have the time and budget to focus on a complete responsive overhaul. Perhaps even in the long run you’re planning a brand new responsive design but you want to at least give your current site a quick boost to make it look better on smaller viewports.

One solution is to serve up a single media query that essentially puts 100% width on your columns and containers. Reduce your browser window size and find that point where your design is no longer very useful, then toss in some basic styles to fix it:

@media only screen and (max-width : 700px),
only screen and (max-device-width : 700px) {
	.container, .mainColumn, .footerColumn, {width: 100%; margin-left: 0;}
	p {margin-bottom: 20px;}
	img {max-width: 100%;}
}

As I’ve done here, you’ll likely have to adjust a few other things in addition to setting the column widths to 100% just to make sure everything looks nice with this new layout. Using this technique, your default layout will be served up to larger screens and will reflow to a single column when the viewport becomes to small to accommodate the original design (700px in our example above).

I recently demonstrated this technique in a previous article with the following simple layout. Here’s the design at a large size:

screenshot

On smaller devices we don’t bother with tons of changes but instead simply use the code snippet above to create a single column of content.

screenshot

Add The Apple Touch Icons

screenshot

This one is a little iOS-centric but it never hurts to tailor to custom platforms where possible. It requires a minimal effort and makes your site much more prone to be kept on an iPhone/iPad user’s home screen (especially useful for web apps).

Safari on iOS allows users to not only bookmark a page in the traditional sense, but also place it next to all of the other icons in the home screen grid. To ensure that the icon that Safari grabs is formatted properly, it’s best to create your own.

How To Implement The Icons

There are currently three different screens to account for with Apple devices: iPad, iPhone 4 and other older iPhones. The appropriate sizes for these are 57px square for old iPhones, 72px square for iPads (version one and two) and 114px square for iPhone 4 and newer. Keep in mind that the iPad 3 will likely require a 144px square icon if the rumors about the resolution doubling prove true.

Here is the code that you’ll need to include in the head section of your HTML file.




You can add a startup screen to your web app using a very similar method. Check out the official documentation for more information.

Special Effects

We’ve already gone over the sizes for each image, but there’s more to consider. Each icon that you create should be square with hard, ninety degree corners and contain no transparency or shadows. The iPhone will automatically round the corners to the appropriate radius and apply the default gloss effect.

Tip: Add “precomposed” to the filename to skip the glossy effect. Example: apple-touch-icon-precomposed.png.

Watch Your Hovers

screenshot

This is a fairly generic piece of advice but it’s something I always encourage beginners to consider when designing mobile websites. For desktop web design, I tend to use hovers quite extensively and occasionally go beyond simple visual hints and actually use them to trigger some functional event.

Think about how this event will transfer to mobile, touchscreen platforms. Suddenly, there is no hover. You’re either tapping on an item or not, there’s no in between as there is with a mouse. Does this mean that you shouldn’t use hover-based functionality? Not at all, just remember to make sure that your site still functions perfectly on a mobile device.

This doesn’t always require much work. Ultimately, I encourage you to perform tests wherever possible to really get a feel for how your site will work. For instance, I recently published a tutorial on creating an expanding navigation menu that slides open on hover. I instinctively thought that the menu would be useless on an iOS device since there’s no hover event, but it turns out that the iPhone and iPad automatically translate it to a touch event, leaving the menu perfectly functional.

Never bank on this though as it might not always be the case that your hovers translate well to mobile platforms. When they don’t, try offering up a custom media query or some mobile-only JavaScript to compensate.

Use Mobile Friendly Technology

screenshot

The mobile web has presented a number of compatibility challenges for designers and developers. The main item that gets the most press is that iOS simply refuses to support Flash, but it doesn’t stop there. The web is full of proprietary plugins such such as Microsoft’s Silverlight that similarly can’t be installed on some mobile platforms.

To account for this, be sure that your site doesn’t depend on these technologies to function. If they do, you’ll have to serve up a special mobile version to compensate. For instance, YouTube (a formerly Flash-only site) now utilizes a special HTML5 video player that functions extremely well on mobile platforms.

Also be sure to take advantage of prebuilt libraries that enable you to add support for several mobile platforms with ease. One example that JavaScript fans love is jQuery Mobile, a rockin’ HTML5-based toolkit built on jQuery and jQuery UI.

screenshot

Conclusion

Obviously, this list is in no way exhaustive but instead merely serves as a way for you to dip your toe into the world of websites that look and work great on any platform. Once you really dive into these five techniques, I promise that you’ll feel better about approaching mobile web design and will find yourself busting out fully responsive, cross-platform designs in no time.

Leave a comment below and let us know how you would change this list. If I asked you for five quick and easy ways to make a site more mobile friendly, what advice would you offer?

Comments & Discussion

6 Comments

  • LessLessMoreMore

    More pushing of the preprocessors. Nice. Also, here is a huge tip for making your stuff more mobile friendly: make a mobile app. Why should we throw away 10+ years of refined web development techniques just to cater to mobile before everything else? As long as they’re being accounted for, it’s all good. Make desktop versions with the desktop mentality, then make a mobile solution on the side that focuses just on mobile. After 960-grid and static designs won the war, now everyone is fluid just because of an iPhone? Bleh. Fluid still sucks.

  • http://www.criticalstriker.com Doğan Kutbay

    This is very helpful article recently I have ever read.
    I know very well about fixed width css however I was so afraid to try this fluid layer structure. You gave me the courage, thank you so much.

  • http://www.uidesignguide.com Preston M

    I love Jquery mobile. Just be warned there is a learning curve of a few months before you can really do anything with the css & html. Add another month just for understanding page structure, dynamic, data, etc…

  • http://kursdesign.com Heryien

    Nice article. And now i have a new homework to play. Thanks.

  • K

    I switched to a JavaScript Micro-Framework over the bloated jQuery Mobile – over 200kb! Moo.fx/Prototype Lite JavaScript Micro-Framework is only a tiny 4kb each for the core files. Think about limited mobile data plans – size does matter.

  • http://www.gamesflash.eu/index.php?task=profile&id=322309 free 1000 addicting games

    After the indexing, you will obtain a report displaying which of
    your links have been indexed. Saibot Technologies – This agency provides SEO services for
    local companies, ecommerce enterprises and marketing consulting for
    startups. In reality we do not have to know all these signals
    even though if we think hard and long enough we can figure them out.

Subscribe

Membership
About the Author