Viktor Bijlenga

Thoughts on Media Queries for Elements +

Interesting post by Jonathan T. Neal on the subject Media Queries for Elements.

I think this would open up some new interesting possibilities for making better responsive layouts, but I guess the discussion/other solutions around this topic will be interesting for me to read about.

Effeckt.css +

A great collection of CSS transition & animations. It’s still a work in progress, so it still growing/evolving. Chris Coyier has recored a great introduction of it, if you want to contribute.

Animated off-canvas navigation +

Example of a bunch of animations that will work fine for off-canvas menus. Feels like we will be seeing a lot more animations on the web. I like that!

Video: Layout på webben – Eric Meyer

Intressant föreläsning av Eric Meyer, som pratade under W3Conf i San Francisco. Han pratar om hur layout har fungerat på webben hittills, och hur det håller på att förändras i och med t.ex. flexbox och grids.

Get Yourself Preprocessing in Just a Few Minutes +

Finns ingen anledning att vara rädd för att testa på nya sätt att skriva stillmallar. När det väl sitter så kommer det öppna nya dörrar, som både sparar tid och ger bättre resultat.

Uppdatera dina CSS3 prefix +

David Storey skriver en uppdatering om vilka funktioner i CSS3 som kräver prefix numera. Självklart får man ta ställning till hur man använder prefix beroende på ens besökares webbläsare.

Interactive Guide to Blog Typography +

Bra resurs för att illustrera behovet av typografi på en webben/en blogg. Jag gillar speciellt upplägget av denna demo, eftersom det är interaktivt och roligt att pröva.

How To Deal With Vendor Prefixes +

Bra läsning om hur man som webbdesigner kan jobba med att använda korrekta CSS-prefix för att få ut så mycket fungerande kod som möjligt.

Webbdesign kräver förståelse

David Paulsson, i inlägget Webbdesign och retinaskärmar:

Ska vi fortsätta hysterin och göra separata bilder för alla olika enheter eller ska webbutvecklare äntligen börja arbeta med CSS3 och skalbar grafik på webben? Om vi fortsätter att skapa dubbla uppsättningar av våra bilder; ska vi ”straffa” besökare med bra skärmar med längre laddningstider bara för att vi måste ladda ner bilder som är dubbelt så stora?

Jag tror att det är viktigt att inte glömma bort följande:

  • Relevant design. Den absolut viktigaste delen av riktad kommunikation. Varför berättar vi det här? Vad vill vi uppnå? Dessa regler gäller såklart oss designers också. Vad fyller den högupplösta dela-knappen för funktion, om ingen använder den? Förmodligen ingen alls.
  • Snabbt. Snabbt går ofta hand i hand med snyggt, eftersom god design ofta leder till att relevant information presenteras för mig snabbt. Snabbt innebär även att jag inte behöver vänta på webbplatsen.
  • Tänk på tekniken. Presentera olika innehåll för olika förutsättningar. Utnyttja hårdvara, såsom gyroskop, accelerometer, gps och skärmstorlek till din fördel. Se till att användare kan uppnå resultat på oavsett plattform. Tänk även på att sammanhanget enheter används är olika. Hur påverkar det upplevelsen?

Ett citat från David igen:

Det enda vi behöver bry oss om är; hur får vi vår design att se bra ut oavsett vilken skärm besökaren har?

Det finns inget enkelt svar på den frågan, men det finns några generella saker jag önskar att vi tillsammans blev bättre på.

CSS istället för bilder, olika typer av javascript, vektorgrafik och högupplösta bilder är intressanta ämnen. Läs på om aktuella lösningar och tekniker. Finns det inget bra sätt, fundera på hur du kan skapa egna lösningar. Diskutera med andra. Det är kul och man lär sig massor. Dela med dig.

Jag samlar på mig resurser jag gillar, och delar dessa på min blogg. Det är en del av min utveckling. Verktyg som CSS Hat, Retina.js, Gradient underlättar i vardagen och gör att jag kan leverera snyggare design. Det enda som krävs från mig är att jag avsätter tid för att läsa och prata, samt är öppen för nya lösningar.

Till sist:

  • Bra webbdesigners är/förstår utvecklare. Jag tror att det är väldigt viktigt att kunna lite av varje. Att ha förståelse för hur en design renderas i en webbläsare är en del av vårt jobb. Våra val påverkar hur snabbt en sida laddas. Hur kan vi underlätta för varandra?

Förståelse innebär att man kan utnyttja och tänja på de begränsningar som finns. Gräv ner dig i kodträsket en stund. Prata med utvecklare. Dela kunskaper med varandra. Det blir bättre så.


Har du tankar och funderingar att dela? Skriv ett eget blogginlägg och dela med dig. Jag pratar gärna med dig på Twitter, där hittar du mig som @viktorbijlenga.

Twitters nya logo i CSS +

Twitter firar Sveriges nationaldag med att släppa en ny logotyp. Svenska Upperdog konverterar den blixtsnabbt till CSS. Briljant och dessutom ser det säkert vackert ut på tredje generationens iPad.

Ikoner som typsnitt

Pixliga ikoner på en iPad med retinaskärm är ingen vacker syn. När knivskarpa typsnitt möter pixliga ikoner, blir det otroligt fult. Att optimera alla ikoner tar tid och kräver ofta rätt mycket jobb. Istället kan man rendera ikonerna med hjälp av ett typsnitt och CSS.

Det finns en utmärkt genomgång av John Hicks från julkalendern 24 Ways. I artikeln Displaying Icons with Fonts and Data-Attributes går han igenom hur man implementerar ikoner som typsnitt på webben. Om du inte redan har läst hans tankar, rekommenderar jag varmt att du ägnar tio minuter åt detta.

CSS-Tricks publicerade även demowebben Icon Fonts are Awesome för ett tag sen. Dessutom kan det vara värt att läsa igenom HTML for Icon Font Usage när du ändå är inne och läser på CSS-Tricks.

Typsnitt som jag gillar:

Om du vill ha fler förslag, har Megan Fischer sammanställt ett inlägg med snygga ikoner, några av dessa finns tillgängliga som typsnitt.

Drew Wilson (ibland misstänker jag att han aldrig sover) har skapat den smarta tjänsten Pictos Server, som låter dig välja några ikoner, som sedan skapas som ett eget typsnitt. Allt för att minska laddningstiderna.

Fördelarna är rätt många, typsnitt är skalbara och det går snabbt att byta färg, eller skapa effekter med CSS. Dessutom blir det sådär knivskarpt som man drömmer om att det ska vara på en högupplöst skärm.

Stay Creative!

Prefixr +

Smart verktyg som underlättar om du använder många vendor-prefix när du skriver CSS. Prefixr låter dig skriva ett (t.ex. -webkit) och lägger till alla andra automatiskt.

← Prev