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 Design - Polopoly GeekNight Blixttal
Search
Henrik Ekelöf
November 23, 2011
Programming
2
410
Responsive Design - Polopoly GeekNight Blixttal
Henrik Ekelöf
November 23, 2011
Tweet
Share
Other Decks in Programming
See All in Programming
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
590
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
490
酒飲んでたらテックリードになった話
spbaya0141
0
180
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
490
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
440
TypeScriptのパフォーマンス改善
yajihum
9
4.3k
株式会社ゼネテック
genetec
0
110
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
540
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
470
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
新宿ダンジョンを可視化してみた
satoshi7190
3
420
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
How to Ace a Technical Interview
jacobian
273
22k
Why Our Code Smells
bkeepers
PRO
331
56k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
GitHub's CSS Performance
jonrohan
1025
450k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Facilitating Awesome Meetings
lara
43
5.6k
A Philosophy of Restraint
colly
197
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Become a Pro
speakerdeck
PRO
13
4.6k
Transcript
Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
Henrik Ekelöf Gränssnittsutvecklare på Valtech
Responsive Design
— ett nytt häftigt sätt att bygga mobilwebb Vad det
inte är:
Faktum är:
Det finns ingen mobilwebb.
Det finns inte en specifik webb för mobila enheter. Allt
är samma webb.
640 x 480 800 x 600 1024 x 768
None
1024 x 768
1024 x 768 320 x 480
None
1024 x 768 320 x 480
1024 x 768 320 x 480 768 x 1024
Flexibla bilder Flexibel grid Media queries Responsive Design
None
None
/* Här ovanför finns grundstyle - färger, fonter etc */
article { float: right; width: 70%; } aside { float: right; width: 30%; }
article { float: right; width: 70%; } aside { float:
right; width: 30%; } @media all and (max-width: 768px) { article, aside { float: none; width: 100%; } }
None
article { float: right; width: 70%; } aside { float:
right; width: 30%; } @media all and (max-width: 768px) { article, aside { float: none; width: 100%; } }
None
None
/* Här ovanför finns grundstyle - färger, fonter etc */
@media all and (min-width: 768px) { article { float: right; width: 70%; } aside { float: right; width: 30%; } }
‣ Optimera inte webbplatser för specifika typer av enheter (varken
små eller stora) ‣ Responsive Design är det sätt vi kommer bygga webb på den närmaste framtiden ‣ Jobba alltid nerifrån och upp med CSS
Tack! Henrik Ekelöf, Valtech @henrikekelof