Responsive Design: Uitdagingen en Oplossingen
Upcoming SlideShare
Loading in...5
×
 

Responsive Design: Uitdagingen en Oplossingen

on

  • 454 views

Responsive design begint steeds normaler te worden. Zo hebben nagenoeg alle template providers al responsive templates en ook de grotere, ingewikkelde websites zijn steeds vaker responsive. Maar hoe ...

Responsive design begint steeds normaler te worden. Zo hebben nagenoeg alle template providers al responsive templates en ook de grotere, ingewikkelde websites zijn steeds vaker responsive. Maar hoe werkt dat nou? Wat kom je allemaal tegen als je responsive websites/templates aan het bouwen bent? Binnen deze presentatie laat ik een aantal mogelijke oplossingen zien voor de uitdagingen waar wij als ontwikkelaars van responsive Joomla! templates dagelijks mee te maken hebben.

Statistics

Views

Total Views
454
Views on SlideShare
358
Embed Views
96

Actions

Likes
0
Downloads
13
Comments
0

3 Embeds 96

http://joomladagen.nl 53
http://www.joomladagen.nl 37
http://conference 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Vertellen wie ik ben en wat ik doe
  • Wat gaan we doen vandaag?
  • Mei 2010 Ethan Marcotte Artikel. Responsive: fluid grids, fluid images en media queries. Aanpassen aan device/schermbreedte
  • fixed+fluid grids, fixed + fluid images en @media queries Vaste breekpunten. Vaak fluid in het begin, bij meer columns = fixed
  • Apaptive design kun je eigenlijk zien als progressive enhancement. Bijv locatiebepaling. Adaptive design > adaptive layouts & responsive layouts. Nu beginnen met website bouwen.
  • Mobile first. Features phones. Iedereen lezen. Media queries negeren oude browsers. Mobiel klaar? dan volgende schermbreedte. Gebruik een framework.
  • Gebruik een framework (bootstrap, golden grid etc.) zodat mobile geregeld is. Niet meer mee bezig houden en alles is mooi. Eventueel zelf naar eigen hand aanpassen. 1x doen. Ook oudere veelgebruikte browsers.
  • Bekijk ook eens je stats. Wie bezoekt je site met wat dus waar concentreer je je op?
  • Straks tools en websites. Groot vraagstuk. Geen antwoord, wel suggesties. JS + PHP en htaccess oplossingen. Goede oplossing? Minder images! SVG of @font-face. voor vectors en icons bijv. 80% + 95% ondersteuning. Goede fallback Ander groot vraagstuk? Tables!
  • Zijn een aantal goede suggesties. Even bespreken. Waarom wel waarom niet? Aantal JS. wel fallback (goede css fallback)
  • alles staat er maar geen vergelijking
  • een table is geen chart/taartdiagram en dit kan niet met elke table
  • Goede optie. Wel een extra klik maar je kunt de table zien zoals hij is bedoelt
  • Dingen weglaten.. Da's nooit goed. Net zoals joomla nu waar het wel kan
  • Dingen weglaten maar ze terug laten komen (en dan horizontaal scrollen) = wel goed
  • Table flippen en dan de headings laten staan is best slim. Lange headings?
  • bijna geen table meer maar kijken naar kleurtjes, je kan niet goed vergelijken omdat de table structuur uit elkaar is getrokken. Zal niet werken met iets langere titles
  • Op zich aardig. Lange eerste colom (zoals joomla) werkt niet
  • Wel een goede oplossing maar ook wel met JS. 2% browsed zonder JS. Dus dan heb je een goede fallback nodig. Wat in dit geval een gewone table is.
  • Beter dan aparte oplossing in JS omdat nu alles in 1 keer aanpast.
  • ...
  • Do nothing approach. Als je 3 items hebt wel handig
  • Footer anchor. Hele goede approach maar je menu moet absolute positioned zijn zodat je eigenlijk geen items boven je menu kunt plaatsen.
  • Select menu. Veel gebruikt. Ik ben er geen fan van. Vooral niet met grotere menu's omdat de hele zooi onder elkaar staat.
  • toggle. My favorite. Wel ervoor zorgen dat level1 zichtbaar is en hiden met JS. level2 alleen zichtbaar wanneer JS aan staat zodat je geen hele lijst krijgt. Hele zooi vervangen met een knopje. Deze er voor laten zorgen dat je het menu weer te zien krijgt. Werk met sliders om leevel2 zichtbaar te maken.
  • Mobiel alleen level1. Op subpage ook level2 of level3 of level4 etc.
  • Met JS aan menu laten verdwijnen en knop verschijnen. Toggle open. Ook submenu tot heel diep.
  • Zo diep als je wil.
  • Op desktop naast elkaar met bijv. dropdown (of splitmenu)
  • Dropdown
  • Left Nav Fly Out. Zoals facebook. Wel een leuke manier. Je kunt ook fijn weer extra scrollen binnen de zijkant. Ook kun je er eenvoudig een zoek oid in kwijt. Veel JS
  • Footer only. Kan ook. lijkt mij niet echt top voor mobiele gebruikers. Zet dan gewoon die anchor er boven.
  • Hide and cry. Ai ai ai. Niet doen he, als ik thuis op de bank zit wil ik net zo veel zien als op mn pc
  • Tools
  • ...
  • ...
  • ...
  • ...
  • ...

Responsive Design: Uitdagingen en Oplossingen Responsive Design: Uitdagingen en Oplossingen Presentation Transcript

  • Responsive Design:Uitdagingen & OplossingenRobin Poort (@rhcpoort)JD13NL, Zeist, april 2013
  • Tweepixels.nl/Academytrainer | Joomla!ThemePartner.comdesign / development
  • Responsive design?Adaptive design?Uitdagingen (en mogelijke oplossingen)
  • Responsive Web DesignFluid grids, fluid images and media queries
  • Adaptive vs Responsive
  • Design vs Layout
  • Responsive bookmarkhttp://responsive.victorcoulon.fr/iPhone & iPad debug through safaribit.ly/Qy06v8Opera mobile emulatorhttp://www.opera.com/developer/mobile-emulator
  • Responsive bookmarkhttp://responsive.victorcoulon.fr/iPhone & iPad debug through safaribit.ly/Qy06v8Opera mobile emulatorhttp://www.opera.com/developer/mobile-emulator
  • Responsive bookmarkhttp://responsive.victorcoulon.fr/iPhone & iPad debug through safaribit.ly/Qy06v8Opera mobile emulatorhttp://www.opera.com/developer/mobile-emulator
  • Responsive navigationhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/Responsive tableshttp://css-tricks.com/responsive-data-table-roundup/Responsive imageshttp://css-tricks.com/which-responsive-images-solution-should-you-use/
  • Vragen?
  • @rhcpoort | @theme_partner | @tweepixelswww.themepartner.com | www.tweepixels.nl/academyTimes up