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
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Immutable ActiveRecord
megane42
0
130
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Open source software: how to live long and go far
gaelvaroquaux
0
620
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
チームリードになって変わったこと
isaka1022
0
190
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Speed Design
sergeychernyshev
25
780
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Code Review Best Practice
trishagee
66
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
How to train your dragon (web standard)
notwaldorf
90
5.8k
Embracing the Ebb and Flow
colly
84
4.6k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
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?