Heb jij een voorbeeld van een eenvoudige en effectieve logo? Stuur me de link via het reactievenster hieronder.

Responsive Design

‘Responsive’ betekent dat je website op alle schermen goed werkt, van klein mobieltje tot het grootste beeldscherm. Je hebt één website voor alle apparaten. Die website wordt afhankelijk van de grootte van het scherm telkens anders ingedeeld: een optimale weergave op elk toestel. De techniek erachter: Media Queries in combinatie met CSS3.

Responsive Design betekent dat je op een smartphone niet steeds hoeft in- en uit te zoomen. Via nieuwe technieken worden foto’s en plaatjes geladen in de grootte waarin ze nodig zijn. Op een mobieltje heb je immers geen grote foto’s nodig. Daardoor blijft je website lekker snel.

Voorbeelden

Op de website Media Queries vind je een heleboel voorbeelden van websites met Responsive Design. Je zult zien dat een website er op een mobieltje soms heel anders uitziet dan op een groot beeldscherm.

Is jouw website responsive?

Op http://www.studiopress.com/responsive/ kun je zie hoe jouw site er op elk soort scherm uitziet. Typ in het invulvenster je url en selecteer het bolletje “Device sizes”.

Of surf naar je eigen website en maak het venster van je browser zo smal mogelijk. Past het ontwerp zich aan? Dan is je website responsive. Verdwijnt een deel van het beeld uit het zicht en verschijnt er een scrollbalk? Dan is je website niet responsive.

Is jouw website responsive? Gefeliciteerd. Niet responsive? Neem contact op met Winy Schalke. Ik maak jouw website graag responsive zodat iedereen ook jouw website overal kan bekijken.

Waar zet je je contactgegevens?

Dat kan op verschillende plaatsen:

• Maak een complete pagina om met je bezoeker in contact te komen.
• Gebruik een deel van de “Over ons” pagina voor je contactgegevens.
• Zet de contactinformatie in de zijbalk of de footer (dan is het op alle pagina’s zichtbaar).

Besteed extra aandacht aan dit onderdeel van je website. Als je het goed doet trek je de aandacht van de gebruiker en neemt hij contact met je op. Doe je het niet goed dan schrik je bezoekers af (en raak je misschien een potentiele klant of bezoeker kwijt).

Inspiratie

Op deze website vind je voorbeelden van Contactpagina’s ter inspiratie: 23 inspirerende voorbeelden van Contactpagina’s.

Omdat je gebruikersnaam zichtbaar is voor iedereen die naar je auteursarchief gaat (meestal op jouwdomein.com/author/jouw-gebruikersnaam). Dit betekent dat een hacker alleen je wachtwoord nog maar hoeft te raden of te kraken.

Als je admin-account gehacked wordt, kun je hele website kwijt raken. De hacker kan alles wissen. Of andere erge dingen doen met je website.

Daarom is het goed de beheerdersrol alleen voor beheerders-doeleinden te gebruiken. (En, gebruik altijd een veilig password.)

In dit artikel staat precies uitgelegd hoe je veilig gebruikers en rollen aan kunt maken: Set Safe, Secure User Roles on Your WordPress Blog.

Op de website van Etsy vind je allerlei tips voor het inrichten van je webwinkel. Etsy heeft uitgebreide stattistieken, dus je ziet in een oogopslag of er veel bezoekers komen in je winkel.

Ook voor kopers kan ik Etsy aanraden. Je vindt er prachtige en originele kadootjes. Kijk bijvoorbeeld eens in de Etsy-shop van mijn vriendin/collega Anna: Studio Kroko (etnisch en historisch geïnspireerde sieraden).

Heb je in Etsy een leuke shop gevonden, kijk dan eens in de “favourites” van die shop. Daar vind je items die deze shopeigenaar mooi vindt. Zo kom je van de ene shop in de andere en vind je verrassend mooie spullen. Ik vond zo tot mijn verbazing mooie digitale achtergrondpatronen, waarmee je je eigen kadopapier kunt afdrukken.

Je kunt bijvoorbeeld treasuries samenstellen rond een thema. Zo krijg je weer respons van de makers van de items die je in een treasury hebt gezet. Een voorbeeld van Studio Kroko: My cup of tea, een treasury over theekopjes.

Open nu je eigen webshop

Ga naar Etsy.com.

Hulp nodig?

Vind je het toch te ingewikkeld en heb je hulp nodig? Neem contact op. Ik kijk graag hoe ik je kan helpen bij het opzetten van jouw Etsy webshop. Het is veel te leuk om het niet te doen!

Teleurgesteld over het resultaat? Ik help je graag om meer bezoekers op je website te krijgen en zo hoger op de ranglijst te komen. Neem contact op.

1. Chrome haal Internet Explorer in

