Categorieën: Beter Bloggen / Tags: ,

Geschreven door Jessica

Beter Bloggen | Lay-out

Beter Bloggen Challenge

Vorige maand begon ik met de grote schoonmaak achter de schermen, deze maand is de voorkant aan de beurt. Ik ben stiekem al een aantal weken aan het klussen aan de lay-out van Reviews & Roses en wilde deze graag vandaag introduceren omdat het zo goed past bij het thema van de Beter Bloggen Challenge deze maand: Lay-out. De Beter Bloggen Challenge is bedacht door Joany van Craving Pages.

Beter Bloggen Challenge Planning

Dit is wat Craving Pages onder de challenge van deze maand verstaat: “Als de back-end van je blog eenmaal op orde is is het tijd om de voorkant aan kant te maken. Gedurende april zorgen we ervoor dat je site er tip top uit ziet. Geen dode links, geen afbeeldingen die niet worden geladen, geen onnodige add ons in de side-bar.” Gezien lay-out voor mij meer betekent dan slechts dode links, afbeeldingen en de side-bar, ga ik jullie vandaag álles vertellen over mijn ervaringen met de lay-out – het visuele uiterlijk – van een blog.

Een thema

Ik heb al eerder geschreven over het veranderen van thema. Bij de geboorte van Reviews & Roses gebruikte ik een gratis thema van WordPress. Ik kon er echter niet mee bereiken wat ik ermee wilde bereiken; ik wilde meer invloed op het uiterlijk van mijn blog. Het liefst zou ik de lay-out zelf ontwerpen, maar daar ben ik niet zo handig in. Ik heb het zelfs voor elkaar gekregen de website helemaal offline te gooien doordat ik aan het prutsen was. Ik ontdekte Creative Whim – waar ik ook de Ultime Book Blogger plugin kocht – en kocht daar het Tweak Me theme. Werkelijk zoveel mogelijkheden! Je investeert in een thema waarmee je de lay-out helemaal je eigen kunt maken. Sinds vandaag ben ik officieel over naar Tweak Me v2; de nieuwe variant waarmee je zelfs nóg meer mogelijkheden hebt. En daar houd ik van.

Daarnaast ben ik ook heel erg te spreken over de service van Creative Whim. Ik heb namelijk inmiddels twee keer een “probleem” gehad en ik kreeg binnen een dag – de tweede keer zelfs binnen een kwartier –  reactie terug op de ticket die ik ingediend had. De eerste vraag ging over plaatjes op de site. Mijn plaatjes vervormden namelijk bij het verkleinen van het scherm. Ze gaf mij een CSS code die ik in het Custom CSS deel van het door haar ontworpen thema kon plakken en hoppa; mijn plaatjes vervormden niet meer!

De tweede vraag ging over dit nieuwe thema: Tweak Me v2. Op de één of andere manier was de inhoud van de blog niet zichtbaar. Uiteindelijk bleek er een een code in de Gabfire widget te zitten die niet erg logisch was en dat ervoor zorgde dat alles –  titels, plaatjes et cetera – slechts 1 pixel groot waren. Tsjah, dan zie je niet zoveel inderdaad. Ze gaf me een CSS code en wederom werkte alles prima! Echt top service! Natuurlijk is Creative Whim niet de enige die thema’s aanbied, je kunt ze bijvoorbeeld ook vinden op Etsy, maar gezien ik daar geen ervaringen mee heb raad ik Creative Whim ten zeerste aan.

P.s. Tweak Me is een responsive thema en Tweak Me v2 scoort zelfs nog hoger wat betreft responsiveness. Waarom een mobielvriendelijke thema belangrijk is lees je op Blogaholic.

Header

