Design Trainingen

Responsive HTML5 Website

<<< terug1 Head Section2 Body Section3 Responsive CSS

Wat is Responsive Design?

Een website die zich in vormgeving aanpast aan de verschillende schermbreedtes van apparaten, zoals smartphones en tablets. Maar ook de meeste App's hebben een responsive layout.

Dit ga je maken...

TIP: schuif het browservenster groter en kleiner om het Responive effect te ervaren...

Waarom leer ik dit?

De techniek waarmee responsive websites worden gebouwd is HTML (Hyper Text Markup Language) en CSS (Cascading StyleSheets). Responsive Design zal de standaard worden voor websites en apps. Daarom leer je dus wat dit is en hoe het werkt, zodat je in de beroepspraktijk weet waar je als vormgever van websites over praat.

Wat leer ik?

Door knippen en plakken van HTML- en CSS-code, leer je hoe de opbouw van een responsive webpagina in elkaar zit. Je maakt een professionele HTML-pagina met een:

KOP (head-section voor de browsers)

LIJF (body-section voor de content)

STAART (css voor de vormgeving)

Aan de HTML-content koppel je Cascading StyleSheets (CSS). Hierdoor ervaar je de kracht van Cascading StyleSheets in de vormgeving.

Met behulp van enkele korte opdrachten pas je zelf de CSS aan. Hierdoor wordt je vaardiger in het werken met CSS. Ook vul je de pagina met eigen tekst en afbeeldingen, video's en widgets. Zodra je de basis van CSS een beetje onder de knie hebt, kun je blijven oefenen en misschien zelf een eigen ontwerp omzetten via HTML en CSS!

Wil je nog extra interactiviteit? Dan kun je ook leren hoe je een slideshow-script of een foto-popup-script aan je webpagina koppelt. Zelfs het koppelen van een simpel CMS(tekst-beheer)-systeem behoort tot de mogelijkheden. Zo krijg je een complete professionele, responsive website!

Moet ik als vormgever Responsive kunnen bouwen?

Nee. Als vormgever hoef je dit niet te kunnen, al wordt de technische kennis steeds vaker gevraagd door ontwerpbureau's. Het belangrijkste is dat je een website kunt vormgeven en daarbij ook een voorstel doet voor verschillende schermbreedtes (mockup). Het bouwen laat je meestal aan een programmeur over. Maaaaaarrrr.....

Zoals je ook iets over druktechnieken (resolutie & drukkleuren) moet weten om een goed ontwerp voor drukwerk te maken, zo moet je ook basiskennis van de webtechniek (html & css) hebben om een goed ontwerp voor een website te kunnen maken. Een beetje techniekkennis is dus echt noodzakelijk voor een vormgever. Bijvoorbeeld om goed met een programmeur te kunnen overleggen.

Hoe leer ik dit?

Door de onderstaande opdracht uit te voeren ontdekt je, door kopieren en plakken, de opbouw van een HTML-document. Ook ervaar je hoe krachtig vormgeving met CSS werkt. Met behulp van enkele korte opdrachten pas je zelf de CSS aan. Hierdoor wordt je vaardiger in het werken met CSS. Ook vul je de pagina met eigen tekst en afbeeldingen, video's en widgets. Hierdoor wordt je vaardiger met HTML.

Veel code kopieren en plakken is de beste manier. Omdat het over internet-techniek gaat, zijn kennis en scripten eenvoudig te Googlen. Zodra je dan de gewenste code gevonden hebt, kun je deze kopieren en plakken in je eigen HTML documenten.

TIP: Een goede website om de basis van de HTML- en CSS-code te leren is: w3schools.com

