De beste backlink checkers

Bent u benieuwd wat uw linkprofiel is of wat voor linkprofiel uw concurrenten hebben? Dat kunt u heel eenvoudig controleren via een zogenaamde backlink checker. Het verkrijgen van goede en kwalitatieve backlinks is zeer belangrijk voor je ranking in Google. De informatie in dit artikel is aangeleverd door www.vimexx.nl.

Google Search Console

Google Search Console was vroeger ook wel bekend als Google Webmaster Tools. Je kunt je hier erg eenvoudig via deze website op aanmelden. Als u hier nog geen account heeft adviseren wij dit zo snel mogelijk te doen. Je kunt hier naast de weergegeven links nog veel andere informatie over uw website vinden.

SEO Spyglass

SEO Spyglass is een zeer handige maar ietwat verouderde tool voor het checken van backlinks. Je kunt hier overzichtelijke rapporten vinden van het backlinkprofiel van veel websites. Het is geen online tool maar moet op de computer worden geinstalleerd. Deze tool kost daarom ook maar €125,- per jaar. Als je veel bezig bent met linkbuilding maar niet te veel geld wilt uitgeven aan een bruikbare tool is dit een goede optie.

Ahrefs

Ahrefs is een zeer complete backlink checker. Alle resultaten worden duidelijk weergegeven. In tegenstelling tot SEO Spyglass is Ahrefs wél een online tool. Deze tool heeft ook een gratis versie, je kunt dan echter maar één website checken per dag. Wanneer je een betaald account aanschaft kost de lite versie $99,- per maand.

Majestic

Majestic is een handige tool die vooral bekend is om het meten van de Trust Flow en Citation Flow. Dit is vergelijkbaar met de DA/PA van Moz. De gratis backlinkcheker van Majestic is zéér beperkt. Als je veel bezig bent met het optimaliseren en het verkrijgen van backlinks naar je website adviseren wij de plug-in te instaleren in de toolbar van je browser.

Backlinktest.com

De backlinktester backlinktest.com is zéér onbetrouwbaar en zeer onvolledig. Niet alle links worden geanalyseerd. Het enige voordeel is dat deze tool te gebruiken is

Test uw linkprofiel

Bent u benieuwd hoe het is gesteld met uw linkprofiel? Haal uw website eens door bovenstaande checkers en kijk hoe het is gesteld met uw linkprofiel.

admin

Webhosting en de website bouwer!

Steeds vaker willen klanten meer resources gebruiken als het aan komt op het hosten van een website. Websites worden groter en steeds meer mensen maken gebruik van SEO-technieken om iedere dag duizenden bezoekers te krijgen.

Shared webhosting is over het algemeen niet meer zeer geschikt indien jij duizenden bezoekers per dag ontvangt. Indien de bezoekers worden uitgestreken over de volledige dag dan kan het prima. Lanceer je echter een aantal keer per dag een update of een actie via Facebook en krijg je veel bezoekers op exact hetzelfde moment dan wil dit nogal eens voor problemen zorgen bij shared webhosting.

Tegenwoordig zie je vaak dat deze problemen opgelost worden door gebruik te maken van een eigen dedicated webserver, je maakt gebruik van containerisatie of je maakt gebruik van je eigen VPS.

Het voordeel van een VPS is dat je deze kunt afnemen in de vorm van managed of unmanaged. Je wilt zelf alle software waaronder het besturingssysteem installeren of je laat alles installeren en onderhouden en je maakt zelf alleen de keuzes. Echter begrijp je ook wel dat een managed VPS een stuk duurder is. VPS geeft je in principe dezelfde vrijheid als een dedicated webserver, echter heb je het voordeel dat bij een dedicated webserver jij de enige bent die gebruik maakt van de resources.

De kosten van een dedicated server zijn vrij hoog, aangezien jij een stuk ruimte in het datacenter moet huren om jouw server te plaatsen. Deze ruimte wordt gekoeld, voorzien van een redundante stroomvoorziening en beveiliging.

Door middel van containerisatie wordt er gebruik gemaakt van standaard shared webhosting, echter worden de resources verdeeld in de vorm van een VPS. Je kunt niet meer besteden dan jij toegewezen gekregen hebt binnen jouw container. Zo wordt er voorkomen dat een bepaalde website meer resources van een server kan gebruiken, wat kan resulteren in extra load voor andere websites.

