redesign in cascade server
DESCRIPTION
#CSUC14TRANSCRIPT
Kelly Truong - @kelliPhoReal
Lisa McWilliams - @lisamc404
REDESIGNING IN CASCADE SERVER
#CSUC14
Planning Implementation
Two Phases of Redesign
#CSUC14 #CSUC14
Take advantage of latest technologies
Unclutter your site Rebrand
Benefits of Redesign
#CSUC14 #CSUC14
Responsive Design
• Mobile Friendly
• Cross-browser Compatibility HTML/CSS Advances Social Media
Take Advantage of the Latest Technologies
#CSUC14 #CSUC14
• Evaluate your site’s purpose
• Audit content Remove the Irrelevant Focus on the relevant
• Set a clear path Navigation Links
Unclutter Your Site
#CSUC14 #CSUC14
• Express change
• Stand out
• Stimulate growth
Rebranding
#CSUC14 #CSUC14
Old Site:
Which is more appealing?
#CSUC14 #CSUC14
New Site:
Which is more appealing?
#CSUC14 #CSUC14
Old Site:
Which is more appealing?
#CSUC14 #CSUC14
New Site:
Which is more appealing?
#CSUC14 #CSUC14
First
impressions
DO
matter!
Benefits of Redesign
#CSUC14 #CSUC14
94% of people say that design is a reason why they do not trust a website. Improve trust:
• Avoid stock photos
• Avoid pre-made templates
• Showcase social media & followers
• Include media coverage links
Design Statistics
#CSUC14 #CSUC14
Most users: Read in an
F-shaped pattern
Design Statistics
#CSUC14 #CSUC14
Most users: Read only the first two paragraphs Only scans the first few words of
subtitles, bulleted lists, and paragraphs
70% of users would look at lists with bullets vs. 55% for lists without
Design Statistics
#CSUC14 #CSUC14
Color schemes impact growth rates! Dark (2%) vs. Light (1.3%) Green: 3% traffic growth Red: (-1.35%) traffic growth
Design Statistics
#CSUC14 #CSUC14
Phase 1: Planning
#CSUC14 #CSUC14
Evaluate and Audit
① What is your site’s purpose?
② Does your content reflect this purpose?
③ How easily can your content be accessed?
Phase 1: Planning
#CSUC14 #CSUC14
Involve your content editors
• Their insight is crucial!
Phase 1: Planning
#CSUC14 #CSUC14
h
Think about what you want.
#CSUC14 #CSUC14
A Warning:
#CSUC14 #CSUC14
Designs that don’t accommodate CMS
• Class names on body tag
• Beware of old and new JS interactions
• Non-fluid widths
• Too many unique layoutsKISS
Examples of Design Gone Wrong
#CSUC14 #CSUC14
Time to put in work!
#CSUC14 #CSUC14
Add a new output Decide if you need new fields
• You can hide them Update current formats and static
blocks or create new ones
• You might be surprised how little you have to change
Phase 2: Implementation
#CSUC14 #CSUC14
Create a new destination to test the design
Freeze content Publish new output to live site Voila! The site is redesigned!
• Continue to monitor for oversights
Phase 2: Implementation
#CSUC14 #CSUC14
Voila! - Implementation Magic
The design process is a good time to consider reducing the number of templates/content types you are currently using.
Check for broken links
Other considerations
#CSUC14 #CSUC14
Publishing from templates – you need to consider all content types currently using that template during the redesign process.
Other considerations
#CSUC14 #CSUC14
Questions?
#CSUC14 #CSUC14
“How to Successfully Redesign Your Website” – Haris Bacic, Forbes Magazine http://www.forbes.com/sites/allbusiness/2013/08/19/how-to-successfully-redesign-your-website/
“The Ultimate 9-Step Website Redesign Checklist” – Shannon Callarman, Cubicle Ninjas http://cubicleninjas.com/9-step-website-redesign-checklist/
“F or Z Pattern in Web Design?” – Blake Imeson, LimeCuda http://limecuda.com/f-or-z-pattern-in-web-design/
“Why Good Website Design is So Important: The Stats and Figures to Prove It” – Calvin Sellers, InstantShifthttp://www.instantshift.com/2013/09/02/importance-of-effective-website-design-infographic/
Resources
#CSUC14 #CSUC14