WordPress theme ombouwen naar mobiele – responsive versie

 Google heeft ons weer een bang gemaakt met de melding dat websites die vanaf 21 april niet toegankelijk zijn gemaakt voor mobiele apparaten (smartphones, tablets), zullen zakken in de zoekresultaten. Nu heb ik een aantal klanten die heel verstandig hebben geinvesteerd in de vindbaarheid van hun website en veel aandacht hebben gegeven aan zoekwoorden optimalisatie en het zou natuurlijk jammer zijn als die investering voor niets zou zijn geweest. Nu denk ik dat het mogelijk meevalt omdat een positie altijd bepaald wordt door wat de concurrent doet. Dus mijn klant uit Ede (autotransmission) die zijn website optimaliseert voor “revisie versnellingsbak” gaat natuurlijk alleen dalen als de concurrenten ook meegaan in de trend en hun site mobiel toegankelijk of responsive hebben gemaakt. Maar natuurlijk gaat dewebmeester de uitdaging aan om eventueel alle websites van alle klanten om te bouwen naar een responsive versie. Hier aandacht voor het ombouwen van een WordPress theme. Een checklist: Deze lijst zal ik verder uitwerken. Mijn tarief voor het ombouwen van een WordPress theme naar een responsive theme is 4 uur. Dat betekent voor klanten van

Verder lezen

Twitter bootstrap, css en structuur

Vandaag een korte introductie betreffende het gebruik van Twitter bootstrap. Om te starten heb je de bootstrap files nodig die eenvoudig zijn te downloaden via deze link. Vervolgens worden de files in de root van de website geplaatst en wordt er een verwijzing naar die files geplaatst in de head-sectie van de website. Wat betreft structuur gebruiken we (bijvoorbeeld) de volgende html: <div id=’content’ class=’row-fluid’> <div class=’span9 main’> <h2>Main Content Section</h2> </div> <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> </div> Deze code geeft aan dat de main content 9 kolommen breed is en door de main content op te delen in kolommen, kunnen we ook een sidebar plaatsen. Dat is gedaan via de <div class=’span3 sidebar’> <h2>Sidebar</h2> </div> code. Dit alles betekent: van de 9 kolommen zijn er 3 een sidebar. Kortom 1/3 deel is sidebar. Bij gebruik van de code is het belangrijk om op te merken dat de sidebar code in zijn geheel na de main-content code komt en dus niet is opgenomen in de main-content. De sidebar maakt geen onderdeel uit van de main-content structuur maar staat er dus

Verder lezen

Testen website voor wide screen en aanpassen achtergrond afbeelding

Bij het maken van een website moet de website getest worden in meerdere browsers maar ook binnen meerdere schermresoluties. Nu heeft de ontwikkelaar niet altijd de beschikking over een rij computers of monitoren en dat is natuurlijk ook geen makkelijk optie. Wat betreft het testen binnen verschillende monitoren zijn de volgende mogelijkheden beschikbaar: Firefox addon “Firesizer”: Niet handig omdat de computer monitor een limiet heeft (bijvoorbeeld 1280px) en testen in widescreen daarmee onmogelijk is. De webdeveloper extensie “resize” van Firefox: zelfde probleem als onder 1 De Ctrl + en Ctrl – knoppen: simpele en meest effectieve optie wat mij betreft. Zo vergroot ik de monitor weergave niet maar verklein ik de website weergave en daardoor krijg ik de website toch te zien zoals hij op een wide screen getoond wordt. Vervolgens kan ik de grootte van de background image aanpassen en testen. Natuurlijk wil ik een dynamische grootte. Oftewel: grootte wordt gepaald door de monitor waarmee de bezoeker de website bezoekt. Achtergrond afbeelding moet getoond worden over hele scherm. Of dit scherm nu 800px x 600px of 2400px breed is.

Verder lezen

Aanpassen layout Joomla module

Het aanpassen van de layout van een Joomla module lijkt een eenvoudige zaak met Firebug. Maar bij aanpassen van de css file behorende bij de module, is de kans groot dat ook de layout van andere modules aangepast worden terwijl dat mogelijk niet te bedoeling is. Dat is zeker het geval als de css verwijzingen verstopt zitten in bijvoorbeeld een style.css file of template.css file. Als de module een eigen css file heeft, dan is het inderdaad niet moeilijk om de layout aan te passen. De makkelijkste manier Het makkelijkste lijkt mij op dit moment om in “advanced options” binnen modulebeheer (binnen Joomla administrator) de “Module Class Suffix” aan te passen. Dat gaat als volgt: Ga naar modulebeheer in Joomla en open de module waarvoor de layout aangepast moet worden. Open de stylesheet waarnaar deze module verwijst (via Filezilla en Notepad+) Kijk via Firebug welke layout verwijzing aangepast moet worden Ga terug naar de geopende stylesheet (css file) en zoek via “search” naar de verwijzing Kopieer de div class en plaats die daar direct onder; Bijvoorbeeld: #footer .moduletable h3.mod-title {

Verder lezen