Tips for Designing a Compact Website Layout
It can take a lot of additional effort to build mobile-specific website templates. HTML and CSS have come a long way but there are still plenty of standards and loopholes to jump through. And with the mounting increase of various mobile devices there are more platforms now than ever before.
In this guide I would like to share some of the most common tips when designing for mobile screens. The web is a fluid beast constantly changing with the times. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs. The learning process is devious but after a bit of practice you’ll pickup mobile design very quickly.
Streamline Functionality
To really make the layout “mobile” you need to express functionality in an easy-to-use manner. It’s important that your users can immediately navigate the site and find the information they need. It helps to think of your new layout in terms of a mobile app vs. an entire website.
You don’t want to limit functionality as much as rearrange the flow between pages. Reduce scrolling to a minimum and only for vertical content. I find it easiest if you can build with a set number of HTML elements – h1-h3, paragraphs, and maybe some blockquotes.
Any navigation links you use should be placed right top and center of your design. Remember that a compact layout should include many fewer pages than a full-website. Limit yourself with 5-10 content specific page styles at most. Make your fonts big enough to read and add plenty of extra space between paragraphs.
If you’re against re-styling an existing site then it may be worthwhile to build a clone design as your mobile version. I would recommend working off a framework such as 320 and up where you can adapt a more responsive layout. This behavior is useful on the desktop as users re-size their browser windows, but it’s much more useful on mobile displays where you have to deal with countless varying screen resolutions.
Avoid Unnecessary Images
One style to avoid is the use of heavyweight images in your code. For iPhone devices and the many varying Android-based screen sizes it will be difficult to match with pixels. You could try setting image sizes using percentages in CSS – but this method will not always prove beneficial.
You also have to consider that most smartphones will rotate content portrait to landscape view. This can dramatically alter the display resolution so any images pre-sized will have to realign themselves in the layout. This formatting is often more trouble that it’s worth and JavaScript isn’t a realistic solution. Instead if you are using a logo or branding image towards your header/footer it’ll appear much more natural than images sewn throughout the page content.
But when it comes to designing this page content I recommend sticking with standard text. Nothing too flashy and preferably no inline images. As an alternative you could offer images as direct URL links broken up into block areas.
Viewport Meta Tag
Meta tags behave as extra data to be passed into the website rendering engine(along with search engines). When working on a mobile layout you have to consider that each smartphone OS will handle webpages differently. On iOS you’ll notice by default the entire design is scaled out from a normal zoom.
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
My code example above demonstrates how you would use this meta tag in your document’s <head> section. This will disable zooming functionality so your reader’s can’t pinch to zoom in or out. Your site will behave exactly as it should on a mobile screen. Alternatively you can set width and height values manually so that your content will squeeze within specific boundaries.
Offer a Full-Scale Alternative
Even the most popular social networking tools like Twitter and Facebook have built complementary mobile companion websites. But one key feature to notice is the ability to revert back onto the desktop style.
Even visitors accessing your website from their smartphone may not be interested in the “lighter” mobile version. If possible you should always offer a link for your visitors to access the full website layout, generally towards the bottom of the page. This means you may need to setup the mobile template in a subdirectory on your web server. Your URL scheme could follow something like http://m.domain.com/ or http://www.domain.com/mobile/.
Simplify your Color Scheme
One other design-related concept is layout colors and positioning. You have to consider which set of colors you’ll be using and how they can affect the readability of your content. It’s typically best to stick with plain white or black for a background. This will give the highest contrast in comparison with your text.
But additionally take into mind that you don’t want to overwhelm your visitors. Mobile screens are much smaller and do not have such a breadth to explore as compared to a desktop monitor or even a laptop. Try slimming your color scheme down to 3-4 solid choices as your “core” design. Adding any more colors and you risk confusion between headings, paragraphs, links, codes, and alternate text.
Building on jQuery Mobile
People often think of jQuery as just an enhanced JavaScript effects library. It’s really an entire framework where you can build rich animations and interactions between page elements. But what’s even better is their jQuery Mobile project which is recently celebrating their 1.0 official release.
jQM is a whole different library built on HTML5 compatibility with all mobile devices (including tablet PCs). The system is touch-optimized turning your website into a collection of base mobile UI elements. These include buttons, lists, navigation bars, and form inputs. Practically anything you can build with HTML5 will be enhanced through jQuery Mobile.
And there is even an exhaustive theming system where you can customize colors and gradients on-the-fly. If you’re normally against working with frameworks I have to suggest giving this one a try before any others. It’s super easy to create multiple content pages and then re-design specific aspects in your template. The jQM team has done an exceptional job supporting practically all mobile browsers and working over HTML5/CSS3 standards.
Related Tutorials
- Designing for Mobile Safari
- How to Create a Mobile Version of your Website
- 9 Tips for Optimizing Your Website for Mobile Users
- Guidelines For Mobile Web Development
- Responsive Web Design: Tailored Layouts For All Screen Sizes
Conclusion
I hope this brief tutorial can get you interested in the arts of mobile web design. It’s a rapidly growing industry that requires support from multiple channels, both web designers & developers. As mentioned before it doesn’t take weeks of studying to learn these new trends in web design – but it does require dedication and a lot of practice.
Continue testing out new layout designs and don’t let yourself get discouraged! There’s a whole tech world buzzing with new web ideas for mobile smartphones. If you know of some great layouts or have similar tips to share please do so in the comments section below.
