Dagens tips: The Oatmeal.com

Matthew Inman är mannen bakom theoatmeal.com. En sajt som med roliga seriestrippar beskriver allt möjligt som folk tänker på men som man kanske inte vågar fråga om, även infographics och små berättelser ur vardagen.

En sajt som jag regelbundet brukar kolla av för ett gott skratt är The Oatmeal. Det är en webbdesigner/webbutvecklare vid namn Matthew Inman från Seattle, Washington som står bakom denna lysande webbsida med mängder av egna seriestrippar. Han blandar framgångsrikt strippar om branschen med berättelser om allt från jordens undergång och tupperware till saker han stör sig på med sociala medier. Allt detta med en stor dos humor och finurliga illustrationer. Ett tecken på hur populär Matthews sida är att han har runt fem miljoner unika sidvisningar i månaden. Helt okej siffra, eller hur?

Här kan du läsa ett exempel på vad som för många som jobbar i branschen kan tyckas vara mer eller mindre vardag. Nämligen att designa en webbsida åt kund.

Matthew har även gjort lite föreläsningar och nedan kan du se en rolig snabbföreläsning om hur man får 5 miljoner unika besökare till sin sajt per månad.

Ursprungligen publicerad på avtramp.se

The Evolution of the Web

Smashing Magazine tipsar om The Evolution of the Web. En snygg uppställning över hur webben har utvecklats över åren.

Jag brukar ofta slänga ett öga Smashing Magazine och läsa lite om nya häftiga grejer. Nyss twittrade dom om en riktigt skön site som ritar upp webbens utveckling från början på 90-talet och fram till idag. Det är bara att klicka runt och läsa. Riktigt kul!

theEvolutionoftheWeb-large

Se sidan här: http://evolutionofweb.appspot.com/

Ursprungligen publicerad på avtramp.se

Dubbla bakgrunder med CSS3?

Ibland vill man jobba med två olika bakgrundsbilder på en sajt. Här på avtramp.se tyckte vi till exempel att det skulle vara trevligt och vi ville ju inte bryta loss en div från vår centrerade layout för att åstadkomma det hela. Så vi använde oss av ett litet CSS3-trick och använde två bilder i body.

Javisst, numera stöds detta av alla större browsers. I bland kanske du vill ha två olika bilder som bakgrund och då kan man lösa detta genom följande kodbit:

body {
background-image: url('bild1.jpg'), url('bild2.jpg');
background-repeat: repeat-x, repeat;
}

Detta använder vi oss av här på avtramp.se då träpanelen är motsvarande bild1 och den gråa strukturen motsvarar bild2. I raden under säger vi att träpanelen ska repeteras i x-led medan den gråa bilden ska repeteras i både x- och y-led.

Skulle vi vända på ordningen i background-image så hade inte träpanelen synts då den hade placerats under den den gråa bilden. Något att ha i åtanke om din ena bild inte syns. Alltså, översta bilden först.

Positionering kan göras genom background-position med värden separerade med kommatecken enligt exemplet ovan. Läs mer på css3.info eller på W3.org.

Ursprungligen publicerad på avtramp.se