HTML5 og CSS3: Wireframing i sluttproduktet

Det er et klassisk tilfelle av Photoshop versus nettside. Eksisterende wireframing og prototyping verktøy er ikke i stand til å nøyaktig gjenspeile miljøet på nettet.

De produserer statiske design som ikke kan ses gjennom variabelen kjent som nettleseren. Og når du bygger den endelige nettsiden, ser noen elementer ikke ut akkurat som deres utkast til motparter, og kunden vil legge merke til de mindre forskjellene i skrifter, posisjonering etc.

Det kan hende du er mer komfortabel med et grafikkprogram, og det kan ta lengre tid å lage designereerasjoner hvis du må håndkode HTML-koden.

Fordelene med å lage en wireframe i HTML fra starten begynner å oppveie alternativene: Ikke bare har vi nye layoutelementer i HTML5 og kraftigere selektorer og styling i CSS3, men ved å kombinere dem kan vi kaste sammen en enkel layout raskt.

Vi hører et nytt selskap hver dag ( 37signals , Atomiq og andre ) forklarer vedtakelsen av HTML-prototyper. Hovedårsaken er at prosessen er overraskende lett når du har de riktige verktøyene på plass. Du er i ferd med å lære hvor lett denne prosessen kan være, og når du er ferdig, har du en start på neste bygg.

Raskt layout med HTML5

HTML5 gir et sett med flotte nye strukturelle elementer som gjør det lettere å raskt oppheve et dokument med færre klasser og ids. Når du forstår formålet med disse elementene, vil du kunne lage et grovt sidelayout på få minutter.

Hvis du ikke er kjent med disse nye elementene, er det en rask introduksjon. De nye elementene gir en renere dokumentstruktur enn før, mens du frigjør deg for å flytte bort fra en tung bruk av divs. Lachlan Hunt beskriver disse elementene pent i " En forhåndsvisning av HTML5 “:

De article elementet representerer en uavhengig del av et dokument, en side eller et nettsted. Den er egnet for innhold som nyheter og blogginnlegg, foruminnlegg og individuelle kommentarer.
De section element representerer en generisk del av et dokument eller et program, for eksempel et kapittel.
De header elementet representerer overskriften til en seksjon. Overskrifter kan inneholde mer enn bare seksjonens overskrift; for eksempel ville det være rimelig å inkludere underoverskrifter, versjonhistorikkinformasjon og bylinjer.
De nav elementet representerer en del av navigasjonskoblinger. Den passer både for navigering og innholdsfortegnelse.
De aside elementet er for innhold som er tangentielt relatert til innholdet rundt det, og det er nyttig for å markere sidebjelker.
De footer elementet representerer bunnteksten til en seksjon. Den inneholder vanligvis detaljer om den delen, for eksempel forfatterens navn, lenker til relaterte dokumenter og opphavsrettsdata.

I mitt eksempel nettsted, vil jeg ha en sentrert side, med et overskrift, et sidebar til venstre, et område for hovedinnholdet og en bunntekst. Jeg har brukt HTML5 elementer for å markere strukturen, med en article element for å inneholde alt.

Example
>

Disse elementene og divs er dimensjonsløse og usynlige, med mindre du angir stilattributter eller plasserer innhold i dem. For å gjøre dem brukbare må vi midlertidig tildele høyder til dem. Vi bør også sette HTML-elementene til display: block; slik at nettleseren gjenkjenner dem (ekstra arbeid er nødvendig for IE).

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

Før du plasserer elementene, må vi kunne visualisere oppsettet. Den ideelle løsningen for å visualisere strukturen uten innhold ville være lett å fjerne senere og ville ikke påvirke designen.

Alternativ 1: Outlines

Utsikten Innstillingen er kompatibel med alle moderne nettlesere og påvirker ikke bredden på elementene, mens border attributtet gjør.

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

Alternativ 2: HSLa

HSLa (eller til og med RGBa) gir deg en bedre representasjon av elementets hierarki fordi opaciteten gjør at overlappende elementer blir mørkere. Men hvis du planlegger å ha grunnleggende bakgrunnsfarger i mock-up, kan denne metoden kanskje ikke fungere bra.

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

posisjonering

