This presentation was used during our GFAR webinar on "The future of online media", announced here: https://blog.gfar.net/2016/10/09/upcoming-webinar-predicting-future-online-media/ Check out the live webinar recording here: https://youtu.be/N8UkwOoI9hQ

1. bells & whistles
sound good?
do
webdesign trends and tools
to spend less and impress
Fabio Fidanza presents
a camel drinks a coke and cries in Erfoud (Morocco)

2. I NEED A NEW CAR TO GET TO WORK

3. IS A FERRARI THE RIGHT CAR FOR YOUR JOB?

4. what’s our focus when we write our requirements?
A WEBSITE IS A COMMUNICATION TOOL
Delivering the messageBell & Whistles versus

5. WHAT IS THE OUTCOME OF
WOW-ORIENTED DESIGN?

6. RESIST THE
MERMAIDS’ CHANT
they’ll try to sell you
that amazing parallax effect
that’s so cool it will freeze your computer instantly

7. LET THE DESIGN FOLLOW
YOUR COMMUNICATION STRATEGY
not a single user wants
to waste their time on your website.
You should build an experience that is worth
every second spent on your pages

8. HOW TO APPROACH
THE TEMPTATION
a few examples

9. n rotating items, n-1 of which are invisible
THE CAROUSEL
• it makes everybody
happy (except for your
users)
• it’s interactive (!)
• it has a very low CTR
• it occupies the first portion of the page your
users will see
• Almost nobody will see slides after the first
• If programmed poorly, it can be very
frustrating
• Who’s deciding the order?
https://erikrunyon.com/2013/01/carousel-stats/
Yep nope

10. up and down, up and down, cool! my computer is burning, close tab
THE PARALLAX
• it looks awesome
• it can engage your users
to scroll up and down to
see things moving and
trigger animations
• it’s CPU intensive: it can perform
poorly on mobiles and old PCs
• if done using a framework it can be
heavy to load
• after the first visit a user may want to
get right to the content
• the effect itself can get more
attention than the real content
• if done poorly can be frustrating if
not dizzying
Yep nope

11. 10am: cool! – 11.30a.m: when does it stops?
BACKGROUND VIDEOS
• it’s a great tool to show
that things are
happening on the field,
much better than a
(stock) photo
• it doesn’t interfere with
user interactions (if done
properly)
• if poorly encoded, it can be heavy to
download
• a stock video is worse than a 1000
stock photos
• you need a good video
• you need a good editor (really)
• overlaid text can be hard to read
• it can impact performances on slow
devices
Yep nope

12. React to Angular now
JAVASCRIPT ONLY WEBSITE
• a good choice for
complex web applications
• did I say
web applications?
• You need SEO and your
web developer know well
what isomorphic
javascript is
• you need SEO
• you have a website which is not a
web application
• you’re not a long-time friend with
your web developer
Yep nope

13. RESPONSIVE
😱

14. RESPONSIVE
☺
CONTENT PRIORITIZATION
SERVE THE RIGHT ASSETS
WTH IS MOBILE FIRST?
GRACEFUL DEGRADATION VS PROGRESSIVE ENHANCEMENT

15. PROTOTYPING
Can you please replace the Lorem Ipsum
in the home page intro with this text?
😫
web designer doing
mockups in Photoshop
🏄
web designer doing
mockups in HTML

16. HOW DID IT GO?
were you able to analyze every aspect we examined?

17. ©
KNOW THE KNOWLEDGE
YOU
the communication
specialist
the ACCOUNT MANAGER
the DEVELOPER
the UI DESIGNER
the UX DESIGNER
the INFORMATION
ARCHITECT
©YOUR BOSS
©the STAKEHOLDERS
Who knows what? Who talks with who?
WEB AGENCY

18. KNOW THE KNOWLEDGE
YOU
the communication
specialist
the ACCOUNT MANAGER
the DEVELOPER
the UI DESIGNER
the UX DESIGNER
the INFORMATION
ARCHITECT
©YOUR BOSS
the STAKEHOLDERS
Who knows what? Who talks with who?
WEB AGENCY
the
DEVIL’S ADVOCATE

19. MAKE A CHECKLIST OF WHAT YOU’RE NOT ABLE TO
HANDLE AND/OR UNDERSTAND
User Research
Information Architecture
User Experience
User Interface Design
Software development
(languages, versioning, development cycle)
Server setup
Content Management Systems
Visual Design
Project management

20. FIND A DEVIL’S ADVOCATE
AN EXPERT THAT CAN HELP YOU HANDLING:
RFP WRITING
⇣
AGENCY SELECTION
⇣
PROJECT MANAGEMENT
⇣
QUALITY CONTROL
they must live at least 3000 miles from the agency

21. BACK TO THE TRENDS
a few more things you should care about
and they won’t probably try to sell

22. What’s S.E.O.? I just publish great content and I ’m first on Google
MODERN DAYS SEO
SEMANTIC MARKUP
SCHEMA.ORG
OPENGRAPH
TWITTER CARDS
GOOD HTML5 MARKUP 😬
GET RID OF OLD STUFF
MEGA SEO FOOTERS
KEYWORD FILLED ARTICLES
PAID LINKS
ANCHOR ENGINEERING

23. KARMA–LAW COMPLIANCE-SEARCH ENGINES-MOBILES
BREAKING NEWS
ACCESSIBILITY IS NOT JUST
FOR DISABLED PEOPLE

24. IN 2016 SOME 69 MILLIONS CARS WERE RECALLED
IN THE U.S. DUE TO FAULTY AIRBAGS
Car seller: Mrs. Thompson, your car can possibly have a faulty
airbag that could pose deadly risks to you and your passengers.
We need to fix it as soon as possible.
Mrs. Thompson: I don’t care. I’ll wait until I get a new car.
Car seller: 😐

25. NEVER UNDERESTIMATE
MAINTENANCE AND UPGRADES
an old, unmaintained cms can be extremely dangerous

27. READY-MADE
WEB DESIGN
what to ask yourself when
you meet a ready-made
theme for your cms

28. • Is my brand so popular/unique it needs a custom designed website?
• Do I have money for a custom designed website?
• Do close competitors of my business use the same theme?
• Which level of customization the theme offers?
• Is it coded well?
• How does it support my Information Architecture?
• Is it well supported? (documentation, forum, customer service)
• Is it accessible?
• Is it SEO-friendly?
• Does it impact the backend too?
THE KEY QUESTIONS BEFORE BUYING A THEME
is your web agency selling you a custom design?
J O K E O F T H E D A Y

29. HOW DO YOU FEEL NOW?

30. HOW TO FIGHT ANXIETY IN YOUR WEB PROJECT
WRITE A CLEAR RFP
CONSIDER FLEXIBILITY IN YOUR CONTRACT
USE A TWO-PHASES APPROACH
HIRE SOMEONE THAT INTEGRATES YOUR KNOWLEDGE
DEFINE MEASURABLE MILESTONES
NEVER FORGET MAINTENANCE/UPDATES/SECURITY

31. QUESTIONS AND HOPEFULLY ANSWERS
TOP SECRET & PERSONAL INQUIRIES
fabio@macaronibros.com