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
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
新宿ダンジョンを可視化してみた
satoshi7190
2
270
Elm 0.19.0 Changes
bkuhlmann
0
490
Goのエラースタックトレースの歴史と今後
sonatard
9
1.6k
"config" ってなんだ? / What is "config"?
okashoi
0
240
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
Milestoner
bkuhlmann
1
410
Ruby Pattern Matching
bkuhlmann
0
930
Git Lint
bkuhlmann
4
750
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
750
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
130
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Invisible Side of Design
smashingmag
294
49k
How to name files
jennybc
65
93k
Producing Creativity
orderedlist
PRO
337
39k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
A Tale of Four Properties
chriscoyier
151
22k
Mobile First: as difficult as doing things right
swwweet
216
8.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