advertisement

Responsive Design

50 %
50 %
advertisement
Information about Responsive Design
Technology

Published on March 7, 2014

Author: joelboonstra

Source: slideshare.net

Description

A simplified introduction to the concept of Responsive Design.
advertisement

Responsive Design Joel Boonstra joel@agathongroup.com @jboonstra

How We Design(ed)

Oh Yeah, Mobile!

http://wtfmobileweb.com/post/54912647443/

What Do We Do?

What’s the problem?

http://wtfmobileweb.com/post/55600401786/

http://wtfmobileweb.com/post/54793886495/

What Do We Do Instead?

Responsive Design

How Does It Work?

Responsive Websites Have...

Responsive Websites Have... • Flexible Content

Responsive Websites Have... • Flexible Content • Dynamic Design

Flexible Content

img { max-width: 100%; }

Dynamic Design

/* styles for all screen widths go here */ @media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */ }

New Mobile Devices Per Day http://www.lukew.com/ff/entry.asp?1728

New Mobile Devices Per Day 1,450,000 2011 2012 http://www.lukew.com/ff/entry.asp?1728

New Mobile Devices Per Day 3,600,000 1,450,000 2011 2012 http://www.lukew.com/ff/entry.asp?1728

Worldwide Mobile http://www.lukew.com/ff/entry.asp?1644

Worldwide Mobile • Over 1 billion smartphones worldwide. http://www.lukew.com/ff/entry.asp?1644

Worldwide Mobile • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. http://www.lukew.com/ff/entry.asp?1644

Worldwide Mobile • • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. Estimated 3 years to reach 2 billion. http://www.lukew.com/ff/entry.asp?1644

Worldwide Mobile • • • • Over 1 billion smartphones worldwide. 16 years to reach 1 billion. Estimated 3 years to reach 2 billion. 46% of the population has at least one active mobile device. http://www.lukew.com/ff/entry.asp?1644

/* styles for all screen widths go here */ @media screen and (max-width: 700px) { /* browsers 700px and smaller get these styles */ }

/* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ }

/* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ }

/* styles for all screen widths go here */ @media screen and (min-width: 1005px) { /* browsers 1005px and wider get these styles */ } @media screen and (min-width: 1200px) { /* browsers 1200px and wider get these styles */ }

Technical Considerations

Technical Considerations • Bandwidth

Technical Considerations • • Bandwidth Context

Technical Considerations • • • Bandwidth Context Images - https://github.com/scottjehl/ picturefill

Technical Considerations • • • Bandwidth • Maintenance Context Images - https://github.com/scottjehl/ picturefill

The Future

Further Reading

Further Reading • http://mediaqueri.es/

Further Reading • • http://mediaqueri.es/ http://alistapart.com/

Further Reading • • • http://mediaqueri.es/ http://alistapart.com/ http://www.lukew.com/ff/

Further Reading • • • • http://mediaqueri.es/ http://alistapart.com/ http://www.lukew.com/ff/ http://aneventapart.com/

Questions

Thanks! Joel Boonstra joel@agathongroup.com @jboonstra

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Responsive Webdesign – Wikipedia

Der Begriff „Responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin A List Apart verwendet, wobei er ...
Read more

Responsive Webdesign mit HTML5 und CSS3 – Grundlagen | t3n

Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen.
Read more

Responsive Design Test

Responsive Design. Testen Sie Ihre Website jetzt kostenlos. Außerdem: Allgemeine Informationen zum Responsive Design, technische Hintergründe und Tipps ...
Read more

Responsive Webdesign – News, Tipps und Infos auf t3n.de

Eine neue Art des Internetnutzens vornehmlich über mobile Devices mit sehr kleinen Displays erfordert eine neue Art des Webdesigns. Mi…
Read more

HTML Responsive Web Design - W3Schools Online Web Tutorials

What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is ...
Read more

Responsive web design - Wikipedia, the free encyclopedia

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading ...
Read more

Responsive Design - OnPage.org: Für bessere Webseiten!

Beim Responsive Design wird eine Internetseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten.
Read more

Responsive Design – Wikipedia

Als Responsive Design wird bei Bevölkerungsbefragungen die Anpassung der Stichprobenziehung während der Feldphase bezeichnet. Mit solchen Methoden ...
Read more

responsive design studio

Das Design dieser Lampe wurde beeinflusst von Mustern die in der Natur vorkommen, wie im Fell bestimmter Tierarten oder den Blättern von Pflanzen.
Read more

Responsive Design Studio

Workshop on digital design and fabrication in Architecture, by Hans Sachs (responsive design studio) and Sebastian Bächer (Bächer & Bergmann GmbH).
Read more