Mobile News Design
Why you need to go mobile
Producing good journalism is not likely to be enough in the digital age of reporting. To grow an audience, it's all about engaging readers.
So, where are readers? More and more are migrating to mobile.
Mobile traffic has shot through the roof over the last couple of years. Indeed, 39 of the most 50 popular news sites now have more mobile than desktop visitors (although desktop visitors spend more time than mobile visitors on a site), according to the Pew Research Center.
So where do you start?
If you have a mobile website, you might want to think about building a responsive or adaptive website.
A news website today should be to convert to a low-resolution smartphone, a medium resolution tablet and a high resolution laptop. If your website isn’t visually appealing to readers when they are checking their phone at work or lounging with their tablet at night — you’re losing readers.
By creating a responsive or adaptive design, you only have to build one version of your website that will work well on everything from smartphone screens to desktops.
If funding is limited, we offer a set of best practices to create a mobile site or simplify your site design for mobile.
Choosing an online mobile format
What are responsive and adaptive web designs?
While similar in goal (to automatically reduce a web site to the size of the user's screen) the approaches are different. Both allow websites to be viewed in various screen sizes — for mobile devices, desktops and tablets — ultimately providing visitors with a better experience.
Both rely on the way the material is coded and delivered to the server and the browser. With responsive design, the page is sent to a browser, which changes the dimensions. With adaptive design, the server loads the version of a page that works best on each device.
Imagine that your content (i.e. stories, videos, photos) is water. With a responsive design, the “water” will always fit the container you pour it into. No matter the layout, the width of the elements is resized proportionally in relation to the changing window size, according to the Wordpress News Core.
Adaptive design, however, has a series of static and defined layouts that fit a specific set of screen resolutions. They can’t fluidly change to fit any screen resolution or device size, like its counterpart can.
Which is better?
There are pros/cons either way you go, but ultimately, the decision should be based upon the resources you have and the future you envision for your mobile site.
It should also depend on the publisher's intent -- to make the existing website look reasonably good on a smartphone (responsive) or to build a mobile experience from the get-go (adaptive). Here is a breakdown.
Comparing adaptive and responsive options
1. Responsive is more difficult to set up
Responsive design is the more difficult choice to pull off since it requires extra attention to the site’s CSS and organization to make sure it functions well at any possible size. It’s easier to make a few specific layouts for your website instead of making one layout that can work in any screen size. While this means that while each adaptive layout needs a bit of flexibility to work on several screen sizes, it is easier than making one layout that works for all of them.
2. Adaptive is less flexible
One drawback of adaptive design is that the final results don’t always display well on a variety of screen sizes. While responsive site designs are guaranteed to work well on any screen size, including new ones, adaptive designs only work on as many screens as the layouts are capable of. So if a new device with a new screen size is released, you may find out that none of your adaptive layouts fit well. Responsive sites are flexible enough to keep working on their own, but adaptive sites will likely need some occasional maintenance.
3. Responsive sites load faster
Adaptive websites need to load all the possible layouts they have in their arsenal, while responsive websites only need to load just the one that works for every possibility. Loading extra layouts takes extra time and resources, so know that adaptive sites will be a bit slower than their responsive counterparts. That also depends on the size of the site —a responsive site with 100 pages will be slower than, say, an adaptive site with 10 pages.
5. So, adaptive or responsive design?
Tallying up the score, responsive web design is almost always the safer option to choose. It always functions well regardless of new changes in screen sizes, it has better loading times, and is usually well worth the extra effort in putting it together. It is a better investment for securing all potential mobile customers.
For newer, smaller websites, adaptive design may be a better option to conserve resources. An adaptive site is easier to make, and the smaller size and audience would keep slower load times or less flexibility from being an issue.