When the first iPhone was released it took the tech world by storm. Since then it has been almost 5 years and the smartphone market has ramped up in popularity, with even the Microsoft has gotten into the competition with its Windows 7 OS and partners. With so many Internet users on their smartphone nowadays, it’s common sense to expect the number of mobile website to increase aggressively.

(Image Source: Web Design for Mobile)

However, designing for the mobile web is a completely different operation with common web design. Our websites are designed for huge screen, but the smartphone’s screen size is way too small compared to that, thus leading to annoying usability issues. New design standards and practices are greatly required for a better mobile site design with smooth user experience.

In this guide we’ll be looking to design a user-friendly site for smartphone’s mobile browsers. I will be talking about the best practices and useful developer tool for you to design a better mobile website, so let’s get into it after jump!

Planning Strong User Experience

When you build a mobile website it’s important to keep your users in mind at all times, as ultimately your website is being designed and created for users to enjoy. It’s certainly common for users to expect a mobile website to behave similarly to the desktop environment, so keeping the user experience friendly should be your main focus while building a successful mobile site.

There are many usability concepts to consider for your users. These considerations include screen size, inline images, hyperlinks, font sizes, and page navigation. We have written about mobile usability design for you to carve your website for better usability. Besides the guide, you need to always keep yourself alert for new ideas to improve your site.

Planning a strong user experience also means that you should consider how a user will be interacting with your website. On a desktop your website can be interacted with a mouse and a keyboard, but on a smartphone users will be tapping, flicking, and swiping their way around your site. You probably need to design the site in the way that the users can access the site information easily with 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 will also find news articles and blog posts which run on for a few pages, which can help to break up text but it’s not recommended for mobile devices as the technique requires more page loading which means more waiting time on the user side.

Unless it’s absolutely required I recommend keeping your page content short. You should also consider making it looks sweet by styling the font to a much larger size and maybe moving images aside. With your content on full display it naturally attracts attention, not to mention the optimization actually makes scanning the pages a lot simpler. This is also the reason why a single column layout fits the bill perfectly.

In most cases mobile browsers aren’t going to load the web pages as quickly as desktop browsers and this could annoy your readers, that’s why you need to optimize the content and website for high speed content loading. You can either shorten the article while keeping the full content, or simply remove unnecessary images. Place your focus on simplicity instead of beauty.

Your core navigation is the life saver for your visitors looking to move between pages. On a mobile device, screen links will appear much smaller by nature, thus a lot more difficult to tap. An essential tweak to solve this issue is to maximize the font and space for your navigation links, maybe taking up the whole block area. Alternatively you can design the navigation bar to be similar to the real iPhone application’s tab bar, like the one showcased above.

Building Mobile CSS Styles

Now that we know how to optimize the mobile website for better readability and usability it would be good to talk about CSS styles. Each CSS stylesheet contains many selectors with properties pertaining to fonts, sizes, positioning, and display settings. When it comes to mobile you should be paying attention to how your blocks fall into place.

(Image Source: Smashing Magazine)

One area to get started is to reset your site’s wrapper widths into percentage. It’s common to use pixels as the unit for positioning, line height, font size and div’s width, but when dealing with mobile you’ll want your pages to be fluid and transition between each device naturally. Setting container divs to 100% width will allow the content to fill easily between portrait/landscape mode without flowing over the edge.

If you’re one of the people looking to re-structure your entire layout, make sure you hit everything with a reset. Also paragraphs, headings and navigation links should all be set to display: block; so you get that linear print-style feeling. Re-position the margins and padding to remove bloat from your layout. Avoid tables if possible since these tend to render buggy results between devices.

Large images are also a hassle between devices. Most of your website images will render larger than 480px and you may not wish to have them break the container. The first option is to set their width at 100% so the images can resize naturally. It’s certainly possible to create different sets of images for your website and render them differently based on the browser agent, but honestly this just adds more works on your side, so try to use the technique only when it’s really needed.

Designing Websites for iPhone

The mobile market share is fairly large and divided, but Apple has got a big slice of the pie with their iDevices. Both the iPhone and iPad are mobile Internet-ready devices with built-in touchscreen functionality. They feature the same default web browser, Safari, and a whole host of other options.

For iPhone-specific websites you’ll need to target the screen size. The fixed screen size is set to 320px by 480px for older iPhone models and 640px by 960px for iPhone 4 and iPhone 4S.

iPhone screens are limited to space. You should have one block of content which spans down for as long as needed. Keeping elements in a single column will save you headaches and allow for a fluid layout to “fill out” both portrait and landscape modes. For this you’ll likely need to develop another template and find a way to check if your visitor(s) are using an iPhone. The small PHP snippet 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){ /* 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, such as Mobile Awesomeness and CSS iPhone. Keep yourself busy studying and don’t be afraid to experiment with new techniques in UI design.

Mobile jQuery Scripting

Majority of front end web developers are familiar with the jQuery library. It offers some fantastic shorthand for coding effects, animations, dropdown menus, and a host of other in-browser functionality, and it just gets more awesome with the announcement of jQuery Mobile. It is not recommended to jump in the tech directly and load your website with effects everywhere, but for testing purposes the advanced functionality can play very well.

jQuery Mobile is a bit different from regular jQuery as it gives you a full environment to build on. When you work with their files, they’re not just JavaScript but also CSS styles for buttons, links, and transition effects. You’re still writing web pages in HTML code, but the jQuery Mobile team has supplied a lot of optional UI design features. There is a lot we can do with this framework but since the framework is still in beta, let’s stick to simple effects.

A small tutorial at DevGrow blog provides some awesome examples. The official site also offers demos for you to try out. Note that we’re using the HTML attribute, data-transition to add animation effects with any of the pre-defined values. These include slide, pop, flip, fade, etc. Check out the small DevGrow example to get a taste of these effects.

The effects and transitions are pretty neat, and the fact that you can build an entire mobile interface strictly with jQuery is also a huge step forward for this platform, but with the platform only in beta I wouldn’t recommend building your entire mobile site with their library, especially with the fact that it’s not supported by all major smartphones at the time of writing (particularly Windows Phone 7), but it will surely get better with time.

Ultimately I recommend to familiarizing yourself with this new mobile framework before deploying 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 which 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 tablet 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 environment. 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, 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. Graphic design resource shop Eddit also offers 2 beautiful sets of icons for professional designers. I highly recommend his iPhone UI Icon set which can fit nicely in a mobile navigation menu.

Our collection of mobile devices prototyping templates will be a great help for you along the journey of website and application development. Also, don’t miss out Genggao’s mobile GUI resources post as it offers templates for most common operating systems and devices including Nexus One, BlackBerry, and iPhone. You shouldn’t start coding until you have a strong graphical interface and these web kits will get you started on the right path.

iOS 5 GUI Kit

iPhone UI Vector Elements

iPhone App Icon Kit

Wireframe Magnets (DIY Kit)

Android Interface GUI