Websites are now no longer viewed primarily on large-screened devices like desktop and laptop computers. In a world that has gone crazy for smartphones like the iPhone and Android devices, they are now increasingly viewed on screens that measure only 4″ diagonally. This presents some unique challenges – and opportunities – for blog owners, but they must first optimize their blogs for these new devices.
Tip 1: Optimize Touch Displays
It’s true that a mobile phone will drastically scale down your desktop-oriented design so that it can fit nicely on a small screen, but that doesn’t mean the scaled-down website will be usable. Small touch screens require big buttons and touch-friendly design elements that the user can touch with the base of their finger – not a stylus or cursor.
Skilled web designers should begin developing a separate website design, and it should be a mobile one. This design should include large buttons, a one-column layout, and touch-friendly elements. And those who are not skilled should begin investigating plugins for their blog’s content management software that will automate the process of developing a mobile design.
WordPress users who need an instantly functional mobile design can find just such a solution by using that software’s “WPTouch” plugin. It ships with a ready-to-use design that works on any touch screen phone; the pro version offers advanced users the chance to customize that design and make it fit into their overall design scheme.
Tip 2: Optimize Tablets
For larger touch screens, users will want to create a third design solution that works with the larger space available but still recognizes the importance of touch sensitivity. One of the leading plugins for accomplishing this task is. It’s relatively new, and some what buggy and untested, but it gets the job done and takes full advantage of the tablet form factor.
Best of all, Onswipe isn’t exclusive to the massive WordPress development community. It can be used with Joomla blogs, as well as those created with Drupal. For those who prefer to host their blogs on a free and remote blogging service, the Onswipe plugin works with Tumblr blogs as well.
Tip 3: Know What to Avoid
When designing your own custom mobile website, there are several things to avoid in pursuit of full mobile compatibility. Remember that mobile browsers are advanced in the way they load and scale websites, but not as advanced as modern desktop browsers. That means they won’t support certain programming languages or design features.
Another thing to avoid when custom-building a mobile website is the use of extremely large images that require the website to scroll to the left or right. That’s because they’ll throw off the browser’s automated scaling mechanism for columns of text, and your users will have to swipe left, right, up, and down, in order to view the full written content of your blog. For most people, that’s annoying – and they will just stop visiting your site.
Finally, because you’ll be making a custom design with your content management system, be careful to avoid publishing your own personal information through the erroneous use of system variables. The wrong variable can easily publish your email address to the entire world wide web.
Keep your coding sound, your variables accurate, and your email account free of spam.
More from the Web Design for Newbie’s Series…
An Introduction to HTML Prototyping →
Essential SEO Considerations For A New Website [DOs & DON’Ts] →
Building Up your Web Design Education →
8 Things Newbie Web Designers Should Know About SEO →
- Keys to Designing a Great Mobile Website Experience
- Mastering Responsive Web Design: The Dos and Dont’s
- Tips for Creating a Truly Functional Mobile Experience
- Design Trends for More Accessible Mobile Content
- Building Websites with a Priority for Mobile
- Things you have to Consider when Designing for Mobile
- Designing a Mobile Stylesheet for your Website
- 30 Free Responsive Email & Newsletter Templates
- 50 Free Responsive HTML Web Templates
- What is Responsive Design?