So, to make this easy, let’s take a little visual tour. For background, I did a
random keyword search on Adobe Photoshop®*. Everyone likes Adobe Photoshop®, right?
First off, you’ll notice a difference in the meta data
displayed on the desktop vs. the mobile phone:
[Desktop version, click to enlarge]
It reads:“The best way to get Photoshop is with Creative Cloud. Upgrade from Photoshop to Creative Cloud & save 40%. Join now.” (96 characters, no
spaces)
Now, onto the mobile version.....
[Mobile version]
It reads:“The best way to get Photoshop is with Creative Cloud. Upgrade from Photoshop to Creative Cloud….” (It lost 17 characters)
As you can see, in the mobile version the meta data message was cut off, leaving out the special offer. So, it stands to reason, if you don’t want to lose
important messages or offers, put important information in the
front or shorten your character counts.
Tip
#1:
If you
want to create “Mobile first” meta data, shorten your character allowances and
keep your most important messages in the front part of the description.
Next, moving onto the main page (in the
desktop view), you’ll see a large header image, headline and right sidebar for the main CTA’s. It's a pretty standard layout.
[Desktop version, click to enlarge]
In the mobile version, you’ll see that the
page has been converted into a single column layout. The image has been cut on
the right side and the once horizontal content blocks now run vertically in a
linear display.
[Mobile version]
In the image directly below, you see the main content was prioritized from left to right (content on the right was listed first and so on). It follows that hierarchy all the way down the page. Notice, copy that looked like a few simple sentences now looks more like paragraphs—something that may feel overwhelming for some readers, particularly if they have to scroll for miles.
For this reason, it's important to keep copy and content modules to a minimum. If a content module doesn’t have to be there,
don’t include it. Link to another page
where you can house the additional content if you must, but don’t overcrowd
your main page with anything but your primary messages. No one wants to go on a scavenger
hunt through miles of linear content modules. They don’t want to go through
layers of pages either—so if you do decide to house
additional information elsewhere, don’t go deeper than L2 and give them an
easy, fat finger-friendly way to get back.
A word on SEO- the reduced word counts may affect the number of
keywords you are getting on a page. This means that in addition to your copy
distillation, every word counts. Make
sure you are using as many keywords in there as you can (while of course balancing
lengths….big sigh).
Tip #2
Keep word counts low and keywords rich. Also limit the number of copy modules and additional links to a bare minimum.
And what about the high-profile CTAs
originally on the right sidebar?
This is where horizontally oriented layouts
really become a problem for mobile. As you can see, the right sidebar was not
included in the main vertical section and was therefore prioritized after
it. When I say after it—I mean after the
entire section—buried below bottom nav. I’m not going to speculate on Adobe’s
content strategy—for them perhaps the other information was more important than
their CTAs. However, for most companies,
they put their CTAs in those sidebars for a reason—to get noticed.
At first glance, this is more a design issue
than a copy issue. Sure, you could wait
and leave it to the UX guys to solve…..OR, you can take the initiative and
create safeties within your copy decks to combat these kinds of challenges now.
For example, instead of writing paragraphs and then having a separate CTA somewhere else on the page, combine them. You want to capture your main message or messages up front in the
header, any subheads and very first sentences. Also make sure to include your main CTA
in the very first copy block. Then write and repeat, using this strategy over and over again throughout the page in a hierarchical order.
Tip #3
Get
right to the point in headers and first sentences and always include your most
important CTA in your first copy block/module.
Additionally, like designers that are
designing based on grids, you too should approach your copy “block-by-block”. Instead of writing paragraph-to-paragraph,
write message-to- message (or bullet-to-bullet). Follow a hierarchy, putting
the most important messages and CTAs first.
Tip #4
Skip
the traditional long form. Write bite-size pieces in order
of importance.
Lastly, when you are working with a team and
can have some influence over the end outcome, address the mobile aspect of web
design early. For example, instead of
just handing the copy deck over to your designer and giving them control over
how content is organized, work together and make sure the most important things
will get top billing when it comes to the desktop and mobile devices. Also weigh in to ensure other important
things, like finger-friendly buttons, are included in the overall design.
Tip #5
When
you can, work collaboratively with the entire team to ensure important messages
aren’t lost in desktop-to-mobile conversions.
A note to my readers: If you can offer insights or additional tips, please comment!
And as always, if you find this blog helpful, pass it along to your friends on Twitter or Facebook. You can follow me @Kristenmarie2go
*Adobe Photoshop® is a registered trademark
of Adobe Systems Incorporated. Images and examples are for illustrative
purposes only and any views reflected in this blog represent the opinion of the writer.
