Five Points Of Inspiration From Engadget's Responsive Redesign

We all hailed The Boston Globe when it launched its responsive site last year, and Engadet -- one of the oldest and largest technology blogs -- recently launched a similar redesign. Here are a few points where newspapers and other media can draw inspiration as they move increasingly to responsively designed websites. 1. Display section header as you scroll This is something I haven't seen in this style before. For the more extensive, long form articles on Engadget that are broken up by section headers, the title of the header remains at the top of the window as you scroll through. This visual indicator helps those of us with short attention spans to keep track of where we are in a story and remember the the theme for that section. It also helps us feel like we're being productive -- recognition that we're making progress as we read. 2. Condensed menu for mobile This is perhaps the hardest part of responsive design, especially for newspapers who have layers and layers of excessive navigation options for every section and subsection. That doesn't translate to a small screen on mobile. Boston's approach was to create a full-screen menu of all the top-level sections. For Engadget, they highlighted the main categories in a top section, then popular subsections below. 3. Simple stream of headlines Because Engadget is a blog and follows a typical blog layout of reverse-chronological headlines and excerpts, it's easier to make the responsive layout take the headlines-only format. It's more digestible on mobile, in my opinion, than complex hierarchical layouts that try to mimic the desktop version. 4. Hiding comments by default When you filter down to the story level on both desktop and mobile, the comments are hidden by default with an option to load them if you want to see them. This decision was probably made for page load considerations, and to easily let users get to links at the bottom without having to scroll through tons of comments if they don't care about them. Of course, this approach won't work for everyone, but I think it does work really well on mobile. Though, I wish they also had a "hide comments" button. 5. Big, visual display for photo galleries. Engadget's treatment of photo galleries and videos is simple but effective. The desktop version displays a visual grid of thumbnails and changing the browser to a mobile size provides a list visual list of galleries. (Compare that to how some newspapers display photo galleries -- big difference). Bonus: Easily digestible info at a glance Another awesome feature worth noting is the simplicity of its review pages. At a glance, you can easily see pros, cons, overall takeaways and price of major reviews. It gets away from the standard headline/excerpt format that publishers tend to default toward. Imagine if every news landing page had an overview of key facts and sources instead of an excerpt of the beginning of the article.

Fishbowl

Five Points Of Inspiration From Engadget's Responsive Redesign

Lauren Rabaino

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Lauren Rabaino