Brad Frost om Adaptive web design

Brad Frost pratar  på Smashing Conference 2012 i Freiburg om ”Beoynd Media Queries: An anatomy of an adaptive web experience.”

http://vimeo.com/55076713

Brad dissikerar ett exempel på mobile first responsive design.

Responsive design:
Fluid Grids, flexible media and media queries.
Men Brad tycker att det är ett problem att man har definierat det som en klarhet och blir fundamentalister. Bara det är responsive så blir det bra.

Responsive web design är bara ett subset av vad adaptive web design är. 

Men uttrycket har i sig en massa saker som är viktiga för att skapa en bra web. Te x content strategi.

Principer för att skapa Adaptive web design:

  • Ubiquity,
  • Flexiblitity
  • Performance
  • Enchancement
  • Future-friendly

Ubiquity: ”Vara närvarande överallt”
Vi har pc, mobiler, tablets idag och snart är det bilar, kylen osv… Vi vet inte vad som kommer sen. Därför är ubiquity internets superpower.
Flexibility:
Performance: 71% mobil users förväntar sig att mobile sites laddar lika fort om inte snabbar än på desktop.
74% mobile visitors lämnar en site om det. Men de flesta sidor i dag väger över 1 MB. 86% sites skickar samma content till mobiler som till desktop. Tänk på att sidorna inte ska vara för tunga! Under 5 sekunder att skicka iväg. Good performance is  good design.
Enchancements
– du behöver inte skicka all content till alla!.
Starta där du hittar den minsta gemensamma nämnaren för alla användare. Dra in kommentarer och relaterade bilder när de behövs och ladda inte in i onödan.
Future-friendly
Omfamna och acceptera att vi inte kan förutse vad framtiden bär med sig. Vänkta tills kunderna säger: Kylskåpet då?

Dissikera bit för bit:
Logo: Gör logon större säger kunderna. Om det är ngn bild som ska skickas upp i flera bilder är det logon.
Navigering: Där när man behöver den. Låt inte menyn äta upp hela ytan, te x lägga ut den på flera rader på mobilskärmen.
Search form:
Search är viktig. om du har en nav som är 5 nivåer djup, se till att du har search. Klicka på ”Serach # och popa ut en sökruta.
Product overview:
Visar produkt, vad den kostar och hur populär den är. 79% använder sig av telefonen för at bestämma sig om de ska ha produkten.
Product images:
Om man ska ha carousels – Tycker Yahoo är bra. Föregående + nästa och imellan så finns det antalet och vart du är. Zappos – visar hint av nästa bild. Men använder sig inte av enchancement. Vissa mobiler kan inte se den?
Kassa:
Ta upp rätt keybord, te x nummer för födelsedagar.
<input tupe=”number” pattern=”0-9*”/> (alltså keybord för att slå mobilnummer)
Social buttons: 
De är tunga. Tar 19 requests och 246, 7K. Tar inte med det per default, utan lägg istället in länkar. Prograessive enchancements.

Content:
Långa sidor på mobilen: Vi scrollar igenom en content typ i taget, tex en artikel.. Oftast blir det väldigt långt eftersom man staplar alla kolumner under varandra. Men hur vet då användaren att content finns där? Visar exempel på Obamas sajt, där man kan scrolla i all oändlighet. Visa istället användaren att det här finns om du är intresserad och de får själva ladda in om de är intresserade. Använd conditonal lodning, dvs progressive disclosure – hinta om att conent finns och ge det sedan till dem.”
Footer navigation. Krymp ihop.

Glöm inte att man på mobilen kan ringa direkt!. ”call tool” – <a href=”tel: 070…>ring</a>
Back to top link: Japp

 

 

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s


%d bloggare gillar detta: