Mobile first! | Stap 2 mediaqueries

Mobile first!

Voor onze responsive website beginnen we eerst met de mobiele versie.

Om zo snel mogelijk de techniek onder de knie te krijgen kijken we nu nog niet zo zeer naar vorm maar meer naar leesbaarheid op mobiel.

Lees de complete opdracht voor deze les bij Koen Veldhuizen: https://docs.google.com/...

Aan het eind van les inleveren!

Introductie Media Queries

Bijna iedereen heeft wel eens een website op zijn mobiel of tablet bekeken. De ene website werkt heel goed op je mobiel en lijkt bijna op een App terwijl de andere geschaald is, de tekst niet is niet te lezen en je moet “Pinchen” / “Zoomen” om alle inhoud te zien.

Stelling

Als je website niet goed werkt op een mobile device dan is je website onbruikbaar.

“Introductie Media Queries” verder lezen

Website uploaden met Cyberduck

Als je een website hebt gemaakt  dan moet je deze ook op het web publiceren zodat hij voor iedereen zichtbaar wordt. Dit wordt ook wel uploaden genoemd. Het uploaden van de bestanden (zoals html en css bestanden en plaatjes) doe je met behulp van een ftp-programma.

In deze handleiding leer je hoe dat werkt op de webruimte van school. We gebruiken het gratis ftp-programma Cyberduck “Website uploaden met Cyberduck” verder lezen

Hoe haal ik mijn bezoekers over… – 3

Als mediavormgever is het belangrijk dat je een goede website kunt bouwen. Maar hoe haal je de bezoeker over om ook gebruik te maken van je website? Je hebt aan de vormgeving gedacht je hebt de teksten en afbeeldingen goed geselecteerd en de interface werkt ontzettend goed. Wat gebeurt en nu met de site?

Lees en maak deze opdracht

Webfonts -2

Door webfonts te gebruiken heb je veel meer keuze aan lettertypes dan tot voor kort op het web mogelijk was. Er zijn een aantal verschillende manieren om webfonts toe passen. Bijvoorbeeld:

Je kunt bij deze opdracht zelf kiezen welke manier je gebruikt. Als je kiest voor Googlefonts of via de interface van dreamweaver CC dan vind je prima uitleg door de link te volgen.

Voor het gebruik van Fontsquirrel fonts kun je de uitleg in deze lesbrief webfonts volgen.

Schermafbeelding

Taken

Maak zelf een document waarin je 2 webfonts toepast. Stel daarbij minimaal de volgende elementen in:

  1. <body>
  2. <h1>
  3. <h2>
  4. <p>
  5. #header
  6. .introtekst

Single Page Parallax | opdracht 2

Maak een website waarbij alles op een lange ‘page’ staat. Door middel van verschillende scrollsnelheden ga je naar de volgende menu-items / rubrieken van de site.

De complete opdracht kun je als pdf downloaden

Acrobatschermopname001

Een werkend voorbeeld staat hier: SinglePage Parallax voorbeeld

Full Page Parallax

Een geavanceerd versie waar de hoogte en breedte zich aanpast aan de afmetingen van je browservenster: Full Page Parallax