Ook zie je bij sommige webhosters dat men gebruik maakt van proxy caching servers, zoals Varnish cache. Vaak zit u dat u niet de keuze hoeft te maken voor een webhoster aangezien de website bouwer voor u een keuze maakt. Het is daarom van belang dat u goed let op uw webhosting indien u een webdesign offerte aanvraagt voor uw website!

admin

Sterke en unieke content is niet meer genoeg!

Het interweb is zich extreem aan het uitbreiden, niet alleen merk je dat op het gebied van SPAM, maar tevens merk je dat op het gebied van SEO en artikel marketing. Wanneer je eenmaal honderden fora hebt bezocht dan kom je er al snel achter dat kwalitatieve content ervoor zorgt dat jouw website een succes wordt, maar is dit wel zo?

Kwalitatieve content is niet meer genoeg!

Randy Fishkin van SEOmoz heeft tijdens een “White Board”-Friday uitgelegd wat het kaf van het koren scheidt. Waarom SEOmoz zo’n succes is en hoe je dit kunt behalen met jouw bedrijfswebsite.
Zeg nou zelf, de volledige top 10 (misschien zelfs top 20) scoort op belangrijke termen met unieke en kwalitatieve content. Content waarvan je zelf zou zeggen, ja! hier heb ik wat aan.

Wil je serieus extreme groei meemaken dan zegt men dat kwalitatieve content tegenwoordig niet genoeg is om te scoren en social shares te krijgen. Tegenwoordig noemt men dit de 10x factor. 10x betere content dan alle unieke en kwalitatieve content die wordt aangeboden.

Hoe bereik je de 10x content factor?

De content factor wordt bereikt door een controle van de sociale shares via buzz sumo op de belangrijkste vragen in combinatie met een strakke vragenlijst. Hierbij kun je denken aan:

Worden deze vragen beantwoordt?
Hoe is de ‘User Experience’?
Details en hoe uitgebreid is het?
Gebruik van visuele aspecten?

Wil jij ervoor zorgen dat je content gedeeld wordt dan moet je al deze factoren controleren. Denk jij dat je het niet gaat halen met de content die al geleverd wordt? Begin er dan niet meer aan! Zeg nou zelf, extreem goede content (factor 10x) is niet te vergelijken met de “Sterke unieke en kwalitatieve content”. Deze content wordt geschreven binnen een weekend. Extreem goede content wordt geschreven binnen weken. Je legt de lat hoog en concurrentie zal nooit de tijd erin kunnen steken om jouw artikel te evenaren. Wanneer je alleen het beste van het beste levert kun je rekenen op trouw volgers/shares en uiteindelijk veel verkeer.

Voor de volledige omschrijving, bekijk het filmpje van SEOmoz.

Niels Vos

Niels is gespecialiseerd in het ontwikkelen van websites. Tevens adviseert hij ondernemers op het gebied van online marketing. Oprichter van Webdesign-Twente en optimalisator bij webhoster Antagonist B.V.

More Posts - Website - LinkedIn - Google Plus

Google Analytics tutorial voor beginners!

Je bent druk bezig met het uitbreiden van je website, maar hebt niet de mogelijkheid om te bekijken hoeveel bezoekers nou daadwerkelijk jouw pagina’s bereiken? Maak gebruik van Google Analytics! Google Analytics geeft je de mogelijkheid om uitgebreide rapporten te maken, tevens is de implementatie zeer eenvoudig.

Hoe krijg ik Google Analytics in mijn website?

Google Analytics wordt geinstalleerd door gebruik te maken van een stukje code en deze te implementeren in de <head> van je website. Veelal komt het voor dat jouw website gebruik maakt van een index.php met hierin een header.php / content.php / footer.php. Alle implementaties in de header worden op deze manier automatisch doorgevoerd over alle pagina’s van je website. Contentmanagementsystemen zoals WordPress en Drupal maken gebruik van deze methode.

