Skeleton plane & Responsiv webbdesign med CSS

Transkript

1 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor GarreJs modell plan 4 Skeleton plane GränssniJ, formulär, layout CSS SPl för formulär (se även lab L8, senare i kursen) Responsiv webbdesign förändring av layouten med media queries 2

3 Plan 4: Skeleton plane Göra GränssniJ för interakpon. Val av interakponsobjekt. Budskap Förstå Gå HiJa Se var man är Olika former av navigering. Stöd för navigering. SPmuli, feedback. OrganisaPon och layout för formulär. Layout för sidorna. 3

4 Exempel: analys av interak0on på en webbplats Jämför med det GarreJ (2011, s. 86f) säger om "Error Handling" (DeJa togs upp i kapitell 5 som beskriver föregående plan, men bör nu repeteras och beaktas i analysen.) Hur hanterar vi situaponer där användaren kan göra "fel"? Förhindra RäJa Återställa Analys av en biljejbokning på Studera t.ex. felmeddelanden och feedback som ges. Studera även vilka interakponsobjekt som används för valen. GarreJ, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 4

5 Exemplet Gretas blommor Se föreläsning F3 och F6 Navigering Global navigering Lokal navigering Supplementary navigering Courtesy (navigering) 5

6 Exemplet Gretas blommor GränssniP för formulär Formulär på webbplatsen Sökrutan Kontakeormulär Beställningsformulär kontakt.htm" contact.css" Knapp för reset/ångra eller ej? Nya input-typer i HTML5 formtest.htm" 6

7 Exemplet Gretas blommor Från lek0on 5: InterakPon för aj beställa blomsterbukej eller krans för leverans: Det går endast beställa en produkt. 1. Gå in på sorpment för bukejer eller kransar. 2. Klicka på köpknapp för önskad produkt. 3. Man kommer då Pll ej formulär för följande: a. Datum för leverans b. MoJagare Namn, adress, telefon, om varan får lämnas vid dörr om mojagare ej är hemma c. KorJext d. Beställare Namn, epost, telefon e. BetalningssäJ Faktura: adress Kort: kortnummer, etc. (betaltjänst) f. Acceptans av köpvillkoren Beställningsformuläret Delas in i avdelningar enligt rubriker nedan. Beställningsformuläret Vald produkt Namn, pris, leveransavgil Leveransdatum (går endast beställa max tre månader i förväg) Dag, månad (popup-menyer) MoJagaren order.htm" order.css" Namn, gatuadress, postnummer, ort, telefon (texeält) Får lämnas utanför dörren (kryssruta) Kort Pll blommorna Text (textarea) Beställaren Namn, epost, telefon (texeält, telefon ej nödvändigt aj ange) Betalningsuppgiler (radioknappar för val av faktura eller kreditkort) - Faktura: gatuadress, postnummer, ort (texeält) - Kreditkort: (går vidare Pll betaltjänst, då man klickar på beställknappen) Acceptans av köpvillkoren (kryssruta) Beställningsknapp (submit-knapp) 7

8 Exemplet Gretas blommor Responsiv Webbdesign Steg från föreläsning F6: 1. Flexibel layout (fluid grid) max-width för #wrapper och footer procentvärden för width samt margin och padding för övriga element i layouten som har värden för bredd justering av storlek av bakgrundsbilden i header 2. Justering av bilder (flexibla bilder) max-width:100% för img-taggarna i main 3. Media queries i CSS-koden ändra Pll en kolumn ta bort float för bilder ändra navigeringsmenyn 4. Meta-tagg för viewport i HTML-filerna <meta name="viewport" content="width=device-width, inipal-scale=1.0"> 8

9 Kravspecifika,on Kontroll mot kravspecen Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukejer, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bupken och öppevder ska anges. - Interiörbilder från bupken samt kort presentapon av personalen (namn och bild). - Kontakeormulär. - Förslag på blommor eler vad de ska användas Pll, födelsedag, bröllop, begravning - Beställningsformulär där Plläggsavgiler och totalpriset hela Pden visas. Funk,onellt - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukejer och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Grön: Helt uppfyllt Gul: Nästan uppfyllt Röd: Delvis uppfyllt 9 Teknisk specifika,on - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner Pll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner).