SlideShare a Scribd company logo
1 of 44
Download to read offline
A DESIGNER’S GUIDE 
TO WORDPRESS 
WordCamp Toronto 2014
JAMES HIPKIN 
Started in traditional 
advertising 
Moved over to direct 
marketing 
Been involved with digital for over ten years 
Currently owner and Managing Director at 
Red8 Interactive
OVERVIEW 
What you need to know about websites 
The WordPress Content Management System (CMS) 
Implications for designers 
Things to watch out for
WEBSITES 
Understanding how 
websites are built 
makes building them 
easier (less expensive) 
using WordPress or any 
other technology
SOME BROAD POINTS 
Websites are integrated systems—a 
small change in one place can have a 
big impact in other, often 
unexpected places 
Design for mobile first 
Design for 72 dpi 
A change is never a 
“little thing”
STRUCTURE 
HTML is the framing—it 
uses “elements” to tell 
the browser what 
to display
STYLE 
CSS tells the browser 
how elements will 
be displayed
HTML and CSS work 
together to create 
both an aesthetic and 
functional end result
FONTS 
Web-safe fonts are, well, safe 
Fonts treatments are not rendered consistently 
across browsers
FONTS 
Font services can help add variety—use them for 
Headers and Subheads 
Design so the site won’t break if the desired font 
isn’t available
FONTS 
Use font effects carefully 
• Modern browsers support many new treatments 
(CSS3) but older IE browsers don’t 
• To achieve font effects in older IE browsers, shadows, 
glows, etc., we need to use images, which don’t scale, 
affect performance and aren’t SEO friendly 
• Design sites to degrade gracefully in IE browsers
MOBILE FIRST 
50%+ using smartphone/tablet 
over desktop users 
Mobile devices outnumber PC/ 
Mac sales 
Mobile designs should not be 
an afterthought Share of U.S. Time Spent on Digital Media by 
Platform Source: comScore Media Metrix 
Multi-Platform Total Desktop Audience and 
Mobile Audience Age 18+ Date: June 2013
MOBILE FIRST 
When designing for mobile, keep in mind the core 
functionality of your site 
• what will the user need 
on each device? 
Design for hand position 
Use a 12-column grid 
Keep it simple
RESPONSIVE OR ADAPTIVE?
RESPONSIVE 
Responsive—adjusts the size of elements, it can be fluid, 
or not, and repositions them based on screen size
ADAPTIVE 
Adaptive also adjusts the size and repositions elements, 
and it changes what content is available based on the 
device (break points)
WORDPRESS
CONTENT 
WordPress manages content in two ways: 
• static content—content 
that isn’t managed using 
WordPress, it’s held within 
the HTML 
• dynamic content—content that is managed by 
WordPress, it’s held in a database
THEMES 
WordPress uses a theme to create a specific look for 
the website—you are designing the theme 
Think of WordPress as the operating system, and the 
theme is the software that determines how the site 
looks, and what and where content is displayed
THEMES 
A theme is a collection of templates and stylesheets 
There are a lot of pre-built themes available 
• some are free, and some are premium 
• some are good, and some, not so much… 
A custom theme gives you the greatest flexibility, will 
make the site unique, and performs better
TEMPLATES 
Templates manage the structure of pages, and provide 
page-level functionality
PLUGINS AND WIDGETS 
Plugins and widgets extend WordPress’ functionality 
• most are free, some are premium 
• they can add functionality easily and quickly 
• they can also add bloat, affect performance, and 
impact security
POSTS 
Posts are used to add specific, dynamic, or time sensitive 
content to pages 
• custom post types 
give designers a lot of 
flexibility and control
PAGES 
Pages are a specialized form of post 
• prebuilt templates 
provide functionality 
and structure to the 
page
IMPLICATIONS FOR DESIGNERS
EXISTING THEME VS. CUSTOM 
Consider designing with an existing theme in mind 
• quality varies so before you start customizing, 
have your developer check it out to be sure it’s 
stable and supported
PREMIUM THEME SOURCES 
Select a theme from an established theme vendor— 
the code is solid and support is available 
Some to consider: 
• Studio Press 
• iThemes 
• Elegant Themes 
• Woo Themes
CUSTOM THEMES 
If your site is complex, and/or you need a lot of control over 
how content is displayed a custom theme will be required 
Custom themes also tend to be lighter, which improves 
performance
TEMPLATES 
Control the number of templates 
• a change in page structure or functionality requires 
a new template 
• build wireframes first
VARIETY 
Involve a WordPress 
developer early and often 
—they will help you 
understand: 
• when a new 
template is required 
• how to create a variety using Custom Post Types, 
Hooks, Filters and styles
STYLE 
The stylesheet is used to customize a theme 
• plan how dynamic content will be styled 
• consider all the controls on the visual editor and 
provide style direction 
The Wordpress visual editor
PLUGINS AND WIDGETS 
Know your plugins 
Design to their capabilities
≠ 
Snow Report Plugin 
GoTahoeNorth.com Design
THINGS TO WATCH OUT FOR
WHEN YOU DESIGN 
Think about the Navigation 
• show us how you want it to work 
• custom navigation is possible but expensive 
• mobile navigation should push content over or down
WHEN YOU DESIGN 
Footers are often forgotten 
• a lot of info of secondary importance can be 
located in the footer 
• footers need design love too!
WHEN YOU DESIGN 
Provide a font hierarchy 
• Especially important when using a font service 
Test the design using the fonts in the hierarchy
WHEN YOU DESIGN 
Think about how you want links to display 
• there are four states: resting, hover, active 
and visited 
• no hover on mobile, just say’n 
• give links and action buttons enough space to be 
practical on mobile devices
WHEN YOU DESIGN 
Secondary and error 
pages need to be 
considered 
• 403 Forbidden, 
404 Not Found, 
Privacy Policy, 
etc.
WHEN YOU DESIGN 
Design the forms 
• keep plugin capabilities in mind 
• external connections to CRM or email services can 
dictate form structure
WHEN YOU DESIGN 
Design the login screen—give yourself some credit
WHEN YOU DESIGN 
Please, please 
follow Photoshop 
best practices 
Read and follow 
the guidelines at 
Ps Etiquette
ASK EARLY, ASK OFTEN 
If in doubt, check with an experienced WordPress 
developer—there is almost always a solution
THANK YOU! 
Red8 Interactive 
San Francisco 
St. Louis 
James Hipkin 
james@red8interactive.com 
415.789.3685

