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
Domain-Driven Transformation
hschwentner
2
1.9k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Open source software: how to live long and go far
gaelvaroquaux
0
620
Rails アプリ地図考 Flush Cut
makicamel
1
110
Spring gRPC について / About Spring gRPC
mackey0225
0
220
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
25
780
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
BBQ
matthewcrist
86
9.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
Docker and Python
trallard
44
3.3k
Fireside Chat
paigeccino
34
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Automating Front-end Workflow
addyosmani
1367
200k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Statistics for Hackers
jakevdp
797
220k
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?