De header is in feite het allereerste dat je lezers zullen zien op je blog, het is voor mij het eerste dat opvalt en een eerste indruk van de blog geeft. Voor mij representeert het waar je blog en/of jij voor staat. Ikzelf heb ervoor gekozen een logo voor mijn website te ontwerpen. Ik wilde geen schreeuwerig logo, want ikzelf ben geen schreeuwerig type. Maar ik ben wel perfectionistisch, dus een strak logo, met een zacht randje paste helemaal bij mij. Ik besloot voor simpele rondjes te gaan en deze met pastelkleuren in te kleuren. – Leuk feitje: ik heb mijn logo ontworpen met het gratis internetprogramma PicMonkey

Ik heb overwogen om mijn header aan te passen omdat ik graag wilde dat het meer bij de naam paste, met name bij het Roses gedeelte. Ik had een hele mooie foto gemaakt van rozen en daar een header van gemaakt, maar toen ik via social media probeerde te peilen wat jullie ervan vonden kreeg ik onverwacht een heel gemixt antwoord. Ik had namelijk verwacht dat iedereen moeiteloos voor de rozen zou gaan, maar velen gingen ook voor het origineel: de simpele rondjes. Dat verbaasde mij. Redenen voor waarom ik bij het oude moest blijven waren bijvoorbeeld: “Ik zou het origineel doen, veel origineler.” of “Ik vind het origineel origineler, mooier en er gelikter uit zien. Oogt professioneler. Ook lijdt hij meer de aandacht naar je naam.”

Dus begon ik te twijfelen over of ik de header wel drastisch zou gaan veranderen. Wat ik wel zeker wist is dat ik de header zoals hij op dat moment was niet mooi vond. Na het kopen van de nieuwe lay-out ben ik wat aan het prutsen geweest en heb ik de bollen als achtergrond toegevoegd en de blognaam – met daarbij het &-teken wel aangepast omdat ik het oude &-teken toch niet zo mooi vond – als header toegevoegd waardoor de tekst wel verkleint bij een kleiner beeldscherm, maar de bollen niet, waardoor het logo niet enorm krimpt. Ikzelf vind het er nu veel mooier en strakker uit zien. Of ik ooit toch nog wel iets met roosjes ga doen weet ik nu nog niet. Als ik een geniaal idee krijg om het erin te verwerken, misschien wel! Sowieso zit ik er nog over te denken de blog een ondertitel te geven waarmee ik nieuwe lezers direct een korte omschrijving geef van wat ze kunnen verwachten – natuurlijk kort en krachtig! -, maar ik heb nog geen leuke bedacht.

Menu

Het menu vind ik erg belangrijk. Je wilt niet dat het te vol staat en rommelig oogt, maar je lezers moeten hun weg wel kunnen vinden op je blog. Ik ben dan ook lang aan het prutsen geweest. Bij mijn nieuwe thema kon ik eindelijk doen wat ik wilde. Een hoofdmenu en helemaal bovenin nog een wat kleiner menu met items die ik wel graag wil showen, maar ik niet perse in mijn hoofdmenu hoef.

Ook heb ik meerdere hoofdcategorieën weggehaald en van de drie subcategorieën onder de categorie Recensies hoofdcategorieën gemaakt. Ik had namelijk een categorie recensies waaronder zowel boeken, films als tv-series vielen en daarnaast nog diverse andere categorieën die eigenlijk ook onder boeken, films of tv-series hoorden. Dit deed mij beseffen dat ik boeken, films en tv-series als hoofdcategorieën zou moeten nemen en die opnemen in mijn menu. – Ik ben nog een deel aan het overzetten, maar ik probeer jullie hier zo min mogelijk van te laten merken –

Belangrijke items die danwel in je hoofdmenu, het menu bovenin, sidebar of footer zou moeten staan zijn: een over mij pagina, een contactpagina en een dropdown menu met je categorieën. In je hoofdmenu is het sowieso handig om de belangrijkste categorieën op te nemen zodat je lezers makkelijk door kunnen klikken. Verder zou ik je menu opvallend, maar niet overheersend qua kleur en lettertype maken.

Content kolom

