Skatteverket förklarar hur man designade sin nya webbplats

Webbsnack ger en länk till Skatteverkets utvecklingsblogg där man förklarar hur man jobbat för att designa den nya hemsidan. Där finns också skärmdumpar som visar hur den sett ut genom tiderna.

Läser att även Skatteverkets webbutvecklare Jens Wedin har insett fördelarna med en "grid-design", och satsat på en total bredd på 960px, som vi skrev om nyss och ett tag sen. Verkar som vi fått en ny industristandard, och skönt är det.

Man har även i den senaste versionen gått över till att använda en flexibel layout, istället för en fast, som man hade innan.

Tycker att resultatet blev väldigt bra och det är kul att man delar med sig av arbetsprocessen på det här sättet.

By Jesper Lind

Blueprint CSS - ett ramverk för avancerad layout

http://www.codeodyssey.se/upload/resource/blog/Blueprint-CSS.png

Blueprint är ett projekt på Google Code som är släppt som öppen källkod under MIT licens. Det är en uppsättning CSS-mallar som skapar en smidig grund att bygga din CSS-design ovanpå. Efter en snabb koll tycker jag det ser riktigt bra och man har lagt fokus på att följa webbstandarder och tabell-lös design.

Intressant att notera är demosajtens bredd (skärmdump här ovan) som är exakt 960px bred. Det ger en ytterligare bekräftelse att detta börja bli ett slags standardmått, nu när fler och fler användare sitter på 1024-skärmar. Läs gärna vår tidigare artikel som handlar om att designa webbsidor med 960px bredd och rutnät. Kan tänka mig att dessa ideer har inspirerat folket bakom Blueprint.

Något annat värt att notera i Blueprint-projektet är att man har möjlighet att placera textraderna i jämna rader vertikalt. Tidigare länk på detta ämne finns hos oss, här.

Blueprint verkar alltså vara ett riktigt intressant projekt värt att kolla närmare på, för alla som vill ha en bra grund till CSS-design och ger ett bra rutnät, mall för utskrift och typografi-regler.

By Jesper Lind

Layoutlösningar med nästade Masterpages

Den nuvarande versionen av Visual Studio stödjer inte nästade Masterpages i designläget. Men detta kommer det bli ändring på i den kommande VS 2008 som ScottGu förklarar.

Scott visas samtidigt på att visa en användbar teknik, för att skapa olika layouts, för sidor som har en kolumn respektive två.

Det ryktas för övrigt att Visual Studio 2008 Beta 2 kommer släppas inom tre veckor och då med en "go-live"-licens.

By Jesper Lind

Kolla webbdesign i tidigare versioner av Internet Explorer

Som de flesta webbutvecklare är medvetna om skiljer sig rendereringen mellan webbläsare en hel del. Webbläsarleverantörerna blir för visso bättre och bättre på att följa standarder men ännu är inte situation perfekt.

En av de riktiga mardrömsläsarna att göra design för är ju Internet Explorer 6.0 och tidigare versioner. Vi har tidigare skrivit lite om hur man kan se hur sina alster ser ut i denna läsare på några olika sätt. Dels genom att köra den i en virtuell miljö eller att använda tjänsten Browsershots.

Nu hittade jag via Lifehacker ännu ett alternativ som heter IE Netrenderer. Med denna onlinetjänst kan man se hur en hemsida ser ut i IE 5.5, 6 och 7. 

By Jesper Lind

Jakten på de perfekta knapparna

Att göra knappar som är snygga och fungerar bra är inte så lätt i nuvarande versionen av HTML.

Använda vanliga bilder

Man kan ju göra knapparna som vanliga bilder i t ex Photoshop, men nackdelen är att texten inte går att förstora eller förminska i webbläsarna. Villl man byta färg på dem eller ändra utseendet är det bara till att göra om dem igen.

Input submit

Eller så kan man göra input-varianten men dessa är nästan omöjliga att styla om med CSS. Och standardutseendet varierar ju i de olika webbläsarna vilket inte är så roligt om man vill att designen ska se samma ut oberoende av system.

HTML button

Button-taggen är lite trevligare eftersom den går att ändra design på och även lägga egna ikoner eller extra markup inom. ParticleTree har en bra genomgång av detta.

Filament Group testar vidare och visar upp en knapp som använder sliding-doors tekniken.

En stor nackdel med Button är dock att IE inte hanterar dem så bra. IE tar emot innerHTML istället för value när man postar formuläret.

Länkar som ser ut som knappar

På denna bloggen använder vi länkar som knappar eftersom då får man större frihet på utseendet. De är dock inte speciellt fancy.

Roger Johansson har gjort ett riktigt ambitiöst försök att göra om länkar till knappar med hjälp av extra markup och giffar. Ser snyggt ut men lite väl mycket extra kod.

Sen är ju faktiskt länkar till för navigation och inte för att posta formulär så denna lösningen brister lite ut semantisk synpunkt.

Vad är bäst?

Valet är inte självklart utan man får se vad som passar bäst för varje enskilt projekt. Ibland kanske de vanliga standardknapprna duger eller i andra fall kan vanliga bilder vara det enda rätta.

Skönt är i alla fall att det finns så många duktiga utvecklare där ute som gör sitt bästa för att hitta den där perfekta knappen.

By Jesper Lind

Snygga knappar med Photoshop

http://www.codeodyssey.se/upload/resource/blog/knappar-web-2-0.png

Ett suveränt tips från Deziner Folio för den som vill designa snygga knappar med Photoshop. På länken bjuds på färdiga stilar som man kan ladda hem och använda i sina projekt. Se några exempel här ovan som tog mig typ 3 minuter att fixa ihop.

By Jesper Lind

Gratis ikoner till webbprojekt

http://www.codeodyssey.se/upload/resource/blog/brandspankingnew-mini-icons.png

Backend Media bjuder på en lista med ikonsamlingar från famfamfam, Tangi Icon Gallery och Crystal Clear.

Jag skulle även vilja komplettera med några minimalistiska ikoner från BrandSpankingNew som ni kan se exempel på här ovan. På samma sajt finns även ikoner för DocTypes, samling 1 och 2.

Uppdatering: Webbsnack har också hittat massa snygga ikoner i Apple's Icosystem, David Lanham's samling, IconFactory och även en riktigt användbar sökmotor specialiserad på ikoner.

Smashing Magazine: 20+ Free And Fresh Icon Sets 

By Jesper Lind