getHow do you get your amazing self and your amazing work in front of new people? Good thing all those new people spend so much time with their phones, with young adults spending up to five hours total on their phone every day. Your web design is the central part of a successful play for those eyeballs.
And it better work on mobile. I’ve gathered a selection of six designs discovered with my phone. I think we can learn something great from each.
The screenshots below were generated using my web browser’s developer tools set to show the sites as if displayed on a mobile phone in portrait orientation.
Some of the web designs look cut off at the bottom, I know. That’s ok. People scroll. Hear me say it. People scroll. They will see buttons and headlines “below the fold”.
Five Star Painting of Cincinnati
Five Star Painting has a simple value proposition stated clearly and directly followed with a crisp call to action. All of the websites featured here have something like this. The trick is to make it completely, unavoidably clear to your visitors how to contact you. I think they say “Schedule an Estimate” nearly eight times on the rest of the page. I’m also a fan of those subordinate call to actions below the main red button.
Bold statement, going with Corben as your website font. It’s a round Cooper Black-esque typeface that’s about as hip as your average Dad grilling up kielbasa in a Kiss The Cook apron. But I really like it. The blue colored background texture is kind of fabricky, reminding me of a fresh uniform. Today’s web design trends skew away from textures like that now, but this one works. Especially because it’s the only texture and everything else is military crisp. And of course it gets the above-the-fold call to actions right: prominent phone number, strong headline, Schedule Service button.
Mishler Plumbing’s web design shown here was designed and built by Roundpeg. Read more about the project.
The DHF Company
First, I want to clear up a point of possible confusion. I am not a fan of this web design. The logo and branding are flat-footed and my overall sensation looking at this site is an urgent need to look at something else. However, my eye is caught by some very important words: Special Offer. On mobile devices, this website’s main headline (boring) is actually replaced by a more immediately compelling message about this offer. Mobile users see less of your home page at one glance so you need to make hard choices about what comes first. At least The DHF Company got something right.
J.T. McDermott Remodeling Contractors
It’s a little clinical, the colors (remind me of grey and green scrubs), but I like this site overall. The branding is basic, but the off centered image frames throughout freshen it up. I’m a really big fan of the owner posting his family portrait as the first content item below the fold. I think that shows a welcoming, hospitable spirit. So many home services companies lack a strong, human element in their communications. They could be anyone. But if you’ve got a cute baby daughter, or a small close-knit team willing to take a group photo, put it up there. We want to see you.
Like DFH, this web design starts off with a prominent special offer as the home page headline. Good job! Another benefit of offering special offers this way is it shows your active pursuit of sales. I actually trust a local business more if I see they’re engaged enough in marketing to run a special on the website’s home page. While we’re looking at Tish Flooring, make a special note of the great pictures showing flooring products in the context of beautiful, finished rooms. These inspirational pictures reflect Tish Flooring’s care for tying in all your fine interior finishes and furnishings with great floors, not just selling a product.
Tish Flooring’s web design shown here was designed and built by Roundpeg. Read the case study!
Quality Heating & Air
Let’s use this example to review the three most important items for a home services mobile web design. First, take care that your logo shows up at a decent size. Don’t be afraid to push close to the edge of the screen, especially if your logo is very wide. Next, make a big deal out of your phone number! Quality Heating & Air went so far as to put it inside a button designed to automatically start a phone call when you tap or click it. Finally, they include a basic Request an Estimate CTA as part of the home page headline. While I’m on mobile, I think the phone button is more compelling, but it’s good to offer secondary CTAs like this so visitors have at least one other choice to contact you besides the phone.
Did you see anything in these examples you want to try yourself? Anything you would do differently? Got a question about mobile web design? I’d love to hear from you. I’m on Twitter @pwolfgram and you can tweet at @roundpeg too. Or leave a message in the comments! Thanks for reading.