Is jouw website statisch of beschikt deze niet over een include(‘header.php’) zorg dan dat je de broncode van Google Analytics kopieert in al jouw pagina’s, anders worden niet alle pagina’s getrackt.

Maak een (gratis) account aan binnen Google Analytics

Je kunt een gratis Google-account aanmaken via https://www.google.nl/analytics/. Het is overigens mogelijk om meerdere websites aan een enkele account toe te voegen. Hierdoor heb je meer overzicht en kun je gemakkelijk de statistieken van meerdere websites bekijken. Ook kun je de websites onder een enkele account toevoegen bij ‘Google Webmastertools’.

Hoe voeg ik een website toe aan Google Analytics

Het kan overigens zo zijn dat je direct een website moet toevoegen, ik laat zien hoe je normaal een extra account kunt toevoegen. Na het inloggen via https://www.google.nl/analytics/ kun je in de hoofdnavigatie op ‘Beheerder’ klikken. Hierna klik je op de linkerkolom op de website en klik je op ‘Nieuw account aanmaken’.

Hierna krijg je de mogelijkheid om verschillende onderdelen in te vullen, waaronder de naam, url, branchecategorie en tijdzone.

Hierna kun je onderaan de trackingID ophalen. Deze code plak je in de header.php, zoals net al is besproken. Hierna kun je de statistieken de eerstvolgende dag bekijken.

Niels Vos

More Posts - Website - LinkedIn - Google Plus

De Top 5 Gratis Stock Foto Websites!

Steeds meer webmasters maken gebruik van een blog en hebben afbeeldingen nodig om de ‘saaie’ content te ondersteunen met professionele afbeeldingen. Stock photos zijn er in verschillende vormen. De echte professionele afbeeldingen kosten vaak geld, maar hoe voorkom ik dat ik in de problemen kom door het gebruik van een foto van iemand anders? Gebruik één van deze websites om jouw blog te voorzien van geweldige afbeeldingen!

Top 5 gratis foto websites!

Stocksnap

Stocksnap is een absolute favoriet als het aankomt op hoge kwaliteit stock foto’s. De foto’s zijn allemaal gratis en direct te downloaden. De website geeft tevens een eenvoudig overzicht van de meest gedownloade foto’s. Alle foto’s van Stocksnap worden gepubliceerd onder de ‘creative commons public domain’ en vergen geen extra benodigheden.

Kosten:	Gratis
Account aanmaken?	Nee, direct downloaden

Bekijk nu zelf de website!

Unsplash

Unsplash publiceert iedere dag 10 nieuwe foto’s. Alle foto’s zijn direct gratis te downloaden. Het voordeel van Unsplash vind ik de eenvoudige interface, wanneer je bijvoorbeeld foto thumbnails aanklikt kun je direct door honderden professionele foto’s heen scrollen. De foto’s zijn vrij te gebruiken en worden zelfs in sommige betaalde Bootstrap thema’s gebruikt.

Kosten:	Gratis
Account aanmaken?	Nee, direct downloaden

Bekijk nu zelf de website!

Gratisography

Ook een uitstekende keuze als het aankomt op het gebruik van gratis kwalitatief scherpe foto’s. Het enige nadelige aan deze website vind ik dat de foto’s niet aansluiten bij de content van mijn websites. De foto’s zijn gratis te gebruik voor al jouw doeleinden en tevens weer direct te downloaden.

Kosten:	Gratis
Account aanmaken?	Nee, direct downloaden

Bekijk nu zelf de website!

Splitshire

De foto’s van Splitshire zijn vrij te gebruiken voor commercieel en particulier gebruik. De foto’s zijn gemaakt door webdesigner Daniel Nanescu. De foto’s zijn vrij te gebruiken in bijvoorbeeld e-books, landing pages, websites, software applicaties en advertenties. De foto’s zijn van uitstekende kwaliteit en zeer professioneel. Je mag de foto’s niet verkopen zoals ze nu zijn en je mag ook de foto’s niet delen op andere stock foto websites.

Kosten:	Gratis
Account aanmaken?	Nee, direct downloaden

Bekijk nu zelf de website!

Little Visuals

