Mobile Web Design
Designing Web Pages for Cell Phones, SmartPhones, and Tablets
Mobile web browsers are more than just PDAs these days. There are iPhones and Android phones as well as Blackberries and Treos. And tablets like the iPad and others are gaining in popularity. Plus, more and more non-smartphone devices are getting Wi-Fi and Internet capabilities. Knowing how to design pages for mobile devices is important for the modern web designer.
Writing a Mobile Friendly Website
Learn what it takes to write a Web page that is accessible to mobile computers, smartphones, and PDAs.
How to Write Web Pages for Mobile Devices
Smartphones are gaining in popularity every day, so you should be aware of how these devices work and create designs that work well for them. This article will give you some tips to create web pages that are mobile device friendly.
Problems with Responsive Design - Customer and Client Perceptions
Responsive design isn't always the best solution. It does help many websites work more effectively for mobile and desktop customers, but it can cost a lot of money to create and there are some serious problems with implementing it. This article looks at customer and client perceptions of RWD and how they can impact whether you should use responsive design.
Problems with Responsive Design - Speed
Responsive design can make your web pages load more slowly than they would without RWD. Plus it can take a lot more time to build a responsive site than a normal one. This article will help you learn some of the drawbacks to responsive design and how to mitigate some of the speed issues.
Pros and Cons of Building a Mobile Friendly Site
There are many reasons to skip building a mobile site, time, cost, difficulty. But these problems can be mitigated if you know what to do. This article will help you understand the benefits to mobile design and how to deal with the problems.
Does Your Website Work on Touch Screen Tablets?
Designing for mobile devices requires some special techniques, but when you add in touch screens, you need to realize that there are some things that just don't work in designs. This article explains how touch screens can affect your web page design and your customers' perception of your page.
How to Build a Responsive Design for Your Website
Responsive design doesn’t have to be extremely complicated. This article explains what you should consider for three different versions of the same site and how to set them up in the CSS and HTML.
How to Detect Mobile Devices
Learn how to use various techniques to detect mobile devices and send them a style sheet written for them or to a completely different Web page.
How to Test Mobile Web Pages and Applications
Many of the things you should test when testing your mobile designs are the same as what you test for your standard designs. But there are some specific things you should be looking for when testing mobile. This article will help you understand how to test for mobile and give you practical tips for getting the testing done, even if you don't...
Use Opera's Small-Screen Rendering to Test Pages for Handhelds
Opera has a built-in feature to allow you to test any Web page for how it might look on a small screen or handheld device - it's called the Opera Small Screen Renderer
Don't Limit the Content on Your Mobile Sites, But Limit the Content
Redesigning your site for mobile users is a good idea, because it can help users who need specific information quickly to find it more easily. But if you're not careful, your mobile experience can cause more problems than it solves. Learn what content to leave out and keep in your mobile designs.
Give Your Mobile Readers Options
Many people are browsing Web pages on mobile devices like iPhones, smartphones, and PDAs. And while the mobile friendly views are useful, sometimes you just want more. If your mobile page forces all your mobile customers into one limiited box, you're going to end up annoying just as many people as you help.
Do You Force Mobile Web Pages? Why or Why Not?
If you have a website, you may have noticed that more and more people are visiting on mobile devices. So many designers have created specific sites for their mobile customers. But not all customers like being locked into the limited mobile layout. Find out why other About.com readers force mobile pages or share your reasons for not forcing them.
What is Responsive Web Design?
Responsive web design is a way of creating websites that attempts to future proof your designs by creating a style sheet that is specific to different devices like mobile versus desktop browsers. This article explains what responsive design is and how you can get started using it.
Changing the Design of a Page for Wireless Devices with the Handheld Media Type
First use a media type to define a style sheet for handheld or wireless devices. Then once you've decided on the style sheet, use these tips to create a page that is styled so that wireless devices get the most out of the design.
Should we switch to one column layouts for mobile devices
Share your thoughts about mobile layouts. Should they be one column for ease of use? Or are newer smartphones the wave of the future, and zooming works. What solutions do you use to handle mobile devices and complicated layouts.
Should we forget columns?
Many websites use columns for the layout, but should we avoid them when converting a site for mobile?
Designing Web Sites for PDAs
This article explains the pros and cons to developing a Web site for PDAs. It explains how Wired went about it, and what they discovered in creating their PDA-ready site.
Optimizing Web Pages for Handheld Devices
A great overview explaining the keys to creating a Web page for a PDA.
Palm OS Emulator
Even if you don't have a Palm™ computer, you can emulate one on your Windows PC, Mac, or even Unix. This is a great way to test your Palm pages.
Google will convert any Web page into a mobile-friendly page. You just search for it from this starting page. I like to use this page to imagine how people with cell phones might find the sites I design.
Mobile Meta Tags
Mobile meta tags make your pages work better when viewed on mobile devices. Learn more about the viewport meta tag and other meta tags you can use to improve your websites for mobile users.