How to Mobile-Optimize a Wordpress Website

Posted by PrabhasPokharel on Jul 29, 2010
Author: 
Prabhas Pokharel
Abstract: 

Publishing for the mobile web is an important way to reach audiences on mobile phones. This screencast demonstrates an easy-to-use tool that can enable many content producers pubish for the mobile web. Wordpress.org has developed software which lets many around the world create websites fairly easily. This tool, the Wordpress Mobile Pack, makes it easy for those content producers to also publish on the mobile web.

In this short how-to video, we show how easy it is install the Wordpress Mobile Pack and generate a mobile version of websites, along with pointers to the more advanced features of the software.

Publishing for the mobile web is an important way to reach audiences on mobile phones. This screencast demonstrates an easy-to-use tool that can enable many content producers pubish for the mobile web. Wordpress.org has developed software which lets many around the world create websites fairly easily. This tool, the Wordpress Mobile Pack, makes it easy for those web publishers to now publish on the mobile web.

In this short how-to video, we show easy it is install the Wordpress Mobile Pack and generate a mobile version of websites, along with pointers to the more advanced features of the software.

(If the embed doesn't work, view "Mobile Optimize your Wordpress-based Website" on YouTube. You can also view "Mobile Optimize your Wordpress-based Website" on Vimeo).

 

We start with two tools:

  • A newly installed website based on Wordpress.org software. Installing Wordpress.org software is extremely easy if you have access to a web server with a MySQL database; instructions are on the site. If you don't have your own hosting and are using a hosted Wordpress blog, this how-to is not for you: Wordpress.com-hosted blogs are already mobile-optimized for browsing.
  • We use the Opera Mini Simulator to demonstrate what the website will look like on many handsets. Opera mini is a popular web browser that works on many mobile handsets (smartphones and feature phones).

When we load the website on the simulator right after the Wordpress software is installed, we notice that the mobile web experience isn't very good. A lot of scrolling is needed, the navigational links are hard to get to, and not a lot is visible at the first glance of the website.

So we search for and install the "Wordpress Mobile Pack" (after clicking on "Plugins," and then "Add New"). We see immediately in the Opera mini simulator that the website looks nicer.

After adding some content to the website (blog posts and pages), we return to the mobile site. It is obvious that compared to the first view, navigational links are much easier to get to, and scrolling is only necessary in one direction. When we click on an individual blog post, we notice that images have been resized, there is a commenting form that will load on most mobile handsets (only simple HTML is used), and the page generally navigates well on a mobile browser.

Finally, it is time to highlight some of the power of the Wordpress Mobile Pack beyond what we demonstrate. The Wordpress Mobile Pack has added some new themes to the Wordpress installation that come in two versions: one for high-end website based handsets and one for low-end handsets. There is a settings page called "Mobile Switcher" that lets administrators decide how to redirect to mobile content, and where mobile themes can be selected. The "Mobile Widgets" page lets administrators customize which Wordpress widgets to show on the mobile site, which is especially useful for websites which integrate socila media content using widgets.

There are many more things in the Wordpress Mobile Pack that were not mentioned in this how-to video. For example, the pack includes admin themes so users can administer websites from their mobile phones. When blog posts or mobile pages are extremely long, they are broken up into chunks to support limited handset memories. There is also advert integration with mobile ad providers like Admob, and a list of other features that are worth exploring more deeply once the pack is installed, and your website is mobile optimized with some default settings.

[Note: The Wordpress Mobile Pack isn't the only software that lets you mobile optimize Wordpress-based websites (here are more), neither is Wordpress the only publishing software to easily produce mobile web pages. These are just the tools we picked for this brief how-to video.]

Prabhas Pokharel is Project Lead for the Mobile Media Toolkit. He tweets at @prabhasp.

Mobile Tools: 
How to Mobile-Optimize a Wordpress Website data sheet 12791 Views
Author: 
Prabhas Pokharel
Abstract: 

Publishing for the mobile web is an important way to reach audiences on mobile phones. This screencast demonstrates an easy-to-use tool that can enable many content producers pubish for the mobile web. Wordpress.org has developed software which lets many around the world create websites fairly easily. This tool, the Wordpress Mobile Pack, makes it easy for those content producers to also publish on the mobile web.

In this short how-to video, we show how easy it is install the Wordpress Mobile Pack and generate a mobile version of websites, along with pointers to the more advanced features of the software.

Publishing for the mobile web is an important way to reach audiences on mobile phones. This screencast demonstrates an easy-to-use tool that can enable many content producers pubish for the mobile web. Wordpress.org has developed software which lets many around the world create websites fairly easily. This tool, the Wordpress Mobile Pack, makes it easy for those web publishers to now publish on the mobile web.

In this short how-to video, we show easy it is install the Wordpress Mobile Pack and generate a mobile version of websites, along with pointers to the more advanced features of the software.

(If the embed doesn't work, view "Mobile Optimize your Wordpress-based Website" on YouTube. You can also view "Mobile Optimize your Wordpress-based Website" on Vimeo).

 

We start with two tools:

  • A newly installed website based on Wordpress.org software. Installing Wordpress.org software is extremely easy if you have access to a web server with a MySQL database; instructions are on the site. If you don't have your own hosting and are using a hosted Wordpress blog, this how-to is not for you: Wordpress.com-hosted blogs are already mobile-optimized for browsing.
  • We use the Opera Mini Simulator to demonstrate what the website will look like on many handsets. Opera mini is a popular web browser that works on many mobile handsets (smartphones and feature phones).

When we load the website on the simulator right after the Wordpress software is installed, we notice that the mobile web experience isn't very good. A lot of scrolling is needed, the navigational links are hard to get to, and not a lot is visible at the first glance of the website.

So we search for and install the "Wordpress Mobile Pack" (after clicking on "Plugins," and then "Add New"). We see immediately in the Opera mini simulator that the website looks nicer.

After adding some content to the website (blog posts and pages), we return to the mobile site. It is obvious that compared to the first view, navigational links are much easier to get to, and scrolling is only necessary in one direction. When we click on an individual blog post, we notice that images have been resized, there is a commenting form that will load on most mobile handsets (only simple HTML is used), and the page generally navigates well on a mobile browser.

Finally, it is time to highlight some of the power of the Wordpress Mobile Pack beyond what we demonstrate. The Wordpress Mobile Pack has added some new themes to the Wordpress installation that come in two versions: one for high-end website based handsets and one for low-end handsets. There is a settings page called "Mobile Switcher" that lets administrators decide how to redirect to mobile content, and where mobile themes can be selected. The "Mobile Widgets" page lets administrators customize which Wordpress widgets to show on the mobile site, which is especially useful for websites which integrate socila media content using widgets.

There are many more things in the Wordpress Mobile Pack that were not mentioned in this how-to video. For example, the pack includes admin themes so users can administer websites from their mobile phones. When blog posts or mobile pages are extremely long, they are broken up into chunks to support limited handset memories. There is also advert integration with mobile ad providers like Admob, and a list of other features that are worth exploring more deeply once the pack is installed, and your website is mobile optimized with some default settings.

[Note: The Wordpress Mobile Pack isn't the only software that lets you mobile optimize Wordpress-based websites (here are more), neither is Wordpress the only publishing software to easily produce mobile web pages. These are just the tools we picked for this brief how-to video.]

Prabhas Pokharel is Project Lead for the Mobile Media Toolkit. He tweets at @prabhasp.

Mobile Tools: 

Publishing for the mobile web and creating a Mobile App

By using RSS enabled website news can be delivered to a broad audience.

By using an application like biNu the content can be delivered to a mobile handset in quickly and very effeciently. The Content owner could even create their own mobile phone app by using a simple biNu wizard without writing a line of code.

 

 

Vimeo HTML5

Vimeo have just launched an HTML5 service - http://vimeo.com/blog:334 - whilst it might not cater for all different types of mobile phones, it's certainly a start. There is even a link on that post about how to embed the new format on Wordpress blogs.

Personally, I find Vimeo videos slightly higher quality than YouTube. 

We will get there

Benedict, thanks for the heads up.

We will get there soon. Currently, iFrames are not allowed on the site (due to other reasons), but the Vimeo HTML5 exports require iFrames. Once that restriction is removed, we may have vimeo videos.

For now, enjoy the Youtube versions :)

We are putting all screencasts on YouTube

and testing mobile devices for usability. We'll be replacing the Vimeo embeds with YouTube embeds retroactively and going forward.  Thanks for the GREAT nudge and our apologies for such poor judgment!

Hmmm, a mobile how-to using

Hmmm, a mobile how-to using Flash ... I guess you're making a statement about your disdain for Flashless mobile users.  Okay.  Have you heard about any mobile how-tos that don't use Flash?  Could you point me to one of those instead?

Now mobile compatible

As Katrin said, thanks for the nudge! We have updated the how-to to embed the YouTube version. It is still embedded with Flash, but hopefully you can click through the link below to the video. For reference, the video is now here.

You are very right...

Yes - you are so right in regard to these how-to screencasts - they are not mobile-compatible.  Bad judgment on our part. We are investigating non-flash ways to deliver this content in a visual way (youtube probably) so if you have suggestions for us in that regards, please leave a comment! 

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><p><br> <b><i><blockquote>
  • Lines and paragraphs break automatically.

More information about formatting options