I’d like to share the outcome of a project we’ve been working on that positively impacts our top-level strategic web sites. Below is a high-level summary of the project. If you have any questions about this, please ask them in the comments section and we’ll be glad to answer.
Background/Challenge
We have recently been working to optimize our key strategic web sites for mobile devices, in order to ensure maximum accessibility and compatibility with all mobile platforms.
The challenge here is that manufacturers of mobile devices use a variety of platforms for mobile web browsing – some very “web-like”, and some not so much. So taking the content of a web site and making it work in all of the major mobile platforms requires dedicated design processes that target specific devices, and deliver content to those devices based on their capabilities. By doing so, we optimize the experience of browsing our sites on mobile devices without overwhelming the device beyond its capabilities, and we ensure that the mobile user experience for browsing our sites is of the highest quality.
Incidentally, we have always designed our web sites with mobile platforms in mind, as the process of building web standards-based web sites makes these sites mostly accessible in almost any platform. But in order to improve the experience for our users, we have undertaken the task of optimizing our key web sites for mobile devices, separate from our standard development practices.
The Results
The results of this process are that we have successfully optimized our key strategic content-related web sites – UA News Center (http://uanews.ua.edu), Research Magazine (http://research.ua.edu), and Dialog (http://dialog.ua.edu) – for all of the major mobile platforms, so that the content on these sites is easily accessible and navigable on all devices.
Of particular interest and focus during this process was development for the iPhone platform, which is growing in popularity and market share. We have built alternate versions of these web sites that are specifically tailored for the iPhone’s functionality using open source plug-ins that work with our content management system, WordPress, and the functionality of these sites is now very high for the iPhone.
Also, the UA Home Page (http://www.ua.edu) displays very well on the iPhone as well, as it has the exact look and functionality as it does in a web browser. It also displays well in a stripped-down format in many older mobile devices, but we will be working to further advance its mobile functionality by fine-tuning its mobile capabilties.
Examples
Below are some screenshots of each site in various mobile devices so that you can see how they now appear in these devices. We will continue to work to optimize and fine-tune these mobile versions of our sites and look for further opportunities to expand our reach to these mediums. These steps represent a significant upgrade in the mobile browsing experience for visitors to our web sites, and will help us continue to spread our messages to new audiences while staying at the forefront of technology trends.
Click for larger version
More:
- CSS for the Phone (WebTide)
- How to Test Websites for Mobile Devices (WebTide)
- The 5-Minute CSS Mobile Makeover (Perishable Press)
So how did you do it? Any technical details on how you set this up?
@Brad
I used a plug-in called Mobilepress. It’s a great plug-in that allows you to use different themes depending on what mobile device it detects.