2. Recently, an emergent discipline called “responsive
architecture” has begun asking how physical spaces can
respond to the presence of people passing through
them…
- Ethan Marcotte, A List Apart
3. RESPONSIVE ARCHITECHTURE
• Interaktiiviset seinät ja installaatiot
• Huoneen lämpötilan ja valaistuksen automaattinen säätely
ihmismäärän mukaan
• Smartglass, joka tarvittaessa lisää huoneen yksityisyyttä
muuttumalla ”sameaksi”
www.interactive-architecture.com
4. Responsive Web Design is the approach that suggests
that design and development should respond to the user’s
behavior and environment based on screen size, platform
and orientation.
- Kayla Knight, Smashing Magazine
5. RESPONSIVE WEB DESIGN
• Layoutin ja/tai käyttöliittymän mukautuminen käyttäjän laitteen
näyttöresoluution tai -orientaation sekä teknisten ominaisuuksien
mukaan
• Yksi sisältö, monta eri näyttömuotoa/käyttöliittymää
9. MITEN?
• Breakpointit eri näyttöresoluutioilla
• Suhteellinen koko tekstillä, kuvilla ja medialla
• Joustavat grid-layoutit, jotka käyttävät suhteellisia kokoja
• Jotain siltä väliltä?
10. BREAKPOINTIT
• Media Queries: määritellään näyttöresoluution leveyden minimi-
ja/tai maksimikoko, joka käyttää tiettyä css-tyyliä:
320 px älypuhelin portrait (esim. iPhone)
480 px älypuhelin landscape (esim. iPhone)
600 px pienet tabletit, portrait (esim. Kindle Fire)
768 px tabletit portrait ja landscape (esim. iPad)
1024px tabletit landscape, mini-laptopit
1280px monitorit, laptopit, tv
1600px monitorit, 15+” laptopit
1920px designerit
11. MINIMIT?
• Esim:
320 px älypuhelin portrait (esim. iPhone)
480 px älypuhelin landscape (esim. iPhone)
1024px tabletit landscape, mini-laptopitt
