Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive and Mobile Sites
Search
David Kryzaniak
March 08, 2013
Programming
3
720
Responsive and Mobile Sites
David Kryzaniak
March 08, 2013
Tweet
Share
Other Decks in Programming
See All in Programming
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
エンジニア向け採用ピッチ資料
inusan
0
160
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
Benchmark
sysong
0
270
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
エラーって何種類あるの?
kajitack
5
310
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
130
XSLTで作るBrainfuck処理系
makki_d
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
990
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A better future with KSS
kneath
239
17k
Code Reviewing Like a Champion
maltzj
524
40k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
#AppletonWP RESPONSIVE & MOBILE ...AND HOW TO APPLY EACH TO
WORDPRESS By: David Kryzaniak (@dave_kz)
HAI! I'M DAVID... Programming Ninja at Blue Door Consulting I
haz a inter-blag (http://dave.kz/) Twitters: @dave_kz Graduated from UWGB (2012)
ONE PART
ONE PART
TIME CIRCUITS: ON!
THE YEAR WAS 1992... The internets were just starting to
emerge. We used "Flyer-Based Design" 'cuz the internet is just like print. Gotta' watch out for that fold... in the screen.
WOO GEOC <table>'s, <marquee>'s, and <blink> were all the rage.
LIFE WAS GOOD Design for 800x600 monitors. That's like everyone...
Most website could induce seizures thanks to <blink>
BUT THEN... Monitors are getting bigger. Let's start designing for
1024x768 monitors!
BUT THEN... Monitors are getting bigger. Let's start designing for
960px width. That'll cover just about everyone!
JUNE 29, 2007 ...A DATE WHICH WILL LIVE IN INFAMY.
FFFFFFFFUUUUUUUUUUUUUUUUUUUU...
320X356 IS ALL I GET?! My Favicon is bigger than
that!
HOUSTON, WE HAVE A PROBLEM... 61% leave a site if
it isn't mobile-ready 79% search for another site 50% look outside an established relationship source: Google Blog
MOBILE SITES
EXAMPLE OF A MOBILE MarcusTheatres.com m.MarcusTheatres.com
USER AGENT DETECTION MOZILLA/5.0 (WINDOWS NT 6.1; WOW64) APPLEWEBKIT/537.22 (KHTML,
LIKE GECKO) CHROME/25.0.1364.152 SAFARI/537.22 OR $ _ S E R V E R [ ' H T T P _ U S E R _ A G E N T ' ] n a v i g a t o r . u s e r A g e n t
IF A USER AGENT STRING CONTAINS "IOS" IT MUST BE
AN IPHONE SO REDIRECT THEM TO M.CONTOSO.COM
OCTOBER 23, 2012 ...A DATE WHICH WILL LIVE IN INFAMY.
AWW, HE'S A CUTE LITTLE GUY!
WAIT? WHAT'S THE PROBLEM WITH THAT?
OCTOBER 25, 2012 ...A DATE WHICH WILL LIVE IN INFAMY.
http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent “It is confirmed that the iPad Mini User Agent
is the same as the iPad 2”
HMM? WHAT NOW?
ENTER: RESPONSIVE DESIGN
MEDIA QUERIES WHAT IF WE SET BREAK POINTS IN OUR
CODE SO THAT OUR CONTENT FITS ON THE SCREEN BETTER?
EXAMPLE OF A MEDIA QUERY Microsoft.com
WHAT'S A MEDIA QUERY? SIMPLE "IF/THEN" LOGIC BASED ON CSS
ATTRIBUTES
PSEUDO CODE: "If the screen size is anything smaller than
or equal to 480 pixels wide, apply these styles"
MOST IMPORTANT STEP . . . < h e a
d > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h " / >
STYLE.CSS: @ m e d i a o n l
y s c r e e n a n d ( m a x - d e v i c e - w i d t h : 4 8 0 p x ) { / * N o r m a l C S S H e r e * / # c o n t e n t { f l o a t : r i g h t ; } }
HEADER.PHP: < l i n k h r e f
= " c s s / m o b i l e . c s s " r e l = " s t y l e s h e e t " t y p e = " t e x t / c s s " m e d i a = " o n l y s c r e e n a n d ( m a x - w i d t h : 4 8 0 p x ) " / >
MEH, MID-SUMMER 2013 ...A DATE WHICH WILL LIVE IN INFAMY.
IPHONE 5S
WAIT? WHAT'S THE PROBLEM WITH THAT?
*NOW WITH RETINA2 AND A NEW GOOFY SCREEN SCREEN SIZE!
RESPONSIVE SUB-CATEGORY ADAPTIVE DESIGN
FLUID GRIDS
GREAT, DAVE... THANKS FOR THE HISTORY LESSON... WHERE'S THE WORDPRESS?!
WP MOBILE SITES:
WP-TOUCH Most Common Easiest to Install (it's just a plugin)
SAD PANDA! YOU ONLY HAVE ONE MOBILE SITE EXAMPLE!
IT'S ALL ABOUT THE BENJAMINS UX, BABY. Don't confuse your
users User Agents are always changing
RESPONSIVE/ADAPTIVE THEMES:
BUT FIRST... CHILD THEMES
HTTP://CODEX.WORDPRESS.ORG/CHILD_THEMES READ IT!
WHAT ARE CHILD THEMES? (SELECTIVELY) OVERLOADING CERTAIN PIECES OF A
PARENT THEME.
REALLY?! I'M JUST CHANGING A FEW THINGS IN THE HEADER.PHP
Anyone remember timthumb.php?
I ALREADY HAVE A THEME THAT I LOVE... 1. Child
Theme 2. JetPack: CSS Editor
None
STARTER THEMES
TWENTY ELEVEN
TWENTY TWELVE
RESPONSIVE
Psh! Pre-made themes. STARTING FROM SCRATCH
TWITTER BOOTSTRAP
HTML5 BOILERPLATE
PROBLEMS & BEST PRACTICES I've got 99 problems, most are
caused by IE...
PROBLEMS & BEST PRACTICES MEDIA QUERIES DON'T ALWAYS WORK IN
IE8 (AND BELOW)
PROBLEMS & BEST PRACTICES THERE IS NO :HOVER IF THERE'S
NO MOUSE
PROBLEMS & BEST PRACTICES WHAT'S THE BEST WAY TO HANDLE
NAVIGATION?
IF I'M STARTING FROM SCRATCH... Design for Desktop First? ("Graceful
Degradation") Design for Mobile First? ("Progressive Enhancement")
MOAR INFORMATION! Responsive Web, Ethan Marcotte Mobile First, Luke Wroblewski
MediaQueri.es
QUESTIONS?