O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
ADAPTIVE SYSTEMS
with
Simon Collison
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
FOR MULTIPLE DEVICES
HULL
PATTERNS
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
THAT ARE UNIQUELY OURS
The screen brings with it different kinds of
challenges for visual design, some of which
occur exclusively in interactive ...
BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS
SYSTEMS
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
FOR EVOLVING WEBSITES
We don’t design web pages.
We design systems.
ANDY CLARKE
DESKTOP
SCREEN RESOLUTION
VIEWPORT
MOBILE DEVICES
ORIENTATION
RENDERING ENGINES
LAYOUT
http://jasonsantamaria.com/http://gregorywood.co.uk/
ADAPTIVE
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
LAYOUTS
• Use one set of files for the website
• Manipulate the resolution, viewport, and orientation
• Deliver 100% of the content...
The ability to alter the presentation of a
website without altering its structure
should have opened up the floodgates of
d...
RESPONSIVE
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
WEB DESIGN
http://www.alistapart.com/articles/responsive-web-design/
Ethan states that a responsive design is composed of
three distinct parts:
1. Flexible grid.
2. Flexible images.
3. Media ...
FLEXIBLE GRID
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
RESPONSIVE INGREDIENT # 1
• Relative measurements
• Percentages and ems
• min-width and max-width
• Maths!
http://lessframework.com
FLEXIBLE IMAGES
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
RESPONSIVE INGREDIENT # 2
img {
width:380px;
height:auto;
}
img {
height:auto;
max-width:100%;
}
For a Windows fix, see http://unstoppablerobotninja....
MEDIA QUERIES
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
RESPONSIVE INGREDIENT # 3
A media query consists of a media type and
zero or more expressions that check for the
conditions of particular media feat...
@media  (max-­‐device-­‐width:480px)  and  
(orientation:portrait)  {  }
• nth-child for flow of images
• Proportional leading
• Change anything you want!
CASE STUDY
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
COLLY.COM
<meta  name="viewport"  
content="width=device-­‐width"  />
@media  (min-­‐device-­‐width:1024px)  and  (max-­‐
width:989px),  screen  and  (max-­‐device-­‐
width:480px),  (max-­‐dev...
@media  (min-­‐device-­‐width:1024px)  and  (max-­‐
width:509px),  (max-­‐device-­‐width:480px)  and  
(orientation:portra...
NO SILVER BULLET
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
FOR THE MOBILE WEB
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
• Start with mobile!
• Use well structured meaningful markup
• Consider media queries
• Progressive enhancement (JavaScrip...
display:none;
WHAT NEXT?
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
• Rethink our processes
• Be responsive
• Progressively enhance
• Consider the needs of the mobile user
• Be brave, be cre...
THANKS
Simon Collison
http://colly.com
@colly
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)
Próximos SlideShares
Carregando em…5
×

@media  (max-­‐device-­‐width:480px)  and   (orientation:portrait) Adaptive Systems

17.961 visualizações

Publicada em

@media  (max-­‐device-­‐width:480px)  and  
(orientation:portrait)  {  }

Publicada em: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • I should add (as mentioned during the talk), a huge thanks to folks like Ethan Marcotte, Jeremy Keith, Andy Clarke, Brian Rieger, and many others whose ideas, quotes, work, or findings are featured in this first draft presentation.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

×