Het concept van Little Visuals werkt iets anders dan de overige stock foto websites. Bij Little Visuals kun je pakketjes van 7 hoge resolutie foto’s downloaden. In principe meld je jouw e-mailadres aan, hierna ontvang je iedere week 7 nieuwe foto’s. Het nadeel van dit concept is dat je geen idee hebt welke foto’s je ontvangt en je hierdoor 9 van de 10x geen interesse in de foto’s hebt.

Kosten:	Gratis
Account aanmaken?	Hoeft niet, kan aanmelden voor e-maillijst

Bekijk nu zelf de website!

Niels Vos

More Posts - Website - LinkedIn - Google Plus

Meet je website snelheid met deze tools!

De snelheid van je website wordt steeds belangrijker, niet alleen voor het gebruikersgemak maar de snelheid telt ook mee als factor voor de zoekmachine resultaten. Tevens is het belangrijk dat je website op alle apparaten snel is.

Welke factoren hebben een invloed op de snelheid van mijn website?

De webhoster
Je website kan op verschillende manieren langzaam worden. Gewoonlijk begint het bij je webhoster. Ik neem aan dat je gebruik maakt van shared webhosting. Doordat je gebruik maakt van shared webhosting kan het voorkomen dat je website langzaam wordt door overbelasting op een server. Een goed voorbeeld is bijvoorbeeld dat je ziet dat er honderden websites op een enkele server opgeslagen worden. Indien een enkele website hinder ondervind of veel verkeer krijgt dan kunnen jouw website prestaties ook afnemen.

Overmatig gebruik van grote afbeeldingen.
Achtergronden en het gebruik van grote afbeeldingen kan ervoor zorgen dat je website traag wordt. Probeer dus afbeeldingen te verkleinen of te vermijden en maak meer gebruik van code.

Aanroepen van overbodige bestanden en veel bestanden.
Hoe meer andere bestanden je aanroept via jedes te langzamer jouw website wordt, ook is netjes scripten de basis voor een snelle website. Je ziet soms mensen extra .css-bestanden aanmaken voor diverse apparaten. Toch is het aan te raden om deze code gewoon netjes te sorteren in een enkele .css-file.

Tools om de snelheid van je website te meten

Pingdom
Pingdom is een gratis en eenvoudige tool waarmee je direct een duidelijk inzicht krijgt van de laadsnelheid van jouw website. De tool geeft ook precies aan welke bestanden/foto’s lang aan het laden zijn. Zo kun je jouw website heel specifiek optimaliseren.

Let op! Voordat je op “Test Now” drukt is het belangrijk dat je de juiste locatie instelt waar je vandaan wilt testen. Aangezien je jouw website op het Nederlandse publiek richt vink je hier Amsterdam aan.

Google Page Speed Insights
Google Page Speed Insights is mijn favoriete analyse tool. Allerlei verschillende aspecten worden geanalyseerd. Google PageSpeed is gratis en geeft je ook nog eens de mogelijkheid om jouw website te optimaliseren voor de mobiel en voor een desktop.

De tool zet ook precies heel duidelijk alle punten voor jouw op een rijtje waar je aan moet werken of welke perfect geoptimaliseerd zijn.

Je kunt de tool via hier bereiken.

Niels Vos

More Posts - Website - LinkedIn - Google Plus

Top 5 WordPress Frameworks om je thema op te bouwen

WordPress wordt niet alleen steeds vaker gebruikt door particulieren, maar tevens door webbouwers. Een webbouwer die websites voor klanten realiseert met behulp van WordPress zal niet gauw kiezen voor een thema die volledig van de grond af aan opgebouwd is, waarom zou je het wiel opnieuw uitvinden? Een website maken was nog nooit zo makkelijk en het scheelt veel tijd indien ervoor een primary thema gekozen of een framework gekozen wordt, maar welk framework is geschikt voor jouw projecten?

1.WordPress Framework Bones

Bones wordt vaak gebruikt vanwege de simpliciteit in het aanpassen van de stylesheats. Een nadeel van dit thema is dat door de simpliciteit een aantal basisfactoren ook direct achterwege zijn gelaten. Zoals een duidelijke opbouw van de navigatie. Heb je zelf een standaard navigatie die je wil implementeren dan is het uiteraard wel weer een zeer geschikte keuze. Bones starter theme kun je hier downloaden.

