Responsive Design: Uitdagingen en Oplossingen
•Descargar como PPT, PDF•
0 recomendaciones•711 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Responsive Design: Uitdagingen en Oplossingen
Similar a Responsive Design: Uitdagingen en Oplossingen (20)
Más de ThemePartner
Más de ThemePartner (15)
Último
Último (20)
Responsive Design: Uitdagingen en Oplossingen
- 1. Responsive Design: Uitdagingen & Oplossingen Robin Poort (@rhcpoort) JD13NL, Zeist, april 2013
- 2. Tweepixels.nl/Academy trainer | Joomla! ThemePartner.com design / development
- 3. Responsive design? Adaptive design? Uitdagingen (en mogelijke oplossingen)
- 4. Responsive Web Design Fluid grids, fluid images and media queries
- 37. Responsive bookmark http://responsive.victorcoulon.fr/ iPhone & iPad debug through safari bit.ly/Qy06v8 Opera mobile emulator http://www.opera.com/developer/mobile-emulator
- 39. Responsive bookmark http://responsive.victorcoulon.fr/ iPhone & iPad debug through safari bit.ly/Qy06v8 Opera mobile emulator http://www.opera.com/developer/mobile-emulator
- 42. Responsive bookmark http://responsive.victorcoulon.fr/ iPhone & iPad debug through safari bit.ly/Qy06v8 Opera mobile emulator http://www.opera.com/developer/mobile-emulator
- 44. Responsive navigation http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Responsive tables http://css-tricks.com/responsive-data-table-roundup/ Responsive images http://css-tricks.com/which-responsive-images-solution-should-you-use/
- 45. Vragen?
- 46. @rhcpoort | @theme_partner | @tweepixels www.themepartner.com | www.tweepixels.nl/academy Time's up
Notas del editor
- 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
- ...
- ...
- ...
- ...
- ...