More Related Content

What's hot

Dreamweaver CS4 Site Setup Wizard
Dreamweaver CS4 Site Setup WizardDreamweaver CS4 Site Setup Wizard
Dreamweaver CS4 Site Setup Wizard
websolws01
 
Dreamweaver cs4 site setup wizard
Dreamweaver cs4 site setup wizardDreamweaver cs4 site setup wizard
Dreamweaver cs4 site setup wizard
websolws01
 
Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!
Julie Kuehl
 

What's hot (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
Between a Block & a Hard Place
Between a Block & a Hard PlaceBetween a Block & a Hard Place
Between a Block & a Hard Place
 
CMS Design and Layout Best Practices (v4)
CMS Design and Layout Best Practices (v4)CMS Design and Layout Best Practices (v4)
CMS Design and Layout Best Practices (v4)
 
Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
Re-Experience SharePoint: Interface Enhancements in SharePoint 2010Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
 
The Fast Track to Mastering Modern WordPress - Rob Stinson & Carrie Dils
The Fast Track to Mastering Modern WordPress - Rob Stinson & Carrie DilsThe Fast Track to Mastering Modern WordPress - Rob Stinson & Carrie Dils
The Fast Track to Mastering Modern WordPress - Rob Stinson & Carrie Dils
 
WordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s PerspectiveWordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s Perspective
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
 
Developer's meetup wordpress presentation
Developer's meetup wordpress presentationDeveloper's meetup wordpress presentation
Developer's meetup wordpress presentation
 
From WordPress Configurator to WordPress Developer
From WordPress Configurator to WordPress DeveloperFrom WordPress Configurator to WordPress Developer
From WordPress Configurator to WordPress Developer
 
Resources for Communicators
Resources for CommunicatorsResources for Communicators
Resources for Communicators
 
WordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflowWordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflow
 
Finding Useful Plugins: How To Extend WordPress Past a Simple Blog
Finding Useful Plugins: How To Extend WordPress Past a Simple BlogFinding Useful Plugins: How To Extend WordPress Past a Simple Blog
Finding Useful Plugins: How To Extend WordPress Past a Simple Blog
 
