In a previous post about “digital first” strategy for student newspapers, I said a digital strategy involves all three platforms: print, web and mobile. At issue here is that regular websites need to be optimized for mobile viewing – a “web” site is optimized for computer monitors, and it does not function equally well on the smaller smartphone screens.
Why bother about mobile site? That’s where the growth is. In describing digital strategies at Wall Street Journal, digital managing editor Narisetti says:
the device that currently makes up the largest proportion of WSJ’s traffic is the smartphone – which is the platform providing the fastest growth – especially from Android handsets.
Look at the screenshot of philadelphianeighborhoods.com and how the same site looks on an iPhone 4S screen. Philadelphia Neighborhoods is a student-run news site sponsored by the journalism department at Temple University.
When you launch the mobile browser on your smartphone, such as Safari on iPhone, and enter the website address for Philadelphia Neighborhoods, you will see the same website being displayed.
The biggest issue with this mobile site design is functionality and user experience – you have to constantly pin/zoom/pan on the small screen to view specific contents; if you want to navigate from section to section, you will have to zoom all the way in on the menu bar, carefully tap a menu item, and zoom in/out again on the new page.
Obviously, we need a site that is tuned up for mobile devices – for instance, the fashion brand Burberry has a website that adapts itself to mobile screens.
Below is a screenshot of Burberry website homepage, as well as screenshots of the same site on iPhone 4S. When you enter burberry.com into iPhone Safari browser, the site automatically adapts itself to fit the iPhone screen – it will look a little differently on other mobile devices such as an Android smartphone. In other words, the regular website will respond differently to different mobile devices, and this approach is called “responsive design.”
Some college media have also adopted a “responsive design” approach for their websites. CU-Citizen Access, a community news site run by the journalism department at UIUC, features such a design. Below are the screenshot of the website homepage, and three screenshots of the mobile site:
Stay tuned for another post in which I will discuss the different approaches to mobile site design: HTML5 vs native apps.
Related posts:
- A primer for journalism students: What is digital-first strategy?
- A year later: An inside look at the digital newsroom of Daily Emerald
- Need more evidence on why you should have a mobile-first mentality?
- Dramatic changes come with digital-first strategy of TCU student media
- College student newspapers are going “digital first”: Some observations and thoughts
- Gap between journalism education and journalism profession
- Analyzing 12 university-sponsored news sites for multimedia and digital journalism contents
For the record, Philadelphia Neighborhoods uses WordPress, and there are a variety of plug-ins that will deliver mobile-optimized viewing for non-responsive themes.
Thanks for the comment. How do you tell they use WordPress? I know theirs must be running a CMS but just cannot tell which one it is.
Usually, if you view the HTML source code for the front page of the site in question, if they use WP and they haven’t changed the folder structure, you’ll see folders like “wp-content/plugins”. Some sites mark clearly that they’re WP in the footer, but it can take some sleuthing.