2.CherryFramework

Het voordeel van het Framework van Cherry is de eenvoudige back-end die al volledig voor je gerealiseerd is waardoor je een uitstekend thema kunt bouwen inclusief een duidelijk interface in de back-end van je WordPress-website. Zo kan de klant eenvoudig zelf alle onderdelen binnen het thema aanpassen. Je kunt het CherryFramework hier downloaden.

3.Wonderflux framework voor WordPress

Wonderflux is een gratis framework die ontworpen is om extreem stabiele thema’s te bouwen. Geschikt voor iedere plug-in en tevens zeer eenvoudig responsive in te richten. Een echte aanrader voor het ontwerpen van betrouwbare thema’s. Zeer eenvoudig admin-systeem waar je gemakkelijk diverse instellingen kunt wijzigen. Download het Wonderflux framework nu hier.

4.Foundation Responive Framework WordPress

Foundation is toch wel een favoriet die ik vaak gebruik wanneer ik bijvoorbeeld erover nadenk om een slider te implementeren in het design. Foundation is gebaseerd op de Zurb’s Foundation en de HTML5 boilerplate. Zoals ik net al zei vind ik het heel eenvoudig en scheelt mij een hoop tijd omdat de slider mogelijkheid al in het thema zit ingebakken. Je kunt gemakkelijk je slider aanpassen via de back-end van WordPress. Download nu het framework van Foundation hier.

5. Zurb Foundation for WordPress

Natuurlijk mocht het reponsive framework van Zurb Foundation niet ontbreken. Met zekerheid durf ik te zeggen dat wanneer je op zoek bent naar kwaliteit dat je rustig voor Zurb kunt kiezen. De website beschikt over de meest uitgebreide handleidingen en documentatie waar je als webbouwer van kunt dromen. Extreem veel andere frameworks zijn afgeleid van dit framework, dat zegt al genoeg! Download het Zurb framework hier.

Natuurlijk zijn er honderden verschillende thema’s en frameworks die je kunt gebruiken als basis voor je websites. Je kunt er tevens voor kiezen om een eigen webdesign te realiseren en deze te basen in de stijl van een framework. Veel succes met het ontwikkelen van jouw responsive websites!

Niels Vos

More Posts - Website - LinkedIn - Google Plus

Handleiding: WooCommerce producten toevoegen.

Het toevoegen van producten is binnen WooCommerce vrij eenvoudig, je moet alleen even alle onderdelen weten die je in moet vullen. Zoals in het eerste deel van de WooCommerce handleiding al is verteld, zorg dat je een structuur hebt in je producten. Ga dus niet zomaar even producten toevoegen maar zorg voor een overzichtelijke opbouw met duidelijke codes waar je naar kunt refereren.

Als voorbeeld voor een webshop met T-shirts:

Merken:
G-star (refcode: 0001)

Model:
Model A (refcode: 0001-A)

Kleuren aanwezig:
Geel (refcode: 0001-A-G)

Maten aanwezig:
S, (refcode: 0001-A-G-S)
M, (refcode: 0001-A-G-M)
L (refcode: 0001-A-G-L)

Blauw (refcode:0001-A-B)

Maten aanwezig:
S, (refcode: 0001-A-B-S)
M (refcode: 0001-A-B-M)

Rood (refcode:0001-A-R)

Maten aanwezig:
M, (refcode: 0001-A-R-M)
L, (refcode: 0001-A-R-L)
XL (refcode: 0001-A-R-XL)

Model:
Model B

etc

Wanneer je begrijpbare refcodes gebruikt kun je direct het juiste product selecteren binnen je assortiment. Dit werkt zeer prettig en scheelt je een hoop zoekwerk.

Wanneer je eenmaal denkt dat je de volledige structuur van je winkel op orde hebt kun je beginnen met het toevoegen van producten.

Het aanmaken van een categorie binnen WordPress.

Voordat je kunt beginnen met het aanmaken en toevoegen van producten moet je de productencategorieën aanmaken. Omdat ik in mijn voorbeeld gebruik maak van kleding begin ik met het aanmaken van drie categorieën, namelijk: broeken, T-shirts en truien.

