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 Onswipe. 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.
Simply put, this easy-to-use service degrades Javascript and ensures that all elements of a site work with a tablet’s accelerometer – meaning the rotate fully and the site retains its functionality during screen shifts and browser reloads. It’s an automated way to ensure that your website displays accurately on this third – and increasingly popular – type of screen.
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.
The first thing to avoid when developing a mobile website is JavaScript. These handy scripts make your website look slick and well-crafted on desktop computers, but they simply are not compatible with the wide majority of mobile platforms. And because JavaScript generally needs a mouse click to function, rather than the touch of a finger on a screen, the scripts won’t even be utilized by your mobile users. Simply avoid them and save yourself the hassle of a glitchy website that ruins your mobile users’ experience.
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 →
0 yorum:
Yorum Gönder