HTML5 och CSS3: Wireframing i slutprodukten

Det är ett klassiskt fall av Photoshop kontra webbplats. Befintliga verktyg för trådframställning och prototyper är inte kapabla att exakt återspegla miljön på webben.

De producerar statiska konstruktioner som inte kan ses genom variabeln som kallas webbläsaren. Och när du bygger den slutliga webbplatsen kommer vissa element inte att se ut precis som deras utkast till motsvarigheter, och kunden kommer att märka de mindre skillnaderna i teckensnitt, positionering etc.

Du kan vara mer bekväm med ett grafikprogram, och det kan tyvärr ta längre tid att utforma iterationer om du behöver koda HTML-filen.

Fördelarna med att skapa en wireframe i HTML från början börjar dock överväga alternativen: Inte bara har vi nya layoutelement i HTML5 och kraftfulla väljare och styling i CSS3, men genom att kombinera dem kan vi kasta ihop en enkel layout snabbt.

Vi hör ett nytt företag varje dag ( 37signals , Atomiq och andra ) förklara dess antagande av HTML-prototyper. Deras främsta orsak är att processen är överraskande lätt när du har rätt verktyg på plats. Du är på väg att lära dig hur lätt denna process kan vara, och när du är klar kommer du att ha en början på din nästa byggnad.

Snabb layout med HTML5

HTML5 ger en uppsättning utmärkta nya strukturella element som gör det lättare att snabbt mocka upp ett dokument med färre klasser och ids. När du förstår syftet med dessa element kommer du att kunna skapa en grov sidlayout om några minuter.

Om du inte är bekant med dessa nya element, så är det en snabb introduktion. De nya elementen ger en renare dokumentstruktur än tidigare, samtidigt som du befriar dig från att flytta bort från en stor användning av divs. Lachlan Hunt beskriver dessa delar snyggt i " En förhandsvisning av HTML5 ”:

De article Elementet representerar en oberoende del av ett dokument, en sida eller en webbplats. Den är lämplig för innehåll som nyheter och blogginlägg, foruminlägg och enskilda kommentarer.
De section Elementet representerar en generisk del av ett dokument eller en applikation, till exempel ett kapitel.
De header Elementet representerar rubriken för en sektion. Rubriker kan innehålla mer än bara rubrikens rubrik; Det skulle till exempel vara rimligt att inkludera underrubriker, versionshistorikinformation och bylinjer.
De nav Elementet representerar ett avsnitt av navigeringslänkar. Den är lämplig för både webbnavigering och innehållsförteckning.
De aside elementet är för innehåll som är tangentiellt relaterat till innehållet kring det, och det är användbart för att markera sidor.
De footer elementet representerar sidfoten av en sektion. Det innehåller vanligtvis detaljer om den sektionen, som författarens namn, länkar till relaterade dokument och upphovsrättsdata.

På mitt exemplarwebbplats vill jag ha en centrerad sida med en rubrik, ett sidofält till vänster, ett område för huvudinnehållet och en sidfot. Jag har använt HTML5-element för att markera strukturen, med en article element som innehåller allt.

Example
>

Dessa element och divs är dimensionslösa och osynliga såvida du inte anger stilattribut eller lägger innehåll i dem. För att göra dem användbara kan vi tillfälligt tilldela höjder till dem. Vi bör också ställa in HTML-elementen till display: block; så att webbläsaren känner igen dem (extra arbete krävs för IE).

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

Innan vi placerar elementen måste vi kunna visualisera layouten. Den ideala lösningen för att visualisera strukturen utan innehåll skulle vara lätt att ta bort senare och skulle inte påverka konstruktionen.

Alternativ 1: Outlines

Skissen Inställningen är kompatibel med alla moderna webbläsare och påverkar inte elementets bredd, medan border attribut gör.

article, header, nav, aside, section, footer {outline: 1px solid #000; }

Alternativ 2: HSLa

HSLa (eller till och med RGBa) ger dig en bättre representation av elementets hierarki eftersom opaciteten gör att överlappande element visas mörkare. Men om du planerar att ha grundläggande bakgrundsfärger i mock-up, kanske den här metoden inte fungerar bra.

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }

positionering