Heel belangrijk is natuurlijk het deel waarin mensen je blog lezen: de content kolom. Wat ik belangrijk vind is leesbaarheid. Persoonlijk vind ik het het fijnst als tekst op een evenredige manier onderbroken wordt met plaatjes – over de hele breedte van de kolom – zoals ik in de meeste (behalve deze dus) van mijn blogposts ook doe (ik richt mijn blog in op de manier die ikzelf als lezer prettig zou vinden), maar lange teksten kunnen ook leesbaar zijn zonder foto’s!

Belangrijke elementen zijn voor mij de kleur van de achtergrond, het lettertype en de lettergrootte. Een witte achtergrond vind ik al gauw te fel aan de ogen, dat in combinatie met kleine, dicht op elkaar staande letters zorgt ervoor dat ik sneller af zal haken dan wanneer je achtergrond licht gekleurd is – felrood heeft overigens eenzelfde soort effect als spierwit, dus houd het licht is mijn advies – het lettertype prettig oogt en de lettergrootte groot genoeg is om makkelijk te lezen. Het hoeft natuurlijk ook weer niet zo groot dat je oma het van een kilometerafstand kan lezen, maar je snapt wel wat ik bedoel toch? De grootte zoals ikzelf heb vind ik persoonlijk een fijne grootte en een fijn lettertype.

Wat ik verder nog fijn vind om te zien bij een blogpost zijn:

  • Een duidelijke titel
  • Subtitels die duidelijk maken waar de inhoud op ingaat
  • Een deel om reacties achter te laten, het liefst op een zo makkelijk ogelijke manier (dus niet dat je ergens moet inloggen of voor moet aanmelden, the horror!). Ikzelf heb het reactiegedeelte ook aangepast op Reviews & Roses. Ik werk niet meer met roze en blauw, maar met de grijstinten die ik ook op de rest van de website gebruik en vind het er nu veel strakker uitzien.
  • Share buttons (laatst las ik bijvoorbeeld een artikel dat ik wilde delen, maar nergens was een deelknop te bekennen. Een gemiste kans)
  • Gerelateerde items (welke blogposts zijn nog meer interessant om te lezen op basis van het artikel dat je net hebt gelezen? Regelmatig bezoek ik bijvoorbeeld Craving Pages en door de gerelateerde items bleef ik maar doorklikken naar leuke blogposts die ik gemist had doordat ik haar blog pas in september 2014 leerde kennen)
  • Datum waarop de blogpost is geplaatst (sommigen vinden het misschien niet belangrijk, maar ik vind het fijn om te kunnen zien of het een recent of een al wat ouder artikel is).

Sidebar

De sidebar is een stukje dat ikzelf ook nog steeds lastig vind. Er is zoveel dat mogelijk ook interessant is op Reviews & Roses en waar ik de lezer op wil wijzen. Maar eerlijk is eerlijk; ikzelf vind het ook fijner om op een blog te komen met een rustige sidebar. Vooral belangrijk in de sidebar – maar als je het in de menubalk kwijt kunt kan het daar ook prima in! Zolang het er maar is – vind ik een zoekfunctie. Er zijn genoeg blogs waar ik iets wilde zoeken en dat die functie er niet was! Ook vind ik linkjes naar social media en vooral ook je bloglovin’ account belangrijk want op die manier kan ik je blijven volgen. Probeer de juiste balans te vinden tussen ‘overvol’ en ‘te leeg waardoor niemand meer wat kan vinden op je blog’.

Zelf vind ik het overigens ook altijd wel leuk om te zien wat de meest populaire posts van de dag/week/maand zijn. Ook heb ik voor deze challenge speciaal een Beter Bloggen Challenge banner ontworpen en in de sidebar geplaatst omdat dat op dit moment zeven maanden lang een grote rol speelt op Reviews & Roses. Als je op de banner klikt kom je bij alle blogposts uit die ik heb geschreven voor de Beter Bloggen Challenge. – Ik zag trouwens dat sommigen deze banner hebben overgenomen in hun beter bloggen blogposts. Geen probleem, maar ik zou het wel leuk vinden als jullie bij gebruik verwijzen naar Reviews & Roses. –

