HTML5 og CSS3: Wireframing i slutproduktet

Det er et klassisk tilfælde af Photoshop versus website. Eksisterende wireframing og prototypeværktøjer er ude af stand til nøjagtigt at afspejle miljøet på nettet.

De producerer statiske designs, der ikke kan ses gennem variablen kendt som webbrowseren. Og når du bygger det endelige website, ser nogle elementer ikke ud som deres udkast til modparter, og kunden vil bemærke de mindre forskelle i skrifttyper, positionering mv.

Du kan muligvis være mere komfortabel med et grafikprogram, og det kan forekomme, at designereerationerne tager længere tid, hvis du skal kode HTML-filen.

Fordelene ved at skabe en wireframe i HTML fra starten begynder dog at opveje alternativerne: Ikke alene har vi nye layoutelementer i HTML5 og mere kraftfulde vælgere og styling i CSS3, men ved at kombinere dem kan vi kaste sammen en enkel layout hurtigt.

Vi hører et nyt firma hver dag ( 37signals , Atomiq og andre ) forklare dets vedtagelse af HTML prototyping. Deres hovedårsag er, at processen er overraskende let, når du har de rigtige værktøjer på plads. Du er ved at lære, hvor nemt denne proces kan være, og når du er færdig, har du en start på din næste build.

Hurtigt layout med HTML5

HTML5 bringer et sæt fremragende nye strukturelementer, der gør det nemmere at hurtigt gemme et dokument med færre klasser og ids. Når du har forstået formålet med disse elementer, vil du være i stand til at oprette et groft sidelayout på få minutter.

Hvis du ikke er bekendt med disse nye elementer, er det en hurtig introduktion. De nye elementer giver en renere dokumentstruktur end tidligere, samtidig med at du frigiver dig til at bevæge dig væk fra en stor brug af divs. Lachlan Hunt beskriver disse elementer pænt i " En forhåndsvisning af HTML5 ”:

Det article elementet repræsenterer et uafhængigt afsnit af et dokument, en side eller et websted. Det er egnet til indhold som nyheder og blogindlæg, forumindlæg og individuelle kommentarer.
Det section element repræsenterer en generisk sektion af et dokument eller en applikation, såsom et kapitel.
Det header elementet repræsenterer overskriften til et afsnit. Headers kan indeholde mere end bare sektionens overskrift; Det ville for eksempel være rimeligt at inkludere underoverskrifter, versionshistorikoplysninger og bylinier.
Det nav Elementet repræsenterer et afsnit af navigationsforbindelser. Det er velegnet til både hjemmesidernavigation og indholdsfortegnelse.
Det aside element er for indhold, der er tangentielt relateret til indholdet omkring det, og det er nyttigt til at markere sidebjælker.
Det footer elementet repræsenterer foden af en sektion. Den indeholder typisk detaljer om det pågældende afsnit, som forfatterens navn, links til relaterede dokumenter og ophavsretsdata.

I mit eksempelwebsted ønsker jeg en centreret side med et overskrift, et sidebar til venstre, et område for hovedindholdet og en footer. Jeg har brugt HTML5 elementer til at markere strukturen med en article element til at indeholde alt.

Example
>

Disse elementer og divs er dimensionløse og usynlige, medmindre du angiver stilattributter eller placerer indhold i dem. For at gøre dem brugbare skal vi midlertidigt tildele højder til dem. Vi bør også indstille HTML-elementerne til display: block; så browseren genkender dem (ekstra arbejde er påkrævet for IE).

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

Før vi placerer elementerne, skal vi kunne visualisere layoutet. Den ideelle løsning til visualisering af strukturen uden indhold ville være let at fjerne senere og ville ikke påvirke designet.

Mulighed 1: Outlines

Omridset indstillingen er kompatibel med alle moderne browsere og påvirker ikke bredden af elementer, mens border attributtet gør.

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

Mulighed 2: HSLa

HSLa (eller endda RGBa) giver dig en bedre repræsentation af elementernes hierarki, fordi opaciteten vil gøre overlappende elementer mørkere. Men hvis du planlægger at have grundlæggende baggrundsfarver i mock-up, kan denne metode måske ikke fungere godt.

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

Positionering

