3 Ways To Make Your Website Support Mobile Browsing Better

Posted on October 26, 2012 by
singleimage

If you have ignored mobile environment for too long, it can be really intimidating to make a sudden jump to the mobile web design as there could be so many things you need to do to better support mobile browsing on your current website. There’s so much to learn, you may have a million techniques to choose from and too many things that you need to potentially implement into an existing project. A question that website owners and web designers alike always want to know is whether they can add mobile support quickly. Often we simply don’t have the time and money to start everything from scratch, yet still have a boatload of desire for a modicum of mobile goodness.

Use fluid layout
Fluid layout has been around for years now and long before responsive design as we know it today. Web development professionals looked to fluid layouts as a solution to solve issues related to multiple display sizes. Fluid layouts are relatively easy to create. In essence, you need drop static widths and use percent-based widths in CSS. So, instead of expressing a width with fixed value of 480px, you could just set it to 40%. This will dynamically take into account the display size and set the layout width to 40% of the total. So if your browser window is 1152px, the column width would be roughly 480px.

However pulling this trick off in the wild may not be so straightforward. We know when we need to divide a layout into give equal columns; each will be set to 20% of the width. But it would result in no space between each column. You will typically need to add some margins between them. What you should do is to figure out the amount of margin between each column and divide the remaining space for the columns themselves. Web designers typically use 3-5% for margins, so when you have five columns, you need to put six margins on the screen. Three percent times six equals eighteen percent for your width for margins, leaving eighty two percent left over for columns, or roughly sixteen percent for each column.

Tools like SASS allow you to figure out all the math necessary for allocating columns and margins when you use CSS. It can perform all the necessary operations; just pass the number of columns and the percentage of each margin.

Use a framework
There are many CSS frameworks available online and they could do all the work for you and especially useful if you are cautious about building a fluid layout from the scratch. These days, expert recommendation for mobile-friendly websites is to go completely responsive. It is much more convenient to create a single Web design that adapts and flexes to different display sizes, which ensures your website looks nice on any device. The solution is simpler and more elegant than you might imagine, because it can better withstand the test of time.

That being said, we are still going to face a few challenges when we attempt to develop an entirely responsive design. Web designers need to wrap up their mind around an entirely new perspective and optimize their websites at several breakpoints.

In real world, we might not always have enough resources perform a complete responsive overhaul, but at least you want to make it looks better on smaller devices. One effective solution is to serve up a single media query that can put the entire width of the layout on your containers and columns. A CSS framework can reduce the size of your window and find a point where your layout starts to breaks. When coded correctly this technique allows your website layout to be properly served up for larger screens and reflow to a layout with fewer columns when the display size becomes too small to accommodate the full-sized design.

Use mobile-friendly technology
For many Web developers, the mobile web has presented numerous compatibility issues. One thing that gets the most media exposure is the lack of Flash support on iOS devices. The World Wide Web is full with proprietary technologies like Microsoft Silverlight, that isn’t supported by some mobile platforms. To account for this, you should make sure these proprietary technologies don’t become essential parts of your website. If they do, you will need to compensate. For example, YouTube was once a Flash-only video sharing service, but now it features HTML5-based player that works well on any mobile operating system. Also, you should take advantage of pre-built libraries that allow you to provide support for all mobile platforms with ease.

Conclusion

This article is in no way an exhaustive explanation, but it should serve as an encouragement for you to dip your toes into the exciting world of mobile Web. Once you dive into the above techniques, you will feel a lot better about dealing with standard mobile Web design. In no time, you’ll find yourself busting out a fully responsive cross-platform design.

Author :

  • Adam Scott