Weniger schlecht-css-schreiben
Weniger schlecht-css-schreibenWeniger schlecht-css-schreiben
Weniger schlecht-css-schreiben
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are Better
 
Dreamweaver CS4 Site Setup Wizard
Dreamweaver CS4 Site Setup WizardDreamweaver CS4 Site Setup Wizard
Dreamweaver CS4 Site Setup Wizard
 
Dreamweaver cs4 site setup wizard
Dreamweaver cs4 site setup wizardDreamweaver cs4 site setup wizard
Dreamweaver cs4 site setup wizard
 
WordPress & AJC
WordPress & AJCWordPress & AJC
WordPress & AJC
 
Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!
 
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web AppsDesigning and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 

Viewers also liked

Introducing the wpXtreme ecosystem
Introducing the wpXtreme ecosystemIntroducing the wpXtreme ecosystem
Introducing the wpXtreme ecosystem
GGDBologna
 
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
GGDBologna
 
Options, and Transients, and Theme Mods — Oh my!
Options, and Transients, and Theme Mods — Oh my!Options, and Transients, and Theme Mods — Oh my!
Options, and Transients, and Theme Mods — Oh my!
Konstantin Obenland
 
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
joemcgill
 

Viewers also liked (20)

Optimizing Content Visibility (St. Louis WordCamp)
Optimizing Content Visibility (St. Louis WordCamp)Optimizing Content Visibility (St. Louis WordCamp)
Optimizing Content Visibility (St. Louis WordCamp)
 
WordPress in a Time of Crisis
WordPress in a Time of CrisisWordPress in a Time of Crisis
WordPress in a Time of Crisis
 
SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)SEO para Wordpress (WordCamp Salvador)
SEO para Wordpress (WordCamp Salvador)
 
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
 
Build your site tonight, be blogging tomorrow
Build your site tonight, be blogging tomorrowBuild your site tonight, be blogging tomorrow
Build your site tonight, be blogging tomorrow
 
Design in WordPress: Three files, unlimited layouts #wcstl
Design in WordPress: Three files, unlimited layouts #wcstlDesign in WordPress: Three files, unlimited layouts #wcstl
Design in WordPress: Three files, unlimited layouts #wcstl
 
Customize your theme using css
Customize your theme using cssCustomize your theme using css
Customize your theme using css
 