In het linkermenu kies je voor: Producten > Categorieën. (Zie onderstaande screenshot)

Hierna kun je aan de linkerkant je categorieën aanmaken. (Zie onderstaande screenshot)

Alle aangemaakte categorieën zie je terug aan de rechterkant, voor mijn webshop ziet het er dus als volgt uit:

Het toevoegen van een product aan een categorie binnen WooCommerce.

Je kunt nu beginnen met het toevoegen van een product binnen een categorie. Voordat je producten gaat toevoegen moet je begrijpen dat er twee soorten producten zijn. Normale producten en variabele producten. Een variabel product is een product met verschillende maten/kleuren. In deze handleiding laat ik alleen zien hoe je een normaal product toevoegt. Wil je weten hoe je een variabel product aanmaakt bekijk dan deze handleiding.

Klik in het linkermenu op Producten > Product toevoegen. (zie onderstaande screenshot)

Allereerst moet je een productnaam opgeven en een productomschrijving. (zie onderstaande screenshot)

Hierna moet je de specifieke productgegevens opgeven. Allereerst is het belangrijk dat je het productgegevens op “Simpel product” zet. (Zie onderstaande screenshot)

Je ziet verschillende tabbladen. Het tabblad algemeen is vrij eenvoudig, je vult de prijs en het SKU-nummer (referentienummer) in.

Hierna kun je met het tabblad “Voorraad” instellen hoeveel producten je op voorraad hebt liggen. De overige tabbladen komen later van pas, maar zijn nog niet noodzakelijk om een product aan te maken.

Aan de rechterkant kun je een productafbeelding toevoegen.

Tevens kun je aan de rechterkant de categorie selecteren waar het product in terecht moet komen. (zie onderstaande screenshot)

Niels Vos

More Posts - Website - LinkedIn - Google Plus

Handleiding: WooCommerce installeren voor WordPress.

Steeds vaker krijg ik de vraag van ondernemers of je met een bestaande WordPress-website een webshop op kunt zetten. WooCommerce is mijn absolute favoriet als het gaat om vindbaarheid en het uitbouwen van een bestaande bedrijfspagina. Gewoon makkelijk een webshop implementeren in je succesvolle website.

Webshops rijzen als paddenstoelen uit de grond, maar verdwijnen ook weer als sneeuw voor de zon. Ondernemers hebben ambitie en willen zo snel mogelijk een webshop opstarten zonder ook maar na te denken over de concurrentie, strategie en structuur. Zonder een plan staat je webshop op losse schroeven. Zorg daarom voordat je begint met de realisatie van je webshop voor een stabiel ondernemersplan, een indeling/structuur van je inventaris met een degelijk referentiestructuur en vooraf moet je een marketingplan klaar hebben liggen hoe je jouw producten gaat promoten.

Heb je alles op orde? Dan wordt het tijd voor de installatie van een website. De basis van een WooCommerce installatie is WordPress. Wanneer je nog geen WordPress-website hebt geinstalleerd dan kun je deze WordPress handleiding gebruiken om jouw website te installeren en in te richten.

WooCommerce downloaden en installeren

WooCommerce is een winkelplug-in voor WordPress. Je kunt de plug-in downloaden via de back-end van je WordPress omgeving. Log in op je WordPress-website en kies in het linkermenu voor “Plug-ins ”. WooCommerce installeer je precies zoals ieder andere plug-in.

Hierna zoek je rechtsbovenin op “WooCommerce”:

Daarna zie je de WooCommerce plug-in en kun je deze eenvoudig met twee klikken downloaden en installeren.

Niels Vos

More Posts - Website - LinkedIn - Google Plus

Hoe maak je een Responsive Website?

Het wordt tegenwoordig steeds belangrijker dat je als ontwikkelaar / webmaster verstand hebt van responsive websites. Er komen steeds meer apparaten op de markt in verschillende formaten en diverse resoluties, je website moet op alle apparaten goed getoond worden.

Wat is een responsive website?

Een responsive website is een website die schaalt op verschillende apparaten. Je hebt overigens verschillende frameworks klaarliggen waarmee zodat je website over een correcte fundering beschikt, waaronder Twitter Bootstrap, Foundation etc.. Toch wil ik aan de hand van deze tutorial laten zien hoe eenvoudig het is om zelf een responsive website te maken helemaal vanaf het begin.

