A look into: Designing for Mobile Devices
The first iPhone revolutionized the tech world when it was released. Now, almost five years later, the smartphone market has soared in popularity, even attracting competition from Microsoft with its Windows 7 OS and partners. With a surge of Internet users now on smartphones, it’s only logical to anticipate a steep increase in mobile websites.
However, designing for the mobile web is an entirely different beast than traditional web design. Our websites are crafted for large screens, yet the smartphone’s screen size is significantly smaller, often leading to frustrating usability issues. New design standards and practices are desperately needed for superior mobile site design that ensures a smooth user experience.
In this guide, we will focus on designing a user-friendly site specifically for smartphone mobile browsers. I’ll be discussing best practices and showcasing useful developer tools to help you design an exceptional mobile website. Let’s dive in after the jump!
Planning a Robust User Experience
When constructing a mobile website, it’s paramount to always keep your users in mind, as ultimately, your website is being crafted for their enjoyment. Users often expect a mobile website to operate similarly to the desktop version, so making the user experience seamless should be your prime objective while building a successful mobile site.
There are several usability aspects to bear in mind for your users. These considerations encompass screen size, inline images, hyperlinks, font sizes, and page navigation. We have compiled an extensive guide on mobile usability design to help tailor your website for optimal usability. Besides this guide, you should stay vigilant for fresh ideas to enhance your site.
Planning a robust user experience also entails understanding how a user will interact with your website. On a desktop, your website can be navigated using a mouse and a keyboard, but on a smartphone, users will be tapping, flicking, and swiping their way around your site. You’ll likely need to design the site in a way that allows users to access information effortlessly through these physical movements.
Keep Pages Short & Sweet
The meat and potatoes of any website is the page content. Each of your web pages holds significant amounts of useful information for your users, such as text, photos, or videos. You may also find news articles and blog posts that run on for a few pages. While this can help to break up the text, it’s not recommended for mobile devices as this technique requires more page loading, resulting in more waiting time for the user.
Unless it’s absolutely necessary, I recommend keeping your page content short. You should also consider enhancing its appeal by styling the font to a larger size and perhaps moving images aside. With your content prominently displayed, it naturally attracts attention. Moreover, this optimization makes scanning the pages much simpler. This is also why a single-column layout fits the bill perfectly.
In most cases, mobile browsers won’t load web pages as quickly as desktop browsers, which could frustrate your readers. That’s why you need to optimize the content and website for high-speed content loading. You can either condense the article while retaining the essential content, or simply remove unnecessary images. Your focus should be on simplicity rather than aesthetics.
Your core navigation is the lifeline for your visitors looking to move between pages. On a mobile device, screen links naturally appear much smaller, making them more challenging to tap. A crucial adjustment to resolve this issue is to maximize the font and space for your navigation links, perhaps occupying the entire block area. Alternatively, you can design the navigation bar to resemble a real iPhone application’s tab bar, like the one showcased above.
Building Mobile CSS Styles
Now that we understand how to optimize a mobile website for enhanced readability and usability, it’s important to discuss CSS styles. A CSS stylesheet contains numerous selectors with properties related to fonts, sizes, positioning, and display settings. For mobile, attention should be given to how your blocks arrange themselves.
A great starting point is to reset your site’s wrapper widths into percentages. Although pixels are commonly used for positioning, line height, font size, and div width, in a mobile context, it’s crucial for your pages to be fluid and transition naturally between devices. By setting container divs to 100% width, the content can easily fill between portrait and landscape modes without overflowing.
For those aiming to restructure their entire layout, it’s vital to apply a reset. Paragraphs, headings, and navigation links should all be set to display: block, providing a linear, print-style aesthetic. Adjust the margins and padding to remove excess from your layout. If possible, avoid tables, as they tend to render inconsistently across devices.
Large images can also create issues between devices. Many of your website images may render larger than 480px, which could cause them to exceed their container limits. One solution is to set their width at 100% allowing images to resize naturally. Although it’s possible to create different sets of images for your website and render them differently based on the browser agent, this can add substantial work. Therefore, use this technique only when absolutely necessary.
Designing Websites for iPhone
The mobile market share is sizable and diverse, but Apple holds a substantial portion with their iDevices. Both the iPhone and iPad are Internet-ready devices with built-in touchscreen functionality. They come equipped with the same default web browser, Safari, amongst a plethora of other options.
When designing for iPhone-specific websites, it’s crucial to consider the screen size. Older iPhone models have a fixed screen size set to 320px by 480px, while iPhone 4 and iPhone 4S are 640px by 960px.
Due to the limited space on iPhone screens, your layout should contain a single block of content that can span vertically as needed. Maintaining elements in a single column will not only save you headaches but also allow for a fluid layout to comfortably fit both portrait and landscape modes. To achieve this, you’ll likely need to develop another template and devise a method to detect if your visitors are using an iPhone. The small PHP snippet provided below should work well:
<?php
$b = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($b){ // user is on an iPhone }
?>
Basically the logic pulls our global $_SERVER variable for the HTTP agent and checks if the word “iphone” appears anywhere. If yes, then we know our visitor is using an iPhone, and from there, we can put up slightly different HTML or even a whole new template layout! This could also be used to include an iPhone-specific stylesheet, change your page titles, remove images, or nearly any dynamic effects.
When it comes to serving new styles there is an easier way. As mentioned earlier, the maximum screen size for iPhone is 960px wide. Therefore with new CSS3 media queries you can add styles directly into your site’s main stylesheet that will only display on iPhone. Below is a small example code:
@media screen and (max-device-width: 960px){
/bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old iPhone css */
}
This works because CSS can now detect browsing agents and their properties. Max screen width is one of the properties which can also be detected.
All-in-all mobile website for iPhone devices isn’t too difficult to design for, there are just too many examples to refer, I.e., CSS iPhone. Keep yourself busy studying and don’t be afraid to experiment with new techniques in UI design.
Mobile jQuery Scripting
The jQuery library is a tool that many front-end web developers are familiar with. It offers fantastic shorthand for coding effects, animations, dropdown menus, and a variety of other in-browser functionalities. The library has become even more impressive with the announcement of jQuery Mobile. It’s crucial not to dive into this tech blindly, filling your website with effects, but for testing purposes, its advanced functionality can be highly beneficial.
jQuery Mobile distinguishes itself from regular jQuery by providing a complete environment for development. The files you’ll work with include not only JavaScript but also CSS styles for buttons, links, and transition effects. While you’re still creating web pages in HTML code, the jQuery Mobile team has provided numerous optional UI design features. There’s a great deal you can achieve with this framework, but since it’s still in its beta stage, it’s advisable to stick to simpler effects for now.
The DevGrow blog offers a helpful tutorial with a range of excellent examples. The official site also provides demos for you to explore. It’s important to note that we’re using the HTML attribute, data-transition, to add animation effects with any of the pre-defined values, such as slide, pop, flip, fade, and more.
The effects and transitions are impressively neat, and the ability to construct an entire mobile interface using solely jQuery represents a significant leap forward for this platform. However, with the platform still in beta, it’s not advisable to build your entire mobile site with their library, especially considering it’s not yet supported by all major smartphones, notably Windows Phone 7. That said, support is likely to improve over time.
Ultimately, I recommend familiarizing yourself with this new mobile framework before deploying it live on any project.
Helpful Developer Tools
Mobile developers aren’t just looking into coding and design resources. There is also a high demand for software tools and IDEs, not to mention powerful mobile frameworks. Web development is a difficult task that requires quite a bit of dedication, but utilizing additional tools will make your job a whole lot easier.
Opera Mobile Emulator
Looking for a way to check how your mobile website is rendering? This can be a huge pain if you don’t have a smartphone with Internet access. Or you just don’t wish to use your smartphone to test the site every single time an update is pushed onto your server. Well, Opera Mobile Emulator is a fantastic piece of software to test your mobile website.
The emulator does support around 20 mobile profiles such as Samsung Galaxy S, HTC Desire, and even tablets like Motorola Xoom. It’s also possible to set the custom resolution and pixel density for intensive testing purposes. Best of all, you don’t need to do too much configuration work, just make few clicks, and you’re good to go.
The download is completely free and the software does run in both Mac OS X and Windows environments. Their developers are hard at work creating proper web standards and tweaking their mobile rendering engine. I recommend their other dev tools if you’re looking for extra tools to help you along the way.
PhoneGap
There haven’t been many APIs developed over HTML5 to build solid mobile applications. Notably, the mobile landscape has been lacking these types of websites, which is exactly why PhoneGap fills the niche so well. Their platform lets you easily construct HTML5-based apps as native applications on 6 different platforms.
The process works by first compressing your code and passing it through PhoneGap’s application framework. From there your apps can reach a large portion of the mobile marketplace, including Android, iOS, Windows Phone 7, and BlackBerry.
If you’re a bit confused don’t fret too much. Their support pages neatly outline the process and offer links to helpful resources. The apps which have already been developed have been compiled in a beautiful library-style portfolio. Check out their full apps collection which you can then sort by devices with screenshots.
Aptana Studio
The Aptana website is the premier location for learning about their development tools. The latest suite release, Aptana 3.0.3, features a fully integrated IDE for web development, CSS styles, and HTML tag nesting, and the best part: Aptana is completely free to download! They offer packages for all 3 major Operating Systems (including Linux), which is a huge convenience for developers.
What makes Aptana special is how quickly you can develop a small web application and test out your design. The studio suite allows you to quickly develop and test a web application running over Ruby on Rails, PHP, Python, or simply HTML/CSS, and their code highlighting features have recently been improved to include new HTML5 and CSS3 tag libraries. It also comes with Git integration, a built-in terminal, a code debugger, and a handful of other nifty features.
Mobile GUI Kits and Icons
What would be the web without freebies lying around? For web designers, the importance of user interface ranks above everything else. Simple GUIs are tough to come by, and only the most creative designers have come up with working solutions.
However, there are many free yet quality resources available for you web designer to test out. These GUI kits are mostly designed for Adobe Photoshop or Fireworks, where you can move around elements and export them as flat image files.
Icons are a very handy resource to have. Designers are creating free sets and offering them online more frequently than ever before. One such website Glyphish has a showcase of both free and pro icons. These designs are based on a single theme to be used on mobile templates and app designs.
Our collection of mobile devices prototyping templates will be a great help for you along the journey of website and application development. You shouldn’t start coding until you have a strong graphical interface, and these web kits will get you started on the right path.