Everything You Ever Wanted to Know About Keyword Research (And Probably a Few...
Everything You Ever Wanted to Know About Keyword Research (And Probably a Few...Everything You Ever Wanted to Know About Keyword Research (And Probably a Few...
Everything You Ever Wanted to Know About Keyword Research (And Probably a Few...
 
Leveraging Wordpress for an Ecommerce Website
Leveraging Wordpress for an Ecommerce WebsiteLeveraging Wordpress for an Ecommerce Website
Leveraging Wordpress for an Ecommerce Website
 
Introducing the wpXtreme ecosystem
Introducing the wpXtreme ecosystemIntroducing the wpXtreme ecosystem
Introducing the wpXtreme ecosystem
 
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
Responsività e integrazioni social: l’utente al centro nel nuovo sito Volvo TV
 
Wordcamp Edmonton - Slides
Wordcamp Edmonton - SlidesWordcamp Edmonton - Slides
Wordcamp Edmonton - Slides
 
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Birmingham 2016 - WP API, What is it good for? Absolutely Everything!
 
Gerenciamento de sites/blogs com o WordPress 3.4
Gerenciamento de sites/blogs com o WordPress 3.4Gerenciamento de sites/blogs com o WordPress 3.4
Gerenciamento de sites/blogs com o WordPress 3.4
 
Wordpress Plugin Development Practices
Wordpress Plugin Development PracticesWordpress Plugin Development Practices
Wordpress Plugin Development Practices
 
Open Source Entrepreneurship
Open Source EntrepreneurshipOpen Source Entrepreneurship
Open Source Entrepreneurship
 
Can You Go Commercial
Can You Go CommercialCan You Go Commercial
Can You Go Commercial
 
Options, and Transients, and Theme Mods — Oh my!
Options, and Transients, and Theme Mods — Oh my!Options, and Transients, and Theme Mods — Oh my!
Options, and Transients, and Theme Mods — Oh my!
 
Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)Responsive Images (STL WordCamp 2014)
Responsive Images (STL WordCamp 2014)
 
Node.js to the rescue
Node.js to the rescueNode.js to the rescue
Node.js to the rescue
 

Similar to WordPress for Designers

Similar to WordPress for Designers (20)

Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
 
Website Development with Wordpress as Content Management System
Website Development with Wordpress as Content Management SystemWebsite Development with Wordpress as Content Management System
Website Development with Wordpress as Content Management System
 
Get real results from your website
Get real results from your websiteGet real results from your website
Get real results from your website
 
BITM3730 11-7.pptx
BITM3730 11-7.pptxBITM3730 11-7.pptx
BITM3730 11-7.pptx
 
Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
What is a website builder
What is a website builderWhat is a website builder
What is a website builder
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
Website Development with Wordpress presented to SMCI
Website Development with Wordpress presented to SMCIWebsite Development with Wordpress presented to SMCI
Website Development with Wordpress presented to SMCI
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Top 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdfTop 10 WordPress Themes for 2023.pdf
Top 10 WordPress Themes for 2023.pdf
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Web Designing Kit
Web Designing KitWeb Designing Kit
Web Designing Kit
 
What Makes SharePoint UX Good?
What Makes SharePoint UX Good?What Makes SharePoint UX Good?
What Makes SharePoint UX Good?
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
 
Making personas work
Making personas workMaking personas work
Making personas work
 
BITM3730 11-8.pptx
BITM3730 11-8.pptxBITM3730 11-8.pptx
BITM3730 11-8.pptx
 

Recently uploaded

一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
gfhdsfr
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书
A
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
lolsDocherty
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
A
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
Fi
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
A
 
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
gfhdsfr
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
B
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
musaddumba454
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
Fi
 
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
egfdgfd
 

Recently uploaded (20)

一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
一比一原版(Cranfield毕业证书)英国克兰菲尔德大学毕业证如何办理
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书一比一定制波士顿学院毕业证学位证书
一比一定制波士顿学院毕业证学位证书
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
The Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdfThe Rise of Subscription-Based Digital Services.pdf
The Rise of Subscription-Based Digital Services.pdf
 
Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirts
 
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
一比一原版(Exon毕业证书)英国埃克塞特大学毕业证如何办理
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
🍑👄Dehradun Esℂorts Serviℂe☎️9315791090🍑👄 ℂall Girl serviℂe in ☎️Dehradun ℂall...
 
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
一比一原版(Bath毕业证书)英国桑德兰大学毕业证如何办理
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...
 
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
一比一原版加拿大多伦多大学毕业证(UofT毕业证书)如何办理
 

WordPress for Designers

  • 1. A DESIGNER’S GUIDE TO WORDPRESS WordCamp Toronto 2014
  • 2. JAMES HIPKIN Started in traditional advertising Moved over to direct marketing Been involved with digital for over ten years Currently owner and Managing Director at Red8 Interactive
  • 3. OVERVIEW What you need to know about websites The WordPress Content Management System (CMS) Implications for designers Things to watch out for
  • 4. WEBSITES Understanding how websites are built makes building them easier (less expensive) using WordPress or any other technology
  • 5. SOME BROAD POINTS Websites are integrated systems—a small change in one place can have a big impact in other, often unexpected places Design for mobile first Design for 72 dpi A change is never a “little thing”
  • 6. STRUCTURE HTML is the framing—it uses “elements” to tell the browser what to display
  • 7. STYLE CSS tells the browser how elements will be displayed
  • 8. HTML and CSS work together to create both an aesthetic and functional end result
  • 9. FONTS Web-safe fonts are, well, safe Fonts treatments are not rendered consistently across browsers
  • 10. FONTS Font services can help add variety—use them for Headers and Subheads Design so the site won’t break if the desired font isn’t available
  • 11. FONTS Use font effects carefully • Modern browsers support many new treatments (CSS3) but older IE browsers don’t • To achieve font effects in older IE browsers, shadows, glows, etc., we need to use images, which don’t scale, affect performance and aren’t SEO friendly • Design sites to degrade gracefully in IE browsers
  • 12. MOBILE FIRST 50%+ using smartphone/tablet over desktop users Mobile devices outnumber PC/ Mac sales Mobile designs should not be an afterthought Share of U.S. Time Spent on Digital Media by Platform Source: comScore Media Metrix Multi-Platform Total Desktop Audience and Mobile Audience Age 18+ Date: June 2013
  • 13. MOBILE FIRST When designing for mobile, keep in mind the core functionality of your site • what will the user need on each device? Design for hand position Use a 12-column grid Keep it simple
  • 15. RESPONSIVE Responsive—adjusts the size of elements, it can be fluid, or not, and repositions them based on screen size
  • 16. ADAPTIVE Adaptive also adjusts the size and repositions elements, and it changes what content is available based on the device (break points)
  • 18. CONTENT WordPress manages content in two ways: • static content—content that isn’t managed using WordPress, it’s held within the HTML • dynamic content—content that is managed by WordPress, it’s held in a database
  • 19. THEMES WordPress uses a theme to create a specific look for the website—you are designing the theme Think of WordPress as the operating system, and the theme is the software that determines how the site looks, and what and where content is displayed
  • 20. THEMES A theme is a collection of templates and stylesheets There are a lot of pre-built themes available • some are free, and some are premium • some are good, and some, not so much… A custom theme gives you the greatest flexibility, will make the site unique, and performs better
  • 21. TEMPLATES Templates manage the structure of pages, and provide page-level functionality
  • 22. PLUGINS AND WIDGETS Plugins and widgets extend WordPress’ functionality • most are free, some are premium • they can add functionality easily and quickly • they can also add bloat, affect performance, and impact security
  • 23. POSTS Posts are used to add specific, dynamic, or time sensitive content to pages • custom post types give designers a lot of flexibility and control
  • 24. PAGES Pages are a specialized form of post • prebuilt templates provide functionality and structure to the page
  • 26. EXISTING THEME VS. CUSTOM Consider designing with an existing theme in mind • quality varies so before you start customizing, have your developer check it out to be sure it’s stable and supported
  • 27. PREMIUM THEME SOURCES Select a theme from an established theme vendor— the code is solid and support is available Some to consider: • Studio Press • iThemes • Elegant Themes • Woo Themes
  • 28. CUSTOM THEMES If your site is complex, and/or you need a lot of control over how content is displayed a custom theme will be required Custom themes also tend to be lighter, which improves performance
  • 29. TEMPLATES Control the number of templates • a change in page structure or functionality requires a new template • build wireframes first
  • 30. VARIETY Involve a WordPress developer early and often —they will help you understand: • when a new template is required • how to create a variety using Custom Post Types, Hooks, Filters and styles
  • 31. STYLE The stylesheet is used to customize a theme • plan how dynamic content will be styled • consider all the controls on the visual editor and provide style direction The Wordpress visual editor
  • 32. PLUGINS AND WIDGETS Know your plugins Design to their capabilities
  • 33. ≠ Snow Report Plugin GoTahoeNorth.com Design
  • 34. THINGS TO WATCH OUT FOR
  • 35. WHEN YOU DESIGN Think about the Navigation • show us how you want it to work • custom navigation is possible but expensive • mobile navigation should push content over or down
  • 36. WHEN YOU DESIGN Footers are often forgotten • a lot of info of secondary importance can be located in the footer • footers need design love too!
  • 37. WHEN YOU DESIGN Provide a font hierarchy • Especially important when using a font service Test the design using the fonts in the hierarchy
  • 38. WHEN YOU DESIGN Think about how you want links to display • there are four states: resting, hover, active and visited • no hover on mobile, just say’n • give links and action buttons enough space to be practical on mobile devices
  • 39. WHEN YOU DESIGN Secondary and error pages need to be considered • 403 Forbidden, 404 Not Found, Privacy Policy, etc.
  • 40. WHEN YOU DESIGN Design the forms • keep plugin capabilities in mind • external connections to CRM or email services can dictate form structure
  • 41. WHEN YOU DESIGN Design the login screen—give yourself some credit
  • 42. WHEN YOU DESIGN Please, please follow Photoshop best practices Read and follow the guidelines at Ps Etiquette
  • 43. ASK EARLY, ASK OFTEN If in doubt, check with an experienced WordPress developer—there is almost always a solution
  • 44. THANK YOU! Red8 Interactive San Francisco St. Louis James Hipkin james@red8interactive.com 415.789.3685