Als de huidige groeicijfers doorzetten, wordt Chrome (van Google) ’s werelds populairste browser. Rond het midden van 2012 komt er een einde aan de de 13-jarige heerschappij van Internet Explorer. In reactie op de dominantie van Google, zal Microsoft in het voorjaar Internet Explorer 10 uitbrengen. Dat wordt een geweldige browser met een gelikte interface, verbazingwekkende snelheid en een uitstekende ondersteuning van de W3C standaarden .

2. Internet Explorer 6 en 7 sterven uit

In januari 2012 surft wereldwijd 1,8% met Internet Explorer 6 en 4,0% met Internet Explorer 7. En dat wordt snel minder. De extra kosten om websites in deze browsers goed te laten werken zijn dus nog nauwelijks de investering waard. Webdesigners zullen minder vaak ingewikkelde en tijdrovende aanpassingen doen om het ontwerp er in Internet Exolorer 6 en 7 precies hetzelfde uit te laten zien.

Toch is 5,8% van de markt een heleboel mensen en blijven Internet Explorer 6 en 7 de standaard browser voor veel grote organisaties en overheidsdiensten. De beste oplossing is te zorgen dat websites goed blijven werken in Internet Explorer 6 en 7. Het ontwerp hoeft niet pixel-perfect te zijn, het mag best wat minder mooi zijn. Als de essentiële inhoud maar beschikbaar blijft voor iedereen.

3. Tablets en smartphones vragen om Responsieve Design

In 2012 krijgen steeds meer mensen tablets. De Apple iPad en de Kindle Fire worden steeds populairder, en binnen een paar maanden, zal je op elke zakelijke bijeenkomst tablets aantreffen. Ze zijn misschien niet echt nodig, maar het maakt je wel cool en belangrijk. Momenteel surft ongeveer 8% op het web met een smartphone.

In 2012 wil iedereen dat zijn website goed werkt op desktop computers, tablets en smartphones, zowel in liggende als in staande positie. Webdesigners zullen bij hun ontwerpen hier rekening mee moeten houden. Dit heet Responsive Design: het ontwerp past zich vanzelf aan aan de schermbreedte. De meeste webdesigners blijven echter websites ontwerpen met een vaste breedte. Ik ben me al aan het bijscholen in flexibele lay-outs en CSS3 media queries en ga dit in 2012 in praktijk brengen.

4. HTML5 in plaats van Flash voor animaties

HTML5 neemt steeds meer de paats in van Flash, bijvoorbeeld bij bewegende banners (advertenties).

De voordelen van zijn onder meer:

• HTML5 werkt ook op iPad en iPhone, Flash niet.
• Animaties passen zich aan aan verschillende schermformaten door het gebruik van o.a. media queries.
• De bestandsgrootte wordt kleiner, zodat animaties sneller verschijnen.
• HTML5 animaties zijn moeilijker te blokkeren.

5. Webpagina’s worden steeds zwaarder

Als de huidige trends zich voortzetten, zal de gemiddelde grootte van een enkele webpagina – inclusief alle CSS, JavaScript en mediabestanden – tegen het einde van 2012 de 1MB bereiken. Dit is vreemd, omdat HTML5 en CSS3 de noodzaak voor afbeeldingen en JavaScript verminderen. Toch worden er steeds meer filmpjes, scripts, etc., aan webpagina’s toegevoegd. Bedenk dat steeds meer mensen mobiel surfen. Voor hen is het extra belangrijk dat pagina’s snel laden Als jouw pagina’s langzaam laden, doe je bezoekers dan een plezier en laat je website ombouwen naar HTML5.

Nieuwe website hoog in lijst voornemens ondernemers

Nu.nl schrijft: Ondernemers gaan het nieuwe jaar in met de doelstelling vooral online meer aanwezig te zijn. Een nieuwe website prijkt hoog in de lijst met voornemens.

Dit blijkt een enquête van de zakelijke marktplaats Offerti.nl. Ondernemers zijn er vanzelfsprekend vooral op uit in het nieuwe jaar meer klanten te werven en het bedrijf uit te breiden. Om dit te doen is een aanwezigheid online belangrijker geworden.

Een nieuwe of verbeterde website is hier een belangrijk onderdeel van. Vooral ondernemers die al langer dan 2 jaar bezig zijn zien meer waarde in een actuele online website.

Offerti.nl ondervroeg 30.000 ‘professionals’ naar hun goede voornemens.

Wat zijn jouw goede voornemens voor 2012?

Wil je ook een nieuwe website of wil je je bestaande website verbeteren? Neem contact op met Winy Schalke. Ik bespreek graag de mogelijkheden met je.

Eenvoudiger uploaden

Bestandstype herkenning

Er zijn een aantal onderdelen gestroomlijnd. Je hoeft nu slechts op één icoontje te klikken om het bestandstype van je keuze te uploaden. Zodra het bestand is ge-upload worden de juiste velden getoond met relevante informatie over het bestand.

