Archive for category Webdesign
HTML 5 en Arcade Fire
HTML5 zal op termijn, bij de volgende revisie, de huidige versie van html vervangen.
Veel developers kijken al reikhalzend uit naar alle nieuwe mogelijkheden, en vooral naar de mogelijkheid om interactieve content af te kunnen spelen zonder de noodzaak om een Flash player plugin te hoeven gebruiken.
De website van Arcade Fire is hiervan een mooi voorbeeld.
Voor één van hun songs, We Used To Wait, heeft Chris Milk een geweldige interactieve video gemaakt, waarbij Google streetview images op basis van user input worden opgehaald en verwerkt in de video.
De video is geoptimaliseerd voor Google Chrome, en werkt misschien niet goed op een andere browser.
Wil je weten of jouw “browser of choice” al klaar is voor html5? Test hem op html5test.com
Image hover effect met css
Soms bestaat de noodzaak voor een link hover effect met afbeeldingen in een website. Normaliter zou je daar Javascript op loslaten, maar dat betekent gelijk dat de 5% procent van de wereld die Javascript in hun browser heeft uitgeschakeld jouw site heel anders ziet dan de bedoeling is.
Er is een lichtgewicht en redelijk kogelvrije oplossing om dit met uitsluitend CSS te realiseren.
Voor alle duidelijkheid, dit is een oplossing die bedoeld is voor hyperlinks.
Dit is de css:
a.hover{
display: block;
width: 100px;
height: 20px;
background: transparent url(jouwafbeelding.jpg) 0 0 no-repeat;
}
a.hover:hover{
background-position: -100px 0;
}
Voor het hover effect heb je twee afbeeldingen nodig, de default state en de hover state. De truc is om deze twee te combineren tot één afbeelding, waarbij de hover afbeelding rechts van de default afbeelding staat. Op die manier wordt de afbeelding direct geladen en heb je geen haperingen bij de overgang van de ene naar de andere state. In bovenstaand voorbeeld ga ik uit van een weergave van 100px breed met een image van 200px breed.
Je ziet in bovenstaande css dat de hover state background position -100 is, dit zorgt er voor dat in het block van 100px pas bij hover de rechter afbeelding wordt weergegeven.
Mijn afbeelding:
Het geheel in actie:
Je kunt naast tekst ook uiteraard een afbeelding als link gebruiken, als je bijvoorbeeld een bijzonder font wil gebruiken. Zorg er dan wel voor dat die afbeelding hetzelfde formaat heeft als de waardes van het block.
Logodesigncase: Hospitality in Health
Posted by Erwin in Logodesign, Webdesign on 27/12/2009
Onlangs heb ik een heel leuk project afgerond. Het design van het logo en de visitekaartjes en ontwerp en bouw van de website van Hospitality in Health.
Wat dit project zo leuk maakte is dat Hospitality in Health gespecialiseerd is in recruitment van top niveau hoteliers voor de gezondheidszorg. En dan niet zomaar gezondheidszorg, maar speciaal voor high-end ziekenhuizen die veel zorg besteden aan zorgtoerisme. Grote privé klinieken in het Midden Oosten bijvoorbeeld.
Het logo moest zowel de gastvrijheidsindustrie als de gezondheidszorg aanspreken, daarom heb ik gekozen voor een vrij letterlijke en rechtstreekse benadering met maar een klein beetje symboliek.
Nadat ik een aantal schetsen had gemaakt, heb ik het project een dag laten liggen om andere dingen te doen. Vaak kom je daardoor op briljante ingevingen, soms is één van de concepten al zo sterk dat je daar niet meer overheen komt. In dit geval was het zo dat één van de schetsen al zo goed was dat ik vond dat die de beste keus zou zijn.
Dit was de allereerste, grove versie van het concept, uitgewerkt in Illustrator. Ik heb hier een vrij serieus, hoekig font voor gebruikt.
De tweede versie was een experiment om te kijken of de beeldtaal zich zou lenen voor een duidelijke medische associatie. Voor deze versie heb ik al gebruik gemaakt van het uiteindelijke font.
De definitieve versie is uiteindelijk wat roder paars en wat vierkanter geworden.
De kleine h verweven in de grote h staat voor de manier waarop Hospitality en Health met elkaar verweven zijn in het bedrijfsconcept. De boog staat voor globaal (wereldwijd) opereren en voor een nieuwe manier van denken (rijzende zon, ochtendgloren). Tenslotte versterkt de donkere ondergrond de dag/nacht/rijzende zon associatie.
Het bijbehorende visitekaartje heeft de moeilijke taak om drie verschillende bedrijven te vertegenwoordigen. Omdat dat heel makkelijk heel chaotisch kan worden voor de ontvanger van het kaartje, heb ik de drie bedrijven gesplitst. Hospitality in Health aan de ene kant, de andere twee bedrijven aan de andere kant.
Voorzijde
Achterzijde
De website zal gaandeweg nog worden uitgebreid met een aantal extra functionaliteiten.
Voorkom Spam emails!
Posted by Erwin in Internet, Tips & Tricks, Webdesign on 10/05/2009
Je email adres op je website zetten is een waterdichte manier om veel spam binnen te krijgen.
Hoe dat komt? Er zijn mensen actief op internet die met zoekrobots alleen maar zoeken naar email adressen. Met als enig doel reclame-email te sturen voor allerhande medicatie die een gezond mens helemaal niet nodig heeft. En erger.
Ik merkte kort na het starten van dit blog hoe effectief die robots zijn. Nog voor Google mij geïndexeerd had kwam de eerste spam al binnen. Van “Hallmark” maar niet heus. Gelukkig makkelijk herkenbaar als nep omdat alle maatregelen die Hallmark neemt ter identificatie van een echte E-card ontbraken.
Er is een goede oplossing!
Enkoder zorgt ervoor dat je email adres door middel van een ingewikkeld script onherkenbaar wordt gemaakt voor zoekbots. Je kunt een aantal velden op de site invullen en bepalen welk woord de email hyperlink vormt.
Je kunt op de website van Hivelogic zelfs een applicatie downloaden die email adressen codeert voor Mac OSX. Helaas wordt daar geen support voor geleverd.
Een ander goed middel is om in plaats van @, at te gebruiken. Daarmee ‘breek’ je een email adres zodanig dat een zoekbot het niet als email adres zal herkennen. Je moet dan alleen wel vertrouwen op het verstand van degene die jou wil bereiken….
De enige pech is dat als je eenmaal in zo’n spam database bent opgenomen, je daar niet meer vanaf komt. Daar helpt zelfs de beste codering niet tegen.
Sticky footer
Posted by Erwin in Tips & Tricks, Webdesign on 27/04/2009
Niets is irritanter dan een footer die niet onderaan het beeldscherm blijft plakken.
Het kan gebeuren dat je een layout hebt gemaakt in CSS, waarbij de footer gewoon mooi onderaan de pagina moet blijven ‘plakken’. Als je tussen alle pagina’s een pagina hebt die relatief weinig content bevat, loop je het risico dat je footer halverwege het beeldscherm zweeft op die bewuste pagina.
Als je een oplossing hiervoor zoekt op Google, krijg je veelal resultaten die vroeger werkten, maar nu achterhaald zijn.
Gelukkig is daar nu een oplossing voor, die ook nog eens in meer dan 50 browsers is getest, inclusief Google Chrome!
-
You are currently browsing the archives for the Webdesign category.
- Abonneer je op m'n rss feed
- of plan een afspraak via
.