Blogaholic schreef trouwens een interessant artikel over wat wel of juist niet in je sidebar te stoppen. – Blogaholic noem ik overigens vaker in mijn blogposts met blogtips, want zij heeft simpelweg gewoon heel veel goede tips! –

Footer

Ook de footer vond ik lastig te vullen. Ik wilde daar zoveel kwijt, maar ook hier geldt less is more. Ik ben nog niet tevreden met de footer die ik nu heb, maar het is beter dan hij wel eens is geweest. Affiliate links heb ik weggehaald en voeg ik toe aan een disclaimer pagina die binnenkort online gaat. Vervolgens zal ik de link naar de disclaimer pagina in de footer of in de bovenste menubalk plaatsen zodat hij wel direct vindbaar is. Over het algemeen leest bijna niemand de disclaimer, maar het wel belangrijk deze te hebben. Verder staat over het algemeen bij elk thema al wel direct een copyright teken met jaartal en je sitenaam in de footer, net als de naam van de ontwerper.

Lettertype

Bij sommige thema’s is het lettertype voorgedefinieerd, maar bij het thema dat ik gebruik heb ik keuze uit heel veel verschillende lettertypes die ik per onderdeel kan instellen. Zo zouden mijn menu’s, titels in de sidebar, titels van de blogposts, de inhoud van de blogpost en zelf ieder tussenkopje een ander lettertype kunnen hebben.

Ikzelf gebruik de lettertypes Georgia (koppen, buttons en hoofdmenu) en Verdana (body en bovenste kleine menu) en zou niet meer dan drie verschillende lettertypen op mijn blog willen gebruiken. Een eventueel derde lettertype zou ik kiezen voor in het menu of de koppen in de sidebar, maar gezien ik deze twee lettertypen daar ook mooi voor vond heb ik het bij twee gehouden. Ook raad ik aan een “normaal” lettertype te kiezen voor je blogcontent. Hiermee bedoel ik geen felblauwe rare letters met krullen en dergelijke. Ikzelf klik in elk geval meestal direct weg als ik erachter kom dat een hele blogpost op die manier getypt is. Het ziet er misschien mooi uit, maar het leest absoluut niet prettig.

Dode links

Dan als laatste toch nog even ingaand op dode links op je website. Soms komt het wel eens voor dat een website stopt te bestaan of door niet goed gebruik te maken van redirection – waar ik het tijdens de Grote Schoonmaak over had – niet meer linken naar het artikel. Jouw lezer klikt dan op die link en komt vervolgens op een 404 pagina uit waar hij of zij meegedeeld wordt dat het artikel niet bestaat. Erg jammer vind ik zoiets. Dit kan echter andersom ook voorkomen; dat een andere site naar jou linkt en dat bij jou de link is veranderd waardoor hij of zij op een 404 pagina uitkomt!

Als jijzelf naar een andere site verwijst

Hiervoor kun je heel makkelijk gebruik maken van de Broken Link Checker plugin. Deze gaat voor jou op zoek naar linkjes die het niet meer doen of bijvoorbeeld naar Youtube filmpjes die je niet meer af kunt spelen of die verwijderd zijn. Zo linkte ik bij mijn Top Ten Thursday artikelen nog wel eens naar De Lady Library. Helaas zijn zij gestopt en is de website offline gehaald. De Broken Link Checker plugin detecteerde dit en vertelde mij dat die linkjes niet meer werkten en mijn lezers naar een lege pagina gestuurd werden. Vervolgens kon ik zelf kiezen wat ik met die linkjes wilde doen. Als je wilt dat de Broken Link Checker plugin ook Youtube filmpjes meeneemt moet je dit in een apart tabblad bij de instellingen van de plugin nog even aanvinken.