Waar moet ik op letten?

  1. Gebruik als basis de map die je in deze tutorial download.
    Indien er iets misgaat met je bestanden, kun je op deze pagina altijd een nieuwe versie downloaden.
     
  2. Werk in 1 hoofdmap en kopieer afbeeldingen direct naar je images-map in de hoofdmap.
    Zo voorkom je 'dode' links of afbeeldingen die niet worden geladen.
     
  3. Geen spaties en hoofdletters in bestandsnamen
     
  4. De homepage heet altijd: index.html (noem je deze eerste pagina anders, dan werkt je website niet!)
     
  5. In HTML staan tekst en beeld tussen Tag's. Een Tag wordt altijd geopend en gesloten:
    <tag open> tekst of afbeelding</tag sluit>
    Voorbeelden van tag's zijn:
    <html>  <head>  <body> <header>  <section>  <article>  <footer>  <h1>  <h2>  <p>
    Let tijdens het bouwen op de open- en sluit tag's. Probeer de logica te zien
     
  6. Wil je eigen afbeeldingen gebruiken?
    Verklein afbeeldingen eerst via Photoshop     naar de breedte die nodig is in de website:
    afmeting in pixels | 72dpi | sRGB
  7. Zorg dat je je website online kunt testen (FTP).
    - Direct vanuit Dreamweaver met de preview-knop (wereldbolletje)
    - Gebruik eigen hosting of de gratis hosting van school (studentnummer.gluweb.nl).
      Vraag je docent hiernaar.
     
  8. De meeste achtergrondkleuren van blokken in deze website hebben transparantie. De achtergrondkleur van de body zorgt dan dat de hele website uit 1 kleur bestaat met verschillende tinten. Dit zorgt voor veel rust op de pagina. Je kunt de transparantie van de blokken zelf aanpassen. Het getal 0.8 kun je zelf wijzigen:
    - 1.0 is volledig dekkend
    - 0.0 is volledig transparant
    background: rgba(255,255,255,0.8);
  9. Tussen de code staat ook 'grijze' tekst. Deze tekst heet: commentaar (eng: comment)
    In het commentaar staan aanwijzigen of uitleg over de code.
    Dit commentaar wordt niet door de browser of gebruiker gezien, alleen de bouwer kan dit zien.
    Als je het commentaar niet meer nodig vindt, kun je het gewoon weghalen.
    Verschillende manieren om commentaar-tekst toe te voegen

    in HTML code: <!-- commentaar -->
    in CSS code : /* commentaar  */
    in PHP/JavaScript code per regel: // commentaar

Bouw nu zelf je eigen Responsive Website

Zonder veel kennis en ervaring in de webtechniek, bouw je in een aantal stappen toch zelf je eigen Responsive website. Deze kun je later uiteraard gaan vullen met tekst en beeld en aanpassen aan je eigen wensen. Door het volgen van de stappen en aanpassen van de code leer je vanzelf hoe de HTML en CSS werkt. Als kers op de taart krijg je er nog een paar mooie layout-settings bij waarmee je verschillende effecten en layouts krijgt! Ook zijn er instructies voor een slideshow, foto-popup (fancybox) en koppeling met een gratis online CMS (tekstbeheer).

Kortom, in een aantal stappen bouw je hier gratis en voor niks een responisive HTML5 website, zonder veel kennis van de code. Deze website kun je dan ook nog eens gebruiken voor je eigen portfolio!

Veel plezier en maak er wat moois van!!

Start met bouwen

 

TIP: element inspecteren met Firebug

Om snel fouten op te sporen of het effect van een wijziging in je HTML en CSS code te zien, kun je gebruik maken van de browser plug-in Firebug.
Hiermee kun je code wijzigen en direct het resultaat in je scherm zien. Let op: de code wordt niet echt gewijzigd in je documenten. Dat doe je uiteraard zelf, zodra je de fout gevonden hebt, of weet op welke manier je de code wilt wijzigen. Zodra je de pagina in je browser ververst, worden je tijdelijke aanpassingen in de code weer terug gezet naar de code in jouw documenten. Onmisbare tool voor elke website bouwer!

  1. installeer de firebug plugin in je browser
  2. Klik met je rechtermuis op een element
  3. Kies: element inspecteren
  4. Zoek het goede element, body, een div, class of tag
  5. Wijzig in de rechter kolom de CSS en kijk wat er verandert in de browser