LMAtech2014 - Responsive websites: The 3 W’s of going responsive
Responsive presentatie
-
Upload
wendie-huis-in-t-veld -
Category
Documents
-
view
208 -
download
3
Transcript of Responsive presentatie
“There is no Mobile Web.
There is only The Web,
which we view in different ways.80% van de Nederlandse bedrijven houdt geen rekening met mobile bezoekers
● 1992, eerste webpagina wordt gepubliceerd
● mei 1993 50 websites wereldwijd
● 1995 HTML (documentopmaaktaal) beschikbaar voor groter publiek
● CSS maakt meer styling mogelijk
● 1996 ontwikkeling database gebaseerde webinhoud
● 1998 Google
● 2001 Web 2.0; gebruikers gaan een rol spelen
● 2003 start WordPress
● 2006 Twitter
● December 2012 634 miljoen websites wereldwijd
● 2013:
● 96% van de Nederlanders heeft toegang tot internet
● 4,5 uur per dag online
● 2,3 apparaten ter beschikking
Internet groeit... en groeit
Net als de bezoeksmogelijkhedenApparaten Besturingssytemen Versienummers Browsers
● Windows● Apple● Linux● Android
● Laptop● Desktop● Smartphone● Tablet● TV En op al die apparaten
moet het werken
In Cijfers
Meest gebruikte formaten?
Meest gebruikte apparaat in Nederland? Touch apparaten in Nederland?
58% van de Nederlanders heeft een smartphone
28% van de Nederlandse gezinnen hebben een tablet
Eisen aan websites● Werkt op alle apparaten● Laadt snel● Makkelijk in gebruik● Duidelijke navigatie
Wensen aan websites● Grote afbeeldingen● Interactief● Sliders● Oneindig scrollen (horizontaal of verticaal)● Cirkels
WorkflowKlant is op zoekNaar een website
Ontwerper zoekt webbouwer
Ontwerper ontwerpt pagina's
Ontwerper geeft feedback over gebouwde website
Webbouwer Bouwt op basis van ontwerp
Ontwerper koppelt terug aan klant, klant is tevreden, betaalt.
Nieuwe workflowKlant is op zoekNaar een website
Ontwerper overlegt wireframe met klant
Ontwerper overlegt met bouwer, Samen maken ze een wireframe
Ontwerper ontwerpt stijl elementen
Webbouwer bouwt op basis van wireframe
HUH?Stijlelementen?
Wireframe?
sfeerkleuren
achtergrondfonts
buttonslogo
Beeldelementen
De indeling van de pagina's op de verschillende apparaat formaten
widgets
sidebars
koppen
footer
Wat is er andersStatische ontwerp-fase verdwijnt
“schermafbeelding” ontwerpen voor elke pagina in photoshopOntwerpen van stijlelementen in photoshopLayout ontwerp in browser
Werken in % in plaats van in px
Vaste breedte verdwijnt
Breedte van de website 940px of 960px of 1024pxMaximale breedte bepalen daarna werken met breekpunten
Inhoud staat in het contentvlak, of in de sidebar, de header of de footer
Content bepaald op basis van de layout
Elk onderdeel van de layout heeft eigen afmetingenAfmetingen van onderdelen van de layout worden begrensd in hoeveel % van de totale breedte
Content wordt hierarchisch, layout is afhankelijk van het apparaat, belangrijkste content springt het meest in het oog
Breedte in %Als je een maximale breedte hebt vastgesteld voor je ontwerp ga je percentages uitrekenen
Bijvoorbeeld:Maximale breedte = 1024pxHeader = 100% Content area = 62%Sidebar-rechts = 34%Ruimte tussen content en sidebar = 4%
Telefoon
480px297px163px19px
Groot scherm
1024px635px348px40px
Tablet
768px476px261px30px
BreekpuntenDeze breedtes kun je testen, en op basis daarvan bepaal je de breekpunten
Bijvoorbeeld:Vanaf beeldschermbreedte 600px worden alle vlakken 100% breedte waardoor de sidebar onder de contentarea zal vallenOfVanaf 480px is alleen de content area zichtbaar, de breedte van de sidebar wordt 0%
Breekpunten worden vastgesteld in het css bestand van door middel van media queries:
@media only screen and (max-width : 759px) {
#main {overflow: visible;
}#primary {
padding-bottom: 0px;}
#content {background: #ffffff;float: none;margin:0px!important;padding: 0 3%!
important;width: 90%!important;
}#secondary,#tertiary {
width: 80%;margin: 0 auto;
}
#main {padding: 0.8em;
}
DiscussieEen website is een tool, geen doel
Mijn werk begint eigenlijk pas nadat de website is opgeleverd
Informatie architectuur is een duur woord voor het aanleveren van pagina voorbeelden
Ik weet hoe websitebezoekers zich gedragen en pas mijn vormgeving daar op aan
Conversie is het belangrijkste van een website
Vormgeving staat den dienste van klantvriendelijkheid en gebruiksgemak
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
http://www.nu.nl/gadgets/3368282/bijna-25-miljoen-tablets-in-nederland.html
http://www.myabgc.com/resources/kid-on-computer.jpg
http://www.nownederland.nl/facts/internetvaardigheid/browsergebruik/#.UWHwK1pdW0w
http://static3.ad.nl/static/asset/2012/Internetgebruik_822.pdf
http://www.howtogomo.com/nl/d/waarom-mobiele-site/
http://services.google.com/fh/files/blogs/ompnl.pdf
http://emerce.marketingpapers.nl/documents/responsive%20design.pdf#top
http://www.loveinfographics.com/categories/mobile-phone-and-tablet-computing-infographics/best-apps-for-designers-infographic
Waar haalt ze het vandaan?