Als een andere site naar jou verwijst

Het kan ook voorkomen dat je blogposts of pagina’s hebt aangepast of verwijderd waardoor de URL is veranderd, voordat je wist van het bestaan van de Redirection plugin. Of je bent per ongeluk toch één URL vergeten te redirecten. Daarvoor heb je de Google Webmaster Tool die ik dankzij Blogaholic heb leren kennen. Ik keek naar mijn crawl errors en kwam erachter dat ik een aantal dingen had aangepast waardoor de URL veranderd was en bezoekers niet meer bij het artikel terechtkwamen. Elke URL naar jouw website waarbij een error pagina naar voren komt staat tussen de crawl errors. Je kunt voor die URL’s dan via de Redirection plugin makkelijk ervoor zorgen dat als mensen op die link klikken ze toch op de juist pagina terecht komen.

Concrete tips

En dan dat hele lange bovenstaande verhaal kort samengevat in een aantal concrete blogtips. Lees snel verder!

  • Kies voor een lay-out die bij je past. Ikzelf heb één gekocht (Tweak Me v2) omdat ik daardoor meer mogelijkheden had om het mij eigen te maken. Ik raad op dit gebied Creative Whim aan. Iets prijziger dan de meeste thema’s op Etsy, maar je kunt dan wel echt alles aanpassen dat je wilt én, je krijg ook nog een topservice!
  • Zorg voor een responsive (mobielvriendelijke) website. Dit is niet alleen belangrijk sinds 21 april 2015 doordat je dan hoger in de ranking van Google komt te staan, maar ook omdat de website mee vormt met het beeldscherm waarop het gelezen wordt. Nooit meer heen en weer scrollen om een alinea te lezen, joehoe!
  • De header valt mij vaak als eerst op bij een website/blog; het is de eerste indruk. Make it a good one! Voor mij representeert  het waar jij en of je blog voor staat. Je kunt al een fantastische header maken met het gratis internetprogramma Picmonkey.
  • Zorg dat je menu niet te vol staat en dat de lezer zijn weg kan vinden op je blog met de knoppen die je zorgvuldig uit hebt gekozen.
  • De content kolom is een deel waar je lezer onbewust het langst zijn of haar blik richt. Het is namelijk het deel waar de tekst van je blogposts geschreven staat. Zorg ervoor dat het er mooi en bovenal leesbaar uit ziet. Ikzelf raad aan een lichte kleur als achtergrond te nemen omdat dat je ogen meer rust geeft tijdens het lezen. Daarnaast zijn een duidelijke titel, subtitels, share buttons, gerelateerde items en de datum van plaatsing voor mij belangrijke elementen in de content kolom.
  • Less is more geldt zowel voor de sidebar als de footer van je blog. Kies zorgvuldig uit wat je erin plaatst, want een te drukke sidebar en footer kunnen afleiden of je blog rommelig laten ogen. Dingen die ik belangrijk en/of leuk zou vinden om te zien in de sidebar zijn een zoekfunctie, linkjes naar social media en bloglovin, maar ook populaire posts of een item dat momenteel een grote rol speelt op jouw blog. Voor affiliate links en dergelijke zou ik aanraden een disclaimer pagina te maken en daarnaar te verwijzen in je footer.
  • Kies een lettertype op je blog dat prettig leest. Felblauwe elfachtige letters zien er misschien mooi uit, maar het is niet prettig om een hele tekst op die manier te moeten lezen.
  • Wil je af van die dode links? Controleer met de Broken Link Checker plugin welke links het op jouw website niet meer doen en verwijder ze of pas ze aan. Via de Google Webmaster Tool kun je via de crawl errors ontdekken welke links naar jouw website het niet meer doen.

