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.

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 in de praktijk
  > We werken een voorbeeld uit met Skeleton en bekomen zo een functionerende website.
• 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

Is dit iets voor jou?

Dit leer je maken:

Voorbeeldoefening:

• Desktopversie
• Mobile versie 1 *
• Mobile versie 2 *

* bekijk op een smartphone...

Oefeningen

• OEFENING 1
• OEFENING 2
• OEFENING 3
• OEFENING 4

Scripts

Download de scripts uit de cursus