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
PHP で読む楽しいコアダンプ
sji
0
240
Understanding Ast By Looking
inouehi
0
120
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
310
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
2.9k
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
7
2.1k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
document.write再考
brn
5
2.5k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
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