Overslaan en naar de inhoud gaan

Redesign website 2015

Redesign website 2015

2015, nieuw jaar en een nieuw design. Minimalistisch is dan toch wel het thema. Lees verder voor de hoe, wat en waarom.

Ditmaal geen Drupal zoals te lezen in de post Maar, je doet toch Drupal?, maar gewoon statische HTML. Retro HTML is weer helemaal in.

Voor de navigatie heb ik gekozen voor het hamburger icoontje van de Font Awesome familie in de linker bovenhoek van de site. Oorspronkelijk zat hij rechts, maar het hamburger icoon van Firefox zit daar ook en dat werkt verwarrend.

Update: het hamburger icoontje is ondertussen vervangen door het woord MENU.

Uitleg knoppen

Op de homepagina staat alleen het menuknopje. Op de onderliggende pagina’s is er aanvullende navigatie. Zo kan je terug naar de voorpagina en kan je naar het vorige of volgende item gaan.

Drukken op de menuknop opent het menu vanuit de linkerkant van de site. Over de rest van de site komt een lichtgrijze overlay en deze maakt de site “inactief”. Je kan niet meer scrollen of drukken op links. Het menu sluiten maakt dat weer ongedaan.

Uitleg navigatie

Daarnaast kan je op een detailpagina deze ook nog delen via Twitter. Dit kan gedaan worden met een vrij simpele <a> tag.

1
2
3
4
5
6
7
8
<a class="twitter-share-button pager-link"
   href="https://twitter.com/share"
   data-size="large"
   data-url="[url]"
   data-via="vandijkdavid"
   data-text="[description]">
  <i class="fa fa-twitter"></i>
</a>

Responsive

Uiteraard is de site responsive. Wel minimaal aangezien ik geen ingewikkelde layout heb. Op artikelpagina’s verdwijnen we de extra knoppen onder de menuknop. Dit omdat deze anders in de weg zitten bij het lezen van het artikel. Verder is het hele gebied scrollbaar, de regio zelf is fixed en kan dus niet scrollen, daarom moet de inhoud dat wel kunnen wanneer deze groter is dan de container. Tevens is de fontgrootte ook iets kleiner op smallere schermen.

Sociale media

Moet er toch maar een keer aan geloven. Sociale media integratie in mijn site, maar dan wel minimaal. Het minste wat je kan doen zijn meta headers aanbrengen in de broncode die vertellen wat voor informatie er allemaal op de pagina staat. Denk aan een titel, intro en een afbeelding. Dit wordt door Twitter en Facebook gebruikt om preview card te maken van de link die je probeerd te delen.

Voorbeeld van de meta tags in deze site

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{.% if page.thumbnail %.}
  <meta property="og:image" content="[imageurl]">
  <meta property="og:type" content="article">
{.% endif %.}
<meta property="og:url" content="[url]">
<meta property="og:title" content="[title]">
<meta property="og:description" content="[description]">

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@vandijkdavid">
<meta name="twitter:title" content="[title]">
<meta name="twitter:description" content="[description]">
<meta name="twitter:url" content="[url]">
{.% if page.thumbnail %.}
  <meta name="twitter:image" content="[imageurl]">
{.% endif %.}

Voorbeeld Facebook

Facebook

Voorbeeld Twitter

Twitter

Update 05 july

Het hele uitschuifmenu aan de linkerkant is verdwenen en is verplaatst naar de bovenkant van de site. De is niet sticky gemaakt (zó 2014). Hierdoor kon ik ook de javascript die nodig was om het menu te activeren weg doen. Scheelt weer KB’s en snelheid. Voor lagere resoluties werkt het nu ook prettiger en sneller. Op mobiel is het bovenste menu ingekort tot 3 items. Het volledige menu is ook in de footer te vinden zodat je na het lezen toch door kan naar oudere berichten.

Menu aan de bovenkant

Schema.org

Daarnaast heb ik ook tagging van schema.org ingezet om blog en blogpostings te markeren. Op deze manier krijgen zoekmachines heel gericht door wat voor soort content het is en onder welke categorie het moet vallen.

Schema.org