Spark Blog Notes from the Spark Team
Top 5 Tips: Designing Websites for Mobile
This month, President Barack Obama formally asked all government agencies to redesign their websites so that they can be more easily navigated on mobile devices. “At a time when Americans increasingly pay bills and buy tickets on mobile devices, government services often are not optimized for smartphones or tablets, assuming the services are even available online,” Obama said in the memo.
To renovate the .gov websites, the president is “encouraging agencies to deliver information in new ways that fully utilize the power and potential of mobile and web-based technologies.”
Qualcomm’s Web team recently did just that. They renovated Qualcomm.com to showcase the latest technologies available for mobile sites for web browsers in modern smartphone and tablets-- and they learned a lot from the experience. I asked team members Cherry Park and Todd Tarplee to share their tips for government agencies – or anyone else – about to undertake a similar project. Here's their top five tips:
1. Decide whether to design a website or an app… or both
Should you develop a website or an app? It depends on what kind of information you’re trying to convey. For example, mobile web browsers don’t currently have the ability to access your phone’s camera or address book. The experience you want to deliver should guide you to decide between building a native app or a website. You may need both.
2. Leverage Web standards to save time
Building impressive websites used to require a lot of code. But today’s Web browsers--mobile browsers in particular--generally do a great job of displaying complex layouts built in HTML5/CSS3. Use these standards to create a more compelling experience with less effort.
For example, Qualcomm.com’s top menu (which animates and overlays the background image) was created with just a few lines of CSS code and the experience is fluid thanks to acceleration by the device’s GPU. In fact, all of the animation you see on the homepage is done with CSS. This simplified approach to programming also helped reduce the size of each page.
3. Use responsive design--one site for both desktop and mobile
You don’t have to build a separate site for desktop and mobile users. By coding in HTML5, you can use a method known as “responsive design” to build one site that changes depending on where it’s viewed. To see this in action, open Qualcomm.com in your desktop browser and then resize the window. As you make it smaller, the site will adapt. Responsive design works for all types of sites – from those that are heavy on text and photos (www.bostonglobe.com) to interactive gaming sites (http://www.cuttherope.ie/).
4. Speed tricks
Clever techniques, implemented on your Web server, can decrease the amount of time it takes to load the site. If you have graphics that appear multiple times on the same page, such as menu bars or circular buttons, consider using a technique called “CSS Sprites.” That allows the browser to download the images just one, yet display them multiple times. If you have a large image on a page, it can be helpful to store several different sizes of it in your image library. That way, if a user is viewing the site on their phone, a smaller version of the picture can be transmitted instead of the huge one needed for desktop viewing. On Qualcomm.com, we keep separate image libraries for different devices. It makes the difference between 200 or 15 kilobyte files.
5. Design for touch
If you’re designing for mobile, your users will be navigating with their fingers. Larger buttons make your site easier to navigate via touch. Adding extra features such as favicons (icons used as a bookmark shortcut or in the address bar of the web browser) are also a nice touch. It’s also possible to add gestures. For example, Qualcomm.com allows users to swipe left and right to navigate to different sections of the site.