Metoden til placeringselementer er et spørgsmål om personlig præference, og du har masser af muligheder: måleværktøjer i browseren eller operativsystemet, baggrundsgitterbilleder (som jeg har valgt), CSS-rammer med net og layouthjælp eller software som f.eks. Dreamweaver. Placering er den vigtigste del og skal fungere korrekt fra begyndelsen. Koden du skriver her vil sandsynligvis forblive i det endelige produkt.

I mit eksempel har jeg givet siden en fast bredde, med et sidebjælke til venstre og indhold til højre, både mellem overskrift og sidefod.

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

Gennem hele processen er jeg i stand til at se hver sektion og se, hvor den vil blive vist. Her er resultatet:

Du skal ikke bekymre dig om browserens kompatibilitet, før du kommer til det endelige produkt. Jeg anbefaler kraftigt at lade notater via CSS kommentarer, markere hvilke områder du skal komme tilbage til (hvilket primært vil være de selektorer og attributter, der kræver ekstra pleje for bestemte browsere).

Prototyping indhold

Når layoutet er gennemført, skal du muligvis tilføje prøveindhold. Den mest almindelige metode i dag er at smide klumper af Lorem Ipsum og vandmærket stock photography på siden. Hvorfor genopfinde hjulet?

HTML Ipsum er en glimrende hjemmeside, der indpakker Lorem Ipsum-tekst i fælles mark-up. At kunne gribe alt på en side kunne ikke være lettere.

PlaceHold.it tilbyder stedholder billeder i enhver størrelse, du har brug for ved at kalde hvert billede via en URL-anmodning (f.eks http://placehold.it/350x150 , hvor den første værdi er bredden og den anden højden):

PlaceKitten fungerer nøjagtigt som PlaceHold.it, undtagen med cuter billeder:

I stedet for at tilføje avanceret JavaScript til kort, kan du trække et grundlæggende kort som et billede via Google Static Maps . En API-nøgle eller en unik underskrift er påkrævet, men du skal alligevel få det, hvis det endelige produkt indeholder et kort.

Simulerende adfærd

Moderne websites indeholder funktionalitet, der er svært at kommunikere via statiske trådrammer: Udvidelse og sammenbrud af elementer, overgange, træk og slip, dynamiske menuer osv. Du skal alligevel bruge et JavaScript-bibliotek, så i øjeblikket læser et bibliotek og scripting i nogle grundlæggende funktionalitet ville ikke skade.

Du kan undgå en download ved at indlæse jQuery fra sit indholdsnetværk. Efterligne den påtænkte adfærd med nogle få funktioner i stedet for at skrive den faktiske kode. Hvis et element f.eks. Skal vises, når der klikkes på et link (f.eks. Et indloggningsvindue eller kontaktformular), skal du derefter bygge en hurtig trådramme i vinduet, gemme det som standard, og brug derefter jQuery til at afsløre det på klik.

Så længe du gør lige nok arbejde til at efterligne adfærd, vil klienten kunne se resultatet for sig selv, snarere end at skulle hælde over en række flowdiagrammer eller forklaringer.

Simulerende stater

Hvis du opretter wireframes til en webapplikation i stedet for en hjemmeside, kan du muligvis hurtigt vise flere stater på en enkelt side. Du kan oprette forskellige kopier af wireframe, hver ændret for at vise en bestemt tilstand, eller du kunne bruge PolyPage .

PolyPage er en jQuery-plugin, som giver dig mulighed for at bruge klasser i din mark-up til at repræsentere elementer, der ville være til stede for forskellige stater (for eksempel logget ind og logget ud). Du kan skifte hver stat med et link, hvilket hjælper dig med nemt at demo forskellene til klienten uden at have brug for flere sider.

Endelige tanker

Mens de originale designs altid ser smukke ud på papir eller i PDF, har det flere fordele at opbygge HTML-siderne lige fra starten.

Du sparer tid, du ville have tilbragt at genskabe designet i kode. Du undgår forvirringen af at undre sig over, hvorfor det endelige produkt ikke ser ud som det originale. Og du sparer både dig og klientens tid, penge og nerver.

Michael Botsko er webudvikler og webteknologinstruktør i Portland, Oregon. Han nyder at arbejde på både klient og open source projekter med Botsko.net , LLC. Når han ikke arbejder, nyder han tid med sine to børn og vidunderlige kone.

Hvilke hurtige layout- og prototypeværktøjer har jeg overset? Hvad er fordelene ved at designe først og bygge senere?

html5 programmering CSS3 wireframing html kode