Mijn nieuwe lay-out staat nu online, maar ik ben nog wel bezig wat laatste dingetjes te verbeteren en aan te passen, dus daar zal ik de rest van april mee bezig zijn. Ook hoor ik heel graag van jullie welke verbeteringen jullie goed of juist minder goed gelukt vinden zodat het een blijvend verbeterproces wordt.

Wat is jouw ultieme lay-out tip?

Deze post is al 2287 keer gelezen


Geef een reactie

19 responses to “Beter Bloggen | Lay-out

  1. Oops! Volgens mij heb ik helemaal geen tips in mijn blogpost verwerkt. Toch alleszins niet in een handig en overzichtelijk lijstje. Mijn lay-out vond ik ergens gratis en pastte perfect bij mijn naam. Gelukkig kan mijn echtgenoot goed met al die verschillende codes overweg en kon hij de lay-out verwerken tot hij geschikt was voor wat ik er mee wilde doen.

    De Broken Link Checker leek me super handig, maar hij heeft twee maal de server doen crashen en is ondertussen weer uitgeschakeld. Ik hoop dat er iets aan te doen valt want die plugin is echt ideaal en zou me veel tijd besparen.

    PicMonkey gebruik ik zelf ontzettend vaak. Voor collage’s maar ook voor afbeeldingen die ik in blogposts wil gebruiken.

    • Er zijn meer die er geen tips in verwerken hoor. 😉 Ik vind het leuk dat iedereen zijn eigen draai geeft aan deze challenge zodat het leuk blijft om bij iedereen de verschillende blogposts te lezen.

      Handig zo’n echtgenoot die overweg kan met verschillende codes, maar wat vervelend dat de Broken Link Checker bij jou niet optimaal werkt. Ik heb er nog geen problemen mee gehad.

      PicMonkey is echt ideaal! Ik bewerk al mijn foto’s voor Reviews & Roses ermee.

  2. Wow, wat een concrete post! Ik doe ook mee aan Beter Bloggen maar mijn post gaat er toch echt anders uit zien. Ook wel logisch aangezien ik geen gebruik kan maken van plugins. Maar goed geschreven!

    • Dankjewel! 😀
      En dat is ook het leuke aan deze challenge; iedereen vult het op een andere manier in waardoor je niet 30 dezelfde blogposts krijgt 😀

  3. Erg fijn om jouw ervaringen te lezen! Die tips en tricks zijn ook wel heel handig :3 Ik had zelf een layout op Etsy gekocht en in de code kan ik gewoon de plaatjes en tekst(kleur) veranderen en zo dus dat is wel handig ^^

  4. Goed stuk! Zelf heb ik hetzelfde thema en het is super leuk om te zien dat iedereen het toch anders vult! Zelf heb ik weer kriebels om mijn vormgeving aan te passen, maar dat mag pas als school klaar is! 😀

    • Dankjewel ^^
      Ja, ik vind het echt mooi dat je met één thema zoveel diverse websites kunt maken. Daarom zweer ik ook echt bij het Tweak Me (v2) theme 😀
      Succes met school!

  5. Je bent lekker bezig zo! Ik heb helaas iets minder tijd hiervoor. Ik ging laatst mijn ‘gewone’ site eens updaten, maar blijkt dat er ergens een fout in de code zit, waardoor de helft niet meer werkt, binnenkort maar weer helemaal wat anders dan!
    Ik ben in ieder geval wel heel erg fan van de Broken Link Checker!
    Alleen zag ik dat hij ook nog heel erg terug gaat in de revisies. Wellicht moet ik eens opzoeken hoe ik die makkelijk kan verwijderen 🙂

    • Haha, al mijn vrije minuten zijn hier dan ook in gaan zitten haha.
      Jammer dat er een fout in je code zit! Revisies kun je inderdaad verwijderen. Ik heb een plugin geïnstalleerd daarvoor, maar heb die nog niet geactiveerd en getest, dus weet nog niet of het goed werkt. De plugin heet: WP-Optimize, misschien heb je er wat aan 😀