Metoden for posisjonselementer er et spørsmål om personlig preferanse, og du har mange alternativer: måleverktøy i nettleseren eller operativsystemet, bakgrunnsnettbilder (som jeg har valgt), CSS-rammer med rutenett og oppsettassistanse, eller programvare som Dreamweaver. Plassering er den viktigste delen og må fungere ordentlig fra begynnelsen. Koden du skriver her vil mest sannsynlig forbli i sluttproduktet.

I mitt eksempel har jeg gitt siden en fast bredde, med en sidefelt til venstre og innhold til høyre, både mellom topptekst og bunntekst.

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; }

Gjennom hele prosessen kan jeg se hver seksjon og se hvor den vil vises. Her er resultatet:

Ikke bekymre deg om nettleserens kompatibilitet før du kommer til det endelige produktet. Jeg anbefaler på det sterkeste å legge igjen notater via CSS-kommentarer, og markere hvilke områder du trenger å komme tilbake til (som først og fremst vil være selektorer og attributter som krever ekstra pleie for bestemte nettlesere).

Prototyping innhold

Når oppsettet er fullført, må du kanskje legge til prøveinnhold. Den vanligste metoden i dag er å kaste biter av Lorem Ipsum og vannmerket fotografi på siden. Hvorfor gjenoppfinne hjulet?

HTML Ipsum er en utmerket nettside som pakker inn Lorem Ipsum-tekst i felles oppslag. Å kunne gripe alt på en side kunne ikke vært enklere.

PlaceHold.it tilbyr plassholderbilder i hvilken som helst størrelse du trenger ved å ringe hvert bilde via en URL-forespørsel (for eksempel http://placehold.it/350x150 , hvor den første verdien er bredden og den andre høyden):

PlaceKitten fungerer akkurat som PlaceHold.it, unntatt med bedre bilder:

I stedet for å legge til avansert JavaScript for kart, kan du trekke inn et grunnleggende kart som et bilde via Google Static Maps . En API-nøkkel eller en unik signatur er påkrevd, men du må få det uansett hvis det endelige produktet inneholder et kart.

Simulerer atferd

Moderne nettsteder inneholder funksjonalitet som er vanskelig å kommunisere gjennom statiske wireframes: ekspanderende og kollapsende elementer, overganger, dra og slipp, dynamiske menyer, etc. Du må til slutt bruke et JavaScript-bibliotek til slutt, så laster du et bibliotek nå og scripting i noen grunnleggende funksjonalitet ville ikke skade.

Du kan unngå nedlasting ved å laste inn jQuery fra innholdsnettverket. Etterligne den tiltenkte oppførselen med noen få funksjoner i stedet for å skrive den faktiske koden. For eksempel, hvis et element skal vises når en kobling klikkes (si et innloggingsvindu eller et kontaktskjema), bygg deretter en hurtig trådramme av vinduet, gjem det som standard, og bruk jQuery for å avsløre det på klikk.

Så lenge du gjør akkurat nok arbeid for å etterligne oppførelsen, vil klienten kunne se resultatet for seg selv, i stedet for å hælde over en rekke flytskjemaer eller forklaringer.

Simuleringstilstander

Hvis du lager wireframes for et webprogram snarere enn et nettsted, vil du kanskje raskt vise flere stater på en enkelt side. Du kan lage forskjellige kopier av wireframe, hver forandret for å vise en bestemt tilstand, eller du kan bruke PolyPage .

PolyPage er en plugin for jQuery som gjør at du kan bruke klasser i markeringen din til å representere elementer som vil være tilstede for forskjellige stater (for eksempel logget inn og logget ut). Du kan bytte hver stat med en kobling, og dermed hjelpe deg å enkelt demo forskjellene til klienten uten å måtte ha flere sider.

Siste tanker

Mens de originale designene alltid ser nydelig ut på papir eller i PDF, har det flere fordeler å bygge HTML-sidene helt fra starten.

Du sparer tiden du ville ha brukt på å gjenskape designet i kode. Du unngår forvirringen og lurer på hvorfor det endelige produktet ikke ser ut akkurat som originalen. Og du sparer både deg og klientens tid, penger og nerver.

Michael Botsko er webutvikler og webteknologinstruktør i Portland, Oregon. Han trives på både klient og åpen kilde prosjekter med Botsko.net , LLC. Når han ikke jobber, trives han med sine to barn og fantastiske kone.

Hvilke raske layout- og prototypingsverktøy har jeg oversett? Hva er fordelene med å designe først og bygge senere?

HTML5 programmering CSS3 Wireframing html kode