Adobe Creative Cloud

April 27, 2015 /UX/UI Design /

Content First for (Mobile) Screens of All Sizes

The rapid and seemingly endless proliferation of device sizes and form factors can be exhausting! The new landscape means people are coming to the web on a whole range of devices, from tiny smart watch screens to ‘phablets’ that look comically out of scale when making calls.

So what’s a designer to do? The good news is that regardless of the size of the mobile screen, they all have one thing in common. Content! Users are coming to these devices to devour content in their quest to achieve tasks.

A content first approach means designing with and understanding the actual content as early as possible. It honors content as the raw ingredient of any experience.

The risks of content… later

  • The project outputs of templates filled with lorem ipsum may not meet the needs of the client when the content gets poured in.
  • The content ‘breaks’ the design. Text wrapping and awkward layouts are symptoms of this.
  • Clients often underestimate the effort that goes into creating, editing and imputing content, which vastly delays projects. We can help by starting to think about content earlier.

Tips and Tricks for Content First

1. Do a content audit

A content audit is an inventory of existing content on a site. This is especially powerful when undertaking a redesign of a large site, and helps to get the lay of the land. This usually takes the form of a spreadsheet, detailing each page, page title, url and the content type found on the page. You can tailor these fields to suit your purposes.

content audit

Image source: http://bit.ly/1HmCXqF

This is a great opportunity to think about how fresh or relevant content is, and whether some of it might need to be archived. If you don’t have the resources for a full audit, a content sample or partial audit can be hugely helpful.

Once your content audit is complete, you can work to identify what should be kept, repurposed and completely binned. This upfront work is a great way to find gaps and to get you off on the right foot, designing with the content in mind.

2. Use proto-content

Lorem ipsum is a UX designer’s enemy. It is a shape shifting beast, which conveniently expands to fill the desired space. It prevents us from asking the tough questions we need to ask like – what date format will we use? How long will these headlines typically be? What happens if there is drastically less content? Or radically more?

events

Image source: http://bit.ly/1OfvkXa

The alternative is to get as close to the real thing as possible. You could try:

  • Writing copy yourself – approximating what you think the content will be. This is a great opportunity to inform the type and tone of content that will make for the best user experience – especially when dealing with transactional flows, CTAs and instructional copy.
  • Using existing copy. This is a great way to be realistic about lengths of headings, product descriptions and CTAs.
  • Using competitor content – looking at similar sites can be a great way to get a sense of the type of material to expect your design to accommodate.

Be clear that the content provided is for placement only, and to ensure a process is in place for the final design to be populated with actual content.

3. Try your designs out at scale

Best of all is to get it on the relevant device screen. Put your design through its paces and try it out at different screen sizes.

  • Email yourself JPGs and open them on your smartphone.
  • Print out screens to scale and stick them to the device.
  • Tools like LiveView facilitate doing this as you work.
  • Viewport resizers are a quick in-browser way to test. I like ish as it does not focus on specific breakpoints, but rather ranges.

Content first is a great way to move your projects towards better UX that will be a joy to interact with on screens of all sizes!

UX/UI Design