How to Make a Clients Website Mobile Friendly?

May 8, 2013
[rt_reading_time label="" postfix="min read"]

With the recent explosion of mobile users on iPhone, Android, and other devices, website owners have been scrambling to make their sites more mobile friendly and draw more viewers to their site. This can lead to a lot of clients, old and new knocking on your door pleading with you to make their website “look like an app” on their iPhone. If you are looking for options for your WordPress site, check out the following recommendations.

Creating a Separate Mobile Site

Have you visited some sites like CNN or Facebook on your mobile browser and notice a m. or .mobi extension? If so, you have visited a website that is hosting a separate website for their mobile users. Mobile websites were all the rage in the early days of mobile web development but now are beginning to fall by the wayside with recent advances in mobile web design.

The key advantages of creating a separate mobile site is that you can customize the site for your mobile users and even offer dedicated content that’s exclusive for them. With that said, that will mean that you will have to regularly update both websites. Also, make note that if your mobile website is not hosted on the same web server as your main site, Google may penalize your site.

Install WPtouch

Many web developers use plugins to help make their site mobile friendly. There are many choices out there, but the most popular and most intuitive is WPtouch. The WPtouch plug essentially takes your website and renders it for your user automatically. Developers Brave New Code have pre-programmed the plugin to pull the best content from your website and display it in a mobile friendly format.

Many web developers use plugins to help make their site mobile friendly.

Some customization is possible with the WPtouch plugin under the advanced options. A series of check boxes can allow you to change how certain items are displayed and even add menu items that were not originally rendered. You can also do some very minor tweaking to the layout in regards to colors and font size.

Mobile Stylesheets

Much in the same way that web developers create different CSS stylesheets for users on different browsers, mobile web developers can do the same thing to render websites for different mobile devices. This option is geared more for those with more technical knowledge or those with developers handling their site creations, but it does have a key advantage over plugins.

With stylesheets you can customize your content for each individual device. Have you ever visited a site that displays some content on Android but no on the iPad or iPhone? This is done via the use of stylesheets.

Responsive Design

If you are looking for more of a “one size fits most” approach to making your site mobile friendly, you should explore responsive web design for your site. Simply stated, a responsive web design will allow your website to automatically readjust itself depending on what type of mobile device you site is being viewed from.

Unlike plugins, stylesheets, and other mobile solutions, your content remains the same for each device and that content is re-sized and even rearranged automatically depending on device. This is via the use of fluid, proportion-based grid, CSS3 media queries, and flexible images. If that sounds highly technical to you, that would be correct.

Responsive web design at its core is a much more technically advanced design concept over other solutions.

Responsive web design at its core is a much more technically advanced design concept over other solutions. Fortunately, you can still take advantage of this without having to shell out hundreds to a web developer. There are numerous responsive design templates available online pre-programmed for you to use. This video on creating a mobile friendly site will show you how a responsive template works and how to find them.

If you are not sold on responsive design, make note that Google now recommends responsive web design for mobile sites. Mashable.com has even called 2013 the Year of the Responsive Web Design.

What Best Suits Your Site

While several options have been presented to you for mobile web design, you need to take the time and evaluate which option will best suit you site. If your site is more post driven, then WPtouch could be your answer. Those of you wanting to give different experiences based on device are better suited for stylesheets. Webmasters wanting to have a solution that covers multiple platforms will want to consider responsive design. Evaluate your needs and then choose a solution that is best suited for your site.

Photo Credit to Sean MacEntee

Did you like this Article?

[one_half]If so, why don’t you consider subscribing to The Design Range Newsletter? You’ll be kept informed once a fortnight on all the latest articles as well as exclusive tips and tutorials on increasing your income from graphic design.[/one_half][one_half_last]

[/one_half_last]

is a part of a team of design enthusiasts who created PressTheWord - a wordpress tutorial youtube channel. Be sure to check their channel for more tutorials.
website