SlideShare a Scribd company logo
1 of 9
Download to read offline
Responsive WordPress
Workflow
James Bundey
What is responsive?
Approaching a project
•

Design, site structure & basic site html/php code

•

CSS & how it’s going to respond within media queries

•

My WP code as it relates to how the content is
displayed on each screen size

•

Fixing things & spending too much time cursing the
turd that is IE

•

Testing, testing & more testing.

•

Performance tweaking.
Getting my framework
GridPak - http://gridpak.com/

•

•

Great for creating a simple grid

•

Set your break points & download

•

Very easy to retrofit

!

<div class=“row”>

	 	 <div class=“col span_4”>

	 	 	 …code

	 	 </div>	


	 	 <aside class=“col span_2”>

	 	 ……
Managing stylesheets
•

Keep the grid separate
•

style.css
•

•

managing the site design

grid.css
•

contains the base framework

•

contains my screen & device
specific css based on media
queries.

@media screen and (min-width:
480px) and (max-width: 749px) {	
		 grid…

		 specific css…	
}	
@media only screen and (mindevice-width : 320px) and (maxdevice-width : 480px) {		
}
Managing navigation
Standard WordPress Menu

•

<nav id="navigation">

	 	 <?php wp_nav_menu( array ( 

	 	 	 'container' => 'false', 

	 	 	 'menu' => 'Primary Menu',

	 	 	 'menu_class' => 'menu',

	 	 	 'menu_id' => 'mainNav')

	 	 ); ?>

</nav>	
!
!
!

•

