Image is everything: Perking Up Your Website
- 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
- 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