Friday, April 10, 2015

How to Optimize Your Website For Mobile Devices

Before the year of 1976, most computers engulfed entire rooms and had very little functionality. The technology continuously improved, forcing internet-enabled devices to become smaller and smaller – they now fit in your pocket.

While it’s great that you can access information from anywhere in the world, there is a big problem for website developers – our websites aren’t going to be optimized for every platform.
The small screen of an Android will most likely output a different image than the larger screen of your desktop. Luckily, there are many ways to solve the problem – and they’re all pretty easy to accomplish.

Viewing Your Website

Before you should even worry about optimizing your website for multiple platforms, you should first see how it appears among different User Agents and screen resolutions.
Although this tool isn’t an exact match to that of the iPhone’s screen, it is pretty close. You can see the general idea of how your website appears inside of the iPhone/iPod Touch. If it looks good, it will generally look good on the iPad, too.
I’ve found that the Opera Mini simulator is dead on – it’s definitely WYSIWYG. My demographics clearly displayed the fact that Opera Mini made up a large amount of my mobile visits – and the website looked terrible on it. Opera Mini doesn’t do justice to WordPress.
If you’ve ever needed to see your website on many browsers on four different Operating Systems, then BrowserShots is for you! With support for multiple versions of IE, Firefox, Chrome, Safari, Netscape, and more, you’ll surely find what you need.
AnyBrowser is perfect for figuring out how your website looks at different resolutions. With support for both default PC and Mac screen sizes, they surely will have the size you’re looking for.

Device Optimization

Responsive Websites

One of the more popular ways to make a nice looking website in any browser is to make it “responsive”. While it’s more time consuming, it has it’s benefits – it will shrink to the exact sizes.
By calling out @Media Queries inside of your CSS file, you can easily give browsers specific orders depending on their size. The major downside is simple – everything will get smaller. It will also take a bit of time to make all of the queries.
While it is pretty simple to do with a bit of CSS experience, it may be good to use a few resources. For that very reason, I’ve compiled a few examples of responsive designs:

Mobile Themes

If you’re not too fond of creating multiple CSS stylesheets, there is still hope – a mobile theme. Mobile themes are generally stripped down to the bear-bones of the website, and rightfully so. A mobile theme should emphasize:
  • New content
  • Pages
  • Contact information
Think about it. When you’re on a mobile version of a website, are you going to be looking for the same information as when you are on the full website? You generally aren’t – you are looking for smaller bits of information for ease-of-access.
WordPress Mobile Edition
For those lucky users who use WordPress, it is extremely easy to enhance your website across the board with a plugin called  WordPress Mobile Edition.
Made with the simplicity in mind, dropping a few files into your FTP client will enable you to please the masses. Once installed, you can enable or disable mobile browsers and phones that are supported, giving you that much more control over what your audience can see.
At the time of this article, though, it only supports the default theme – something I’m not extremely fond of. With a bit of coding magic, though, I’m sure you could lace another theme into it, or even edit the default!
Other Mobile Themes
Should WordPress Mobile Edition not float your boat, there is still another way out – the hundreds of other themes out there. I did a bit of crawling and compiled a list of a few of my favorites:

How Do You Optimize Your Website?

Islam Blogger with white SEO