Drag-en-drop media uploader

Foto’s en andere bestanden voor berichten en pagina’s toevoegen gaat nu veel eenvoudiger. Sleep bestanden vanaf je computer in het venster van de uploader. Je kunt één of meerdere bestanden in één keer toevoegen. Heel fijn deze verbetering!

Dashboard ontwerp

Flyout menu’s

Navigatie in het dashboard gaat nu sneller en met minder klikken door de nieuwe flyout submenu’s. Als je met de muis over een hoofdmenu-item gaat in je dashboardnavigatie, worden de submenu’s op magische wijze getoond. Je hebt slechts een enkele klik nodig om bij elk dashboardscherm te komen.

Header + Admin bar = Toolbar

Om ruimte te besparen en de efficiëntie te vergroten, zijn de toolbar en de oude Dashboard header tot één toolbar samengevoegd, die altijd bovenaan in beeld blijft. Als je met je muis over de toolbar-items gaat verschijnen menu’s voor snelle toegang tot diverse onderdelen.

Prettige weergave

Een aantal dashboardschermen zijn bijgewerkt voor betere weergave in diverse beeldschermformaten, waaronder een verbeterde iPad/tablet ondersteuning.

Help tabbladen

De nieuwe Help tab zie je in de rechterbovenhoek van de dashboardschermen, direct onder je naam. De Help inhoud is overzichtelijk opgedeeld in secties, met links naar relevante documentatie en de ondersteuningsfora.

Voelt als de eerste keer

Nieuwe feature pointers

Als er na een update iets vernieuwd is in het dashboard verschijnt er de eerste keer een helptekst die uitleg geeft over de wijziging(en).

Bericht-update changelog

Vanaf nu zie je wanneer je WordPress is ge-update een welkom-scherm — ook toegankelijk op elk moment vanaf het W-logo in de linker hoek van de toolbar — waarop je kunt zien wat nieuw is in deze versie.

Inhoud extra’s

Verbeterde co-bewerking

Heb je ooit een bericht willen bewerken nadat iemand anders er al mee klaar was en een waarschuwing gehad dat de andere persoon nog steeds aan het bewerken was? Vanaf nu krijg je deze waarschuwing alleen als deze persoon nog op het bewerkscherm is, dus geen vertraging meer.

Update nu!

Wil je ook updaten naar de nieuwe versie van WordPress en profiteren van al deze verbeteringen? Neem contact op met Winy Schalke van Alva Design.

Het lijkt zo makkelijk, een plaatje “van je website plukken”. Je klikt met de rechter muisknop op het plaatje en kiest voor “Afbeelding opslaan als…”. Maar het is zelden een goed idee want meestal is zo’n webplaatje veel te klein om in drukwerk te gebruiken. Op het scherm ziet het er goed uit maar de resolutie van een beeldscherm is maar 72 dpi. Voor drukwerk is een resolutie van 300 dpi nodig. Een gedrukt plaatje bestaat namelijk uit veel fijnere puntjes dan de pixels op een beeldscherm.

In foto-bewerkingsprogramma’s, zoals Photoshop, kun je de resolutie van het webplaatje naar 300 dpi omzetten, maar dan neemt de afmeting in centimeters evenredig af. Een foto van 10 x 15 cm op een website wordt dan slechts 2,5 x 3,5 cm in drukwerk. Meestal veel te klein om te gebruiken.

Een button is vaak geen plaatje

Met CSS en HTML kun je tegenwoordig website-buttons maken die eruit zien als een plaatje, maar in werkelijkheid alleen maar uit een stukje code bestaan. Je kunt zo’n button dus niet “van de website plukken”. Probeer het maar eens met de button hiernaast.

Terug naar mijn klant, die een button van haar website wil gebruiken voor het tijdschrift. Die button was inderdaad geen plaatje, dus de hierboven beschreven truc “Afbeelding opslaan als…” werkt niet. Maar natuurlijk is er een oplossing.

De oplossing

1. Open de webpagina in een browser en vergroot de pagina zo ver mogelijk (met ctrl + of command +). De button is nu bijna schermvullend. Een groot beeldscherm is hierbij handig.
2. Maak een schermafbeelding (screenshot) van de button.
3. Open deze in Photoshop.
4. Maak de resolutie 300 dpi, met behoud van de bestandsgrootte (dus niet resamplen). Het plaatje wordt in centimeters veel kleiner, maar op het beeldscherm zie je dit niet.
5. Stel de kleurmodus in op CMYK.
6. Bewaar het plaatje als .psd (photoshop bestand).
7. Nu kun je het plaatje voor drukwerk gebruiken.

Als je programma geen psd bestanden als plaatjes accepteert dan kun je in Photoshop het bestand bewaren als .jpg in de hoogste kwaliteit.