An overview of some current things you can do improve your website content appearance.

1. Image is
Everything:
Perking Up
Your Website

2. Hello!
Laura Byrne-Cristiano
I am a former teacher turned content writer, event planner, and marketer.
You can find me at @NewYorkerLaura
2

3. 1.
Trends in Images
What works today is different
than five years ago.

4. Be a hero!
Want big impact?
Use big image.
4

5. “If your theme forces you to include a slider
(also named carousels) on your homepage,
please realize that it’s making you use a feature
that has no value for SEO.
A feature that is probably slowing down your
site by loading extra JavaScript.
And prevents your user from reading the good
stuff (your content) immediately.
It will most probably account for less
conversion as well.
--Yoast
5

6. But...but...but…Don’t people like sliders?
⬗ Only 1% of the people actually click on a slide, which almost
always was the first slide (Yoast)
⬗ Sliders confuse people, as you’re sending multiple offers they
may or may not be interested in at once (Yoast)
⬗ They slow down your site, negatively impacting your SEO and
conversion rate (Yoast)
⬗ Impact on accessibility
⬗ Sizing of photos is a perpetual issue
⬗ Most folks aren’t sticking around to see all the images
6

7. 7

8. 2.
What makes a
good image?
Emotional impact

9. A picture is worth a
thousand words
A complex idea can be
conveyed with just a single
still image.
You’re able to process large
amounts of data quickly.
9

10. People want to picture themselves in your universe, invite them in!
Rule of Three
 Individuals vs. crowds
 I need eyes and
emotion.
 Pass the quarter or
thumbnail test.
Use Your Space
 Optimize the images
 Fill your content
container with your
images.
 Use right or left align
sparingly throughout a
single page
Less is More
 Just because you can
do something in
Photoshop doesn’t
mean you should.
 Limit your filters and
effects
10

11. 11
Cropping is your friend

12. 3.
But I’m not a
designer or
photographer
Resources to make you
look good on a budget

13. Alternatives to Photoshop
• Canva
• PicMonkey
⬗ Graphics for everything:
◇ Social media sized images,
◇ Hero images
◇ Collages
◇ Infographics
13

14. 14
INFOGRAPHICS

15. ⬗ Don’t take images
⬗ Photographs for free by
◇ Unsplash
◇ Pixabay
◇ Pexels
Shout out toVal Vesa @adspedia
15

16. Affordable Photos
https://www.123rf.com/
https://www.shutterstock.com/
https://www.istockphoto.com/
16

17. Side-By-Side Comparisons
17
https://juxtapose.knightlab.com/

18. Maps
18
MapBox GoogleMaps

19. 4.
Social Images
More than an icon on your
header and footer

20. Pick the social media platforms that work for you and embed
images/video
WEBSITE
FACEBOOK
YOUTUBE
20
INSTAGRAM
TWITTER

21. 21

22. Twitter Embed: for Lists, Fan Reactions, Boosting Credibility, Fast News
22

23. 23

24. 5.
Tips for
Wordsmiths
Design is also how your words
are presented

25. Things that have had their day and need to pass into the annals of internet
yesteryear…yes, you love them, but they really need to go…trust me.
Marquees
PLEASE…STAND…BY…AS…I
SLOWLY…GET…MY…NEWS
…TO…YOU.
Hit Counters
They are meaningless. Google
Analytics, JetPack, and other get
you more relevant info.
Dated Animated gifs
If it didn’t start out as a video it’s
present day Claymation. Don’t be
the Gumby of the internet.
25
Dark Content Containers
I can’t read this can you? This is
making me super crazy. This isn’t a
great reading experience.
Rainbow Colors
Is the colour of the clear sky and
the deep sea. It is located between
violet and green on the optical
spectrum.
Overuse of stylizations
Too much italics in small fonts is
rough on the my eyes as is the
overuse of bold face type. Use
Blockquote in soundbites.

26. Sleek Cool Things
⬗ Drop Case
⬗ Beautifully styled H tags
and lists
⬗ Blockquotes, Pull Quotes
with Flair
26

27. 27
Thanks!
Any questions?
You can find me at @NewYorkerLaura
A big thank you to all the organizers and sponsors
that made WordCamp possible. Without their
volunteer time and generous support, this event
would not be possible.

28. Presentation design
This presentation uses the following typographies and colors:
⬗ Titles: Vidaloka
⬗ Body copy: Tinos
You can download the fonts on these pages:
https://www.fontsquirrel.com/fonts/tinos
https://www.fontsquirrel.com/fonts/vidaloka
⬗ Light brown #9e7c59 · Dark brown #473d37
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to
create new slides or download the fonts to edit the presentation in PowerPoint®
28