cursus Responsive Webdesign

Responsive Webdesign... Het is tegenwoordig een hot item. En terecht! Nu meer dan de helft van alle gezinnen een smartphone of tablet heeft, moeten de website natuurlijk ook op die mobiele apparaten keurig en correct vertoond worden. Je begrijpt het al Responsive Webdesign, betekent dat je een website maakt voor mobiele apparaten. In deze cursus leer je hoe je een site kan testen op iPhone, iPad en Android. Ook als je deze apparaten niet hebt. Je leert werken via CSS Media Queries. Verder leer je JQuery Mobile en andere systemen gebruiken voor het bouwen van degelijke en mobiele sites. Veel succes met het maken van mobiele websites!

Inhoudsopgave

• Wat is responsive webdesign
  Responsive webdesign betekent dat je websites maakt voor mobiele apparaten: smartphones en tablets. In deze cursus leer je hoe je dit doet.
• Een overzicht van smartphones, besturingssystemen en browsers
  Welke smartphones bestaan er? Welke besturingssystemen en browsers worden gebruikt op een smartphone? Welk wordt het meeste gebruikt? Bekijk de statistieken. Maak kennis met iPhone, iPad, Android, enz
• Test een website op iPad
  Hoe kan je een website testen op iPad, als je er geen hebt?
• Test een website op iPhone
  Hoe kan je een website testen op iPhone, als je er geen hebt?
• Test je website op Opera mobile
  Hoe kan je een website testen op Opera Mobile?
• Test je website op Android
  Hoe kan je een website testen op Android, als je geen smartphone hebt?
• Test je website op Blackberry, Nokia en Palm
  Hoe kan je een website testen op Blackberry, Nokia en Palm als je geen smartphone hebt?
• Usability voor mobiele apparaten
  Hoe maak je een website gebruiksvriendelijk?
• Schermresoluties van smartphone, tablets en desktop
  Voor we websites maken, moeten we de schermresoluties kennen waarvoor we ontwerpen
• Zoomen of niet zoomen
  
• Afbeeldingen invoegen
  Voor mobiele websites moet je speciale acties ondernemen, bij het invoegen van afbeeldingen.
• Viewport
  Wat is de viewport en waarom wel of niet gebruiken?
• Metatags voor iPhone en iPad
  
• CSS Mediaqueries
  Via css kan je aparte designs tonen aan bepaalde schermgroottes. Hoe werken met @media en aparte stijlen?
• Inhoud tonen, verplaatsen of verbergen
  Hoe kan bepaalde inhoud op smartphone anders tonen dan op desktop, of bepaalde onderdelen gewoon verbergen?
• Een streepje javascript
  Via javascript gaan we onze css bijstaan, zodat we in elke browser een identiek resultaat krijgen.
• Skeleton: een responsive framework
  We leren werken met Skeleton, een gratis CSS framework
• Skeleton geavanceerd
  We werken een voorbeeld uit met Skeleton en bekomen zo een functionerende website. Verder gaan we geavanceerde toepassingen maken.
• jQuery Mobile: connectie, divs en lay-out
  We maken een connectie met CSS en Javascript en maken zo een webpagina met lay-out
• jQuery Mobile: inhoud
  Hoe kan je inhoud maken en verschillende pagina's ontwerpen?
• jQuery Mobile: de navigatiebalk en paginaovergangen
  Hoe maak je een navigatiebalk? Hoe maak je eigen iconen? Hoe kan je overgangen maken tussen de pagina's?
• jQuery Mobile: sticky footer en header
  Hoe kan je een sticky footer en header maken? Hoe maak je lijsten?
• jQuery Mobile: Grids en Uitklapbare inhoud
  Hoe gebruik je grids en wat zijn grids? Hoe kan je inhoud laten uitklappen?
• jQuery Mobile: formulieren
  Hoe maak je formulieren in jQuery Mobile?
• Mobiele apparaten detecteren: javascript
  Hoe kan je via javascript detecteren of men werkt met Android, iOS, Palm, ...
• Mobiele apparaten detecteren: php
  We bespreken twee manieren, om via PHP het mobiel apparaat te detecteren.
• Mobiele apparaten detecteren: .htaccess
  Via .htaccess kan je een mobiel apparaat detecteren. Hier vindt u de code.
• Een voorbeeld
  We maken een volledige website volgens de regels, met 2 opties: CSS mediaqueries en jQuery Mobile
• De supersnelle ronde: een conclusie
  In dit hoofdstuk vind je een samenvatting en algemene uitleg bij responsive webdesign. Het is geen slecht gedacht om dit hoofdstuk bij aanvang al eens door te nemen.
• Afbeeldingen responsive maken
  Hoe kan je ervoor zorgen dat ook afbeeldingen responsief zijn en correct vertoond worden op mobiele apparaten. We leren twee methoden: via CSS en via JavaScript.
• Een menu responsive maken
  Via jQuery leren we ook ons menu geschikt maken voor smartphone en tablet. We leren hoe TinyNav werkt.
• Een responsive slideshow maken
  We leren ook onze slideshow responsief te maken via jQuery.
• Het browserprobleem: CSS Hacks uitvoeren
  Internet Explorer 6, 7 en 8 begrijpen geen mediaqueries. We leren via een CSS Hack ervoor te zorgen dat onze responsive website ook in IE6, IE7 en IE8 correct vertoond wordt.