Mobile Website Design That Doesn't Frustrate Users
Mobile websites design begins with an important fact. Most of your visitors are holding a phone, probably in a queue, possibly while a toddler pulls on their arm. They won't strain their eyes. They won't zoom in and out. They'll simply go somewhere else. 
My aunt learned this the hard way. She tried to order a pizza from a local shop's site, missed a tiny button, and ended up with three pizzas. "Okay," she said, "at least the neighbors were happy." The shop was thrilled too, but that's luck rather than good design. Make Room for the Thumb Screens got bigger. Hands didn't. Put the main actions where a thumb naturally rests, within easy thumb reach. Buttons need breathing space, roughly the size of a fingertip pad, with gaps around them. If two links sit so close that a tap might hit either one, you've built a digital coin flip. Speed Beats Beauty A gorgeous page that takes six seconds to load is a gorgeous page people will abandon. Compress your images. Drop the giant background video. Cut web design software the scripts you added "just in case" three redesigns ago. Test on a mid-range device with an ordinary mobile connection, because that's real life. The office Wi-Fi is a luxury. Words Should Be Readable Without Effort Set body text at around 16px or more. Keep lines short. Break paragraphs early and often. A wall of text on a small screen feels like an actual wall, and nobody wants to climb one for entertainment. Contrast matters as well. Light gray on white looks elegant on a designer's monitor and can disappear on a phone under bright sunlight. Cut Unnecessary Form Fields Every extra field creates another chance for someone to quit. Ask for an email, maybe a first name, and leave it at that. Skip the fax number—yes, somebody out there still asks. Use the appropriate input type for every field, so a phone number box opens the numeric keypad instead of making people hunt for digits. That little convenience can make a noticeable difference in form completion. Tame the Pop-Ups A full-screen pop-up on a phone is a digital ambush. Search engines dislike them, and so do humans. If you really need one, use a small banner with an obvious close button, and give visitors a few seconds to read before you get in their way. Test With Real Hands Emulators don't tell the whole story. Grab three actual phones, including an older and a newer model, and try to finish your main task on each. Hand one to a friend who isn't techy and keep your mouth shut. Watch where their finger hesitates. That hesitation is your next set of improvements, written in fingerprints.
My aunt learned this the hard way. She tried to order a pizza from a local shop's site, missed a tiny button, and ended up with three pizzas. "Okay," she said, "at least the neighbors were happy." The shop was thrilled too, but that's luck rather than good design. Make Room for the Thumb Screens got bigger. Hands didn't. Put the main actions where a thumb naturally rests, within easy thumb reach. Buttons need breathing space, roughly the size of a fingertip pad, with gaps around them. If two links sit so close that a tap might hit either one, you've built a digital coin flip. Speed Beats Beauty A gorgeous page that takes six seconds to load is a gorgeous page people will abandon. Compress your images. Drop the giant background video. Cut web design software the scripts you added "just in case" three redesigns ago. Test on a mid-range device with an ordinary mobile connection, because that's real life. The office Wi-Fi is a luxury. Words Should Be Readable Without Effort Set body text at around 16px or more. Keep lines short. Break paragraphs early and often. A wall of text on a small screen feels like an actual wall, and nobody wants to climb one for entertainment. Contrast matters as well. Light gray on white looks elegant on a designer's monitor and can disappear on a phone under bright sunlight. Cut Unnecessary Form Fields Every extra field creates another chance for someone to quit. Ask for an email, maybe a first name, and leave it at that. Skip the fax number—yes, somebody out there still asks. Use the appropriate input type for every field, so a phone number box opens the numeric keypad instead of making people hunt for digits. That little convenience can make a noticeable difference in form completion. Tame the Pop-Ups A full-screen pop-up on a phone is a digital ambush. Search engines dislike them, and so do humans. If you really need one, use a small banner with an obvious close button, and give visitors a few seconds to read before you get in their way. Test With Real Hands Emulators don't tell the whole story. Grab three actual phones, including an older and a newer model, and try to finish your main task on each. Hand one to a friend who isn't techy and keep your mouth shut. Watch where their finger hesitates. That hesitation is your next set of improvements, written in fingerprints.