Metoden för positioneringselement är en fråga om personlig preferens, och du har många alternativ: mätverktyg i webbläsaren eller operativsystemet, bakgrundsrambilder (som jag har valt), CSS-ramar med rutnät och layouthjälp eller programvara som Dreamweaver. Positionering är den viktigaste delen och kommer att behöva fungera ordentligt från början. Koden du skriver här kommer sannolikt att förbli i slutprodukten.

I mitt exempel har jag gett sidan en fast bredd, med ett sidofält till vänster och innehåll till höger, både mellan sidhuvudet och sidfoten.

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

Under hela processen kan jag se varje avsnitt och se var den kommer att visas. Här är resultatet:

Oroa dig inte om webbläsarkompatibilitet tills du kommer till slutprodukten. Jag rekommenderar starkt att lämna anteckningar via CSS-kommentarer, vilket markerar vilka områden du behöver komma tillbaka till (vilket i första hand kommer att vara väljare och attribut som kräver extravård för vissa webbläsare).

Prototyper innehåll

När layouten är klar kan du behöva lägga till provinnehåll. Den vanligaste metoden idag är att kasta bitar av Lorem Ipsum och vattenmärkta stock photography på sidan. Varför återuppfinna hjulet?

HTML Ipsum är en utmärkt webbplats som omslår Lorem Ipsum-text i gemensam mark-up. Att kunna ta allt på en sida kunde inte bli enklare.

PlaceHold.it erbjuder platshållare bilder i vilken storlek du behöver genom att ringa varje bild via en URL-förfrågan (t.ex. http://placehold.it/350x150 , där det första värdet är bredden och den andra höjden):

PlaceKitten fungerar exakt som PlaceHold.it, förutom med bättre bilder:

I stället för att lägga till avancerad JavaScript för kartor, kan du dra in en grundläggande karta som en bild via Googles statiska kartor . En API-nyckel eller unik signatur krävs, men du måste ändå få det om slutprodukten innehåller en karta.

Simulera beteende

Moderna webbplatser innehåller funktionalitet som är svår att kommunicera genom statiska trådramar: expanderande och kollapsande element, övergångar, dra och släpp, dynamiska menyer, etc. Du måste i slutändan använda ett JavaScript-bibliotek, så ladda ett bibliotek nu och skripta i vissa grundläggande funktionalitet skulle inte skadas.

Du kan undvika nedladdning genom att ladda jQuery från innehållsnätverket. Efterlikna det avsedda beteendet med några funktioner istället för att skriva den aktuella koden. Om ett element exempelvis ska visas när en länk är klickad (säg ett inloggningsfönster eller kontaktformulär), bygg en snabb trådram i fönstret, göm det som standard och använd sedan jQuery för att avslöja det på klick.

Så länge du gör tillräckligt med arbete för att efterlikna beteendet, kommer kunden att kunna se resultatet för sig själv, snarare än att behöva hälla över en serie flödesscheman eller förklaringar.

Simuleringstillstånd

Om du skapar wireframes för en webbapplikation snarare än en webbplats kan du kanske snabbt visa flera tillstånd på en enda sida. Du kan skapa olika kopior av trådramen, var och en för att visa ett visst tillstånd, eller du kan använda PolyPage .

PolyPage är en plugin för jQuery som låter dig använda klasser i din mark-up för att representera element som skulle vara närvarande för olika stater (till exempel inloggad och utloggad). Du kan växla varje stat med en länk, vilket hjälper dig att enkelt demo skillnaderna för kunden utan att behöva flera sidor.

Slutgiltiga tankar

Medan de ursprungliga mönstren alltid är snygga på papper eller i PDF-format, har det flera fördelar att bygga HTML-sidorna direkt från början.

Du sparar den tid du skulle ha spenderat på att återskapa designen i kod. Du undviker förvirringen att undra varför slutprodukten inte ser ut som originalet. Och du sparar både dig och klientens tid, pengar och nerver.

Michael Botsko är en webbutvecklare och webbteknikinstruktör i Portland, Oregon. Han trivs på både klient och öppen källa projekt med Botsko.net , LLC. När han inte arbetar trivs han med sina två barn och underbara fru.

Vilka snabba layout- och prototypverktyg har jag förbisedt? Vilka är fördelarna med att designa först och bygga senare?

html5 programmering css3 wireframing html koda