Natuurlijk zijn er diverse formaten, in dit voorbeeld laat ik je zien hoe je jouw website schaalt naar een resolutie van 320 pixels. Er zijn twee bestanden van belang, mijn standaard “index.html” en mijn “style.css”. Meer heb ik niet nodig om de website responsive te maken. Je hoeft niet gebruik te maken van verschillende .css-bestanden, je kunt alles netjes verwerken in een enkel css-bestand.

Hoe maak ik een responsive website voor mobiele apparaten?

Open je kladblok en neem onderstaande code over:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive website</title> <link href="styles.css" rel="stylesheet"> <body> <div id="wrapper"> <header id="header"> <h1>Website titel</h1> <nav id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Pagina #1</a></li> <li><a href="#">Pagina #2</a></li> </ul> </nav> <select id="small-nav"> <option>Navigatie</option> <option><li><a href="#">Home</a></li></option> <option><li><a href="#">Pagina #1</a></li></option> <option><li><a href="#">Pagina #2</a></li></option> </select> </header> <section id="content"> <p>Belangrijke content</p> </section> <aside id="sidebar"> <p>Sidebar widget</p> </aside> <footer id="footer"> <p>Footer tekst</p> </footer> </div> </body> </html>

Bovenstaande onderdelen mogen niet vreemd voorkomen voor een standaard webdesigner, indien het wel allemaal vreemd en nieuw is dan is het belangrijk dat je de basis van HTML leert.

Het enige wat je misschien vreemd vindt is de volgende regel:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Deze regel is essentieel voor een mobiele website! Het geeft aan dat de website naar de breedte van het apparaat moet schalen. Tevens worden vaak de waardes 1 of 1.5 voor de initial-scale gebruikt. De waarde 1 kan prima gebruikt worden voor apparaten tot 200 DPI. 1.5 wordt vaak gebruikt voor apparaten met meerdere punten per pixel. Om duidelijk aan te geven wat het precies betekent. Stel je hebt je website met bovenstaande viewport en je bekijkt de website op een telefoon met 200 DPI dan zal deze perfect getoond worden. Indien je de website bekijkt op een apparaat op een 300 DPI apparaat zullen de afbeeldingen op de website samentrekken en kleiner worden dan de 100% van je scherm. Het is gebruikelijk om een initial-scale van 1 in te stellen.

Het tweede vreemde aan bovenstaande code is de dubbele implementatie van het menu. Een normaal menu en een small-menu. De small-menu gaan we op de ‘grote’ website verbergen en tevoorschijn laten komen op de mobiele website en het ‘grote’ menu gaan we verbergen op de mobiele website en tevoorschijn laten komen op de schermen groter dan 320 pixels.
Onderstaande style.css moet je nu aanmaken:

body { margin:0; font-size:13px; color:#FFFFFF; } #wrapper { width:980px; margin:0 auto; } #header { width:980px; background-color:#003300; } #header h1 { padding:20px; margin:0; } #navigation { background-color:#009900; font-size:14px; } #navigation ul { margin:0; padding:0; list-style:none; } #navigation ul li { display:inline; padding:15px 15px; } #navigation ul li a { text-decoration:none; text-align:center; padding:10px; font-weight:bold; color:#FFFFFF; } #navigation ul li a:hover { text-decoration:underline; color:#ff0000; } #small-nav { display: none; } #content { width:600px; float:left; background-color:#99FF00; padding:10px; margin:10px 0; min-height:300px; } #sidebar { width:325px; float:right; background-color:#99FF00; padding:10px; margin:10px 0; min-height:300px; } #footer { clear:both; width:960px; background-color:#003300; padding:10px; text-align:center; } /* Responsive Styling */ @media only screen and (max-width : 320px) { #wrapper { width: 100%; margin: 0; } #header { width: 96%; } #navigation { display: none; } #small-nav { display: block; } #content { width: 90%; float: none; } #sidebar { width: 90%; float: none; } #footer { width: 90%; } }

Niels Vos

More Posts - Website - LinkedIn - Google Plus