Designing Smartphone-Optimized Websites: Challenges Web Developers

Web developers are increasingly being asked to build sites that cater to smartphone Internet users, or to recast existing sites into user-friendlier formats for mobile devices. By 2015, statistical research by eMarketer predicts that more than half of the persons who access the Web will do so through a smartphone or other small-screen device.

This paradigm shift represents a challenge to the established Web development community, which now has a mandate to configure Web content previously optimized for large personal computer and laptop screens into smaller mobile device space constraints.

Utilizing CSS and Javascript to create a more ‘mobile-friendly’ experience

Incorporating customized CSS coding is an effective way to adjust an existing site’s content to be more accessible for mobile users. To properly instruct a smartphone browser on how to display Web content, users should be directed to a mobile CSS stylesheet with the inclusion of the following code in the Head section:

Other tags specific to smartphone use include a measure that determines if all telephone numbers located on a Web page will appear as hypertext links, thus allowing for the initiation of a phone call by clicking on the number.

In HTML5, this is achieved through the <format-detection> tag:

<meta name="format-detection" content="telephone=yes"/>

The above coding is the default setting for most mobile sites, and enables the hypertext link feature. However, a developer can turn off this ability by utilizing:

<meta name="format-detection" content="telephone=no"/>

Which tools can help a developer design websites for smartphones?

Since a number of potential visitor screen sizes exist, it is vitally important to know how a site design looks to various users.

To mimic the experience of viewing a site from a mobile device, Opera offers a Mobile Emulator, which can be downloaded from Cnet.com for free (Windows or Mac). Once installed, the application allows for simulated browsing on a number of pre-set mobile device screens, as well as in customized sizes.

Advanced developer software tools also offer site previews in various mobile screen sizes.

Conclusion

The above techniques, along with many others, are geared toward facilitating a more satisfying experience for mobile device website visitors. The stakes are dramatically rising for online merchants to get on board with the mobile trend, as such users represent an increasingly large slice of the projected eCommerce sales total of $200 billion for 2012.

It surely has been quite a challenge for me so far. Optimizing for the iPad has not been too much of a problem. But for the iPhone or a Smartphone I have come across some troubles.

Thanks for sharing this.

Dave

Thanks for your input, Phil. Designing for small-screen devices can be quite a challenge. In particular, graphics that render correctly in larger screens will probably not do so on a smart phone. I would recommend downloading the Opera Mobile Emulator, as suggested in the article, so you can see exactly which adjustments need to be made for visitors with smaller screens.

Hello

Kind of ironic that this article faIls short in demonstrating the topic

display: none; is a risky thing to do for mobile sites, the phone still downloads all of the data, it just doesn’t display, making your site take much longer to display than is needed.

Dave

‘display: none;’ is a cosmetic measure and does not prevent the hidden content from being loaded with the rest of the page. It is, of course, better to render a mobile-targeted page lighter by completely removing unwanted elements. However, the article addresses a situation where the page itself is not being modified, only the display.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.