Simple script to create custom
navigation for small screen sizes
$(function(){	
/* prepend menu icon */

$('#navigation').prepend('<div id="menu-icon"><i
class="icon-align-justify"></i></div>');	
	 /* toggle nav */

	 $("#menu-icon").on("click", function(){	
	 	 $("#mainNav").slideToggle();

	 	 $(this).toggleClass("active");

	 });

});
Images & retina ready
•

Images

•

@2x retina fix

•

•

http://retinize.it/ - photoshop
action

•

img {width: 100%}

•

http://retinajs.com

•
•

Logo in svg format - control with
background-size{}

img.responsive-fix {width: auto;}

•

WP Retina 2x - plugin

Icons
•

•

Font awesome - fontawesome.io
•

retro fit with Regenerate
Thumbnails

Fitvids - http://fitvidsjs.com/
Testing, fixing & performance
•

Testing
•
•

The Responsinator - http://
www.responsinator.com/

•
•

Xcode / iOS simulator

Responsive Site View - chrome plugin

Fixing

•
	
	
	
	
	
	
	

Checking scripts

	
	
	
	
	
	
	

•

	
	
	
	
	
	
	

$(window).load(function() {

	 if ($(window) .width() > 674) {

	 	 responsive script…..

	 } else {

	 	 desktop script….

	 }

});	

Performance tweaking

•

IE & media queries

•

Use CDN

•

Removing transitions with device specific
media queries

•

Adaptive images - http://adaptiveimages.com/
Thank You
!

@jamesbundey
http://www.linkedin.com/in/jamesbundey
www.creativeapproach.com.au

More Related Content

What's hot

Front-end Rails-приложений приложений, основанный на БЭМ
Front-end Rails-приложений приложений, основанный на БЭМFront-end Rails-приложений приложений, основанный на БЭМ
Front-end Rails-приложений приложений, основанный на БЭМАлександр Ежов
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014James Bonham
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeMauricio Gelves
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Codersggfergu
 
CMS 101 Drupal
CMS 101 DrupalCMS 101 Drupal
CMS 101 Drupalggfergu
 
Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1DanWooster1
 
WordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JSWordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JSDavid Bisset
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaksColdFusionConference
 
Decoding developers
Decoding developersDecoding developers
Decoding developersZapier
 
Frontend grote projecten
Frontend grote projectenFrontend grote projecten
Frontend grote projectenEdwin Martin
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practiceyiming he
 
Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressdrywallbmb
 

What's hot (20)

Front-end Rails-приложений приложений, основанный на БЭМ
Front-end Rails-приложений приложений, основанный на БЭМFront-end Rails-приложений приложений, основанный на БЭМ
Front-end Rails-приложений приложений, основанный на БЭМ
 
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014
 
Jasmine 2.0
Jasmine 2.0Jasmine 2.0
Jasmine 2.0
 
corazon
corazoncorazon
corazon
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
 
Jager
JagerJager
Jager
 
Hello, Canvas.
Hello, Canvas.Hello, Canvas.
Hello, Canvas.
 
Add video 2
Add video 2Add video 2
Add video 2
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
 
CMS 101 Drupal
CMS 101 DrupalCMS 101 Drupal
CMS 101 Drupal
 
Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1
 
WordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JSWordPress Theme Workshop: CSS/JS
WordPress Theme Workshop: CSS/JS
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
Css responsive
Css responsiveCss responsive
Css responsive
 
Our application got popular and now it breaks
Our application got popular and now it breaksOur application got popular and now it breaks
Our application got popular and now it breaks
 
Decoding developers
Decoding developersDecoding developers
Decoding developers
 
Frontend grote projecten
Frontend grote projectenFrontend grote projecten
Frontend grote projecten
 
Create a landing page
Create a landing pageCreate a landing page
Create a landing page
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
 
Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
 

Viewers also liked

Comunication system
Comunication systemComunication system
Comunication systemalexmara
 
La catalogazione di videoregistrazioni e filmati
La catalogazione di videoregistrazioni e filmatiLa catalogazione di videoregistrazioni e filmati
La catalogazione di videoregistrazioni e filmatiRomina D'Antoni
 
Mayra alejandra muñoz espinoza de los monteros
Mayra alejandra muñoz espinoza de los monterosMayra alejandra muñoz espinoza de los monteros
Mayra alejandra muñoz espinoza de los monterosmayra1A
 
transporteula1 logcc12014
transporteula1 logcc12014transporteula1 logcc12014
transporteula1 logcc12014Carlos Nunes
 
012516 Digital Communications Engineer advert
012516 Digital Communications Engineer advert012516 Digital Communications Engineer advert
012516 Digital Communications Engineer advertPandelis Kourtessis
 
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02Hari Prasad
 
Պանթեոն
ՊանթեոնՊանթեոն
Պանթեոնsertachki
 
Reece
Reece Reece
Reece Meg32
 
The school management and educational leadership
The school management and educational leadershipThe school management and educational leadership
The school management and educational leadershipAndrea Martínez Díaz
 
Tipos de memoria ram 1
Tipos de memoria ram 1Tipos de memoria ram 1
Tipos de memoria ram 1mishelord
 
Open access pathfinder case study teesside
Open access pathfinder case study teessideOpen access pathfinder case study teesside
Open access pathfinder case study teessideDavid Young
 
119.2015 a.01 linguistic introduccio.pdf
119.2015 a.01 linguistic introduccio.pdf119.2015 a.01 linguistic introduccio.pdf
119.2015 a.01 linguistic introduccio.pdfmbadia6
 

Viewers also liked (19)

Diploma_Master
Diploma_MasterDiploma_Master
Diploma_Master
 
Comunication system
Comunication systemComunication system
Comunication system
 
Logo Concept_Color Values
Logo Concept_Color ValuesLogo Concept_Color Values
Logo Concept_Color Values
 
La catalogazione di videoregistrazioni e filmati
La catalogazione di videoregistrazioni e filmatiLa catalogazione di videoregistrazioni e filmati
La catalogazione di videoregistrazioni e filmati
 
Expo de informatik
Expo de informatikExpo de informatik
Expo de informatik
 
Mayra alejandra muñoz espinoza de los monteros
Mayra alejandra muñoz espinoza de los monterosMayra alejandra muñoz espinoza de los monteros
Mayra alejandra muñoz espinoza de los monteros
 
transporteula1 logcc12014
transporteula1 logcc12014transporteula1 logcc12014
transporteula1 logcc12014
 
012516 Digital Communications Engineer advert
012516 Digital Communications Engineer advert012516 Digital Communications Engineer advert
012516 Digital Communications Engineer advert
 
TED Isparta College
TED Isparta CollegeTED Isparta College
TED Isparta College
 
images
imagesimages
images
 
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02
J 1413-G-KCE-EX-XX-003_R03-SITE ESTABLISHMENT & LOGISTIC - FF _SHEET 02 OF 02
 
Պանթեոն
ՊանթեոնՊանթեոն
Պանթեոն
 
Reece
Reece Reece
Reece
 
The school management and educational leadership
The school management and educational leadershipThe school management and educational leadership
The school management and educational leadership
 
Tipos de memoria ram 1
Tipos de memoria ram 1Tipos de memoria ram 1
Tipos de memoria ram 1
 
Assessment 2
Assessment 2Assessment 2
Assessment 2
 
Somnath_Sen_PM
Somnath_Sen_PMSomnath_Sen_PM
Somnath_Sen_PM
 
Open access pathfinder case study teesside
Open access pathfinder case study teessideOpen access pathfinder case study teesside
Open access pathfinder case study teesside
 
119.2015 a.01 linguistic introduccio.pdf
119.2015 a.01 linguistic introduccio.pdf119.2015 a.01 linguistic introduccio.pdf
119.2015 a.01 linguistic introduccio.pdf
 

Similar to Responsive WordPress workflow

Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Rob Gietema
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development FrameworkCindy Royal
 
Resource registries plone conf 2014
Resource registries plone conf 2014Resource registries plone conf 2014
Resource registries plone conf 2014Ramon Navarro
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 
Cordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsCordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsClay Ewing
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development FrameworkCindy Royal
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsRachael L Moore
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 featuresGill Cleeren
 

Similar to Responsive WordPress workflow (20)

Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
 
Resource registries plone conf 2014
Resource registries plone conf 2014Resource registries plone conf 2014
Resource registries plone conf 2014
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Cordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web SkillsCordova: Making Native Mobile Apps With Your Web Skills
Cordova: Making Native Mobile Apps With Your Web Skills
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development Framework
 
Creating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web ComponentsCreating GUI container components in Angular and Web Components
Creating GUI container components in Angular and Web Components
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
Responsive design
Responsive designResponsive design
Responsive design
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 

Recently uploaded

How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 

Recently uploaded (20)

How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 

Responsive WordPress workflow

  • 3. Approaching a project • Design, site structure & basic site html/php code • CSS & how it’s going to respond within media queries • My WP code as it relates to how the content is displayed on each screen size • Fixing things & spending too much time cursing the turd that is IE • Testing, testing & more testing. • Performance tweaking.
  • 4. Getting my framework GridPak - http://gridpak.com/ • • Great for creating a simple grid • Set your break points & download • Very easy to retrofit ! <div class=“row”>
 <div class=“col span_4”>
 …code
 </div> 
 <aside class=“col span_2”>
 ……
  • 5. Managing stylesheets • Keep the grid separate • style.css • • managing the site design grid.css • contains the base framework • contains my screen & device specific css based on media queries. @media screen and (min-width: 480px) and (max-width: 749px) { grid…
 specific css… } @media only screen and (mindevice-width : 320px) and (maxdevice-width : 480px) { }
  • 6. Managing navigation Standard WordPress Menu • <nav id="navigation">
 <?php wp_nav_menu( array ( 
 'container' => 'false', 
 'menu' => 'Primary Menu',
 'menu_class' => 'menu',
 'menu_id' => 'mainNav')
 ); ?>
 </nav> ! ! ! • Simple script to create custom navigation for small screen sizes $(function(){ /* prepend menu icon */
 $('#navigation').prepend('<div id="menu-icon"><i class="icon-align-justify"></i></div>'); /* toggle nav */
 $("#menu-icon").on("click", function(){ $("#mainNav").slideToggle();
 $(this).toggleClass("active");
 });
 });
  • 7. Images & retina ready • Images • @2x retina fix • • http://retinize.it/ - photoshop action • img {width: 100%} • http://retinajs.com • • Logo in svg format - control with background-size{} img.responsive-fix {width: auto;} • WP Retina 2x - plugin Icons • • Font awesome - fontawesome.io • retro fit with Regenerate Thumbnails Fitvids - http://fitvidsjs.com/
  • 8. Testing, fixing & performance • Testing • • The Responsinator - http:// www.responsinator.com/ • • Xcode / iOS simulator Responsive Site View - chrome plugin Fixing • Checking scripts • $(window).load(function() {
 if ($(window) .width() > 674) {
 responsive script…..
 } else {
 desktop script….
 }
 }); Performance tweaking • IE & media queries • Use CDN • Removing transitions with device specific media queries • Adaptive images - http://adaptiveimages.com/