WEBP – Nav Bar, page, page title, permalink,

En navigasjons meny må være enkel å bruke og lett å forstå for brukere som skal benytte seg av nettsiden. 1. Hvor er jeg? 2. Hvor har jeg vært? 3. Hvor kan jeg gå? Under viser jeg noen eksempler på hvordan en nav bar/meny kan se ut og hva en nav bar er:

http://www.w3schools.com/css/css_navbar.asp

W3schools er en side jeg alltid benytter når jeg trenger en oppdatering på hva noe er og hva jeg kan gjøre med det. På nettsiden finnes det mange eksempler, og man kan selv prøve de ut. Dette synes jeg er veldig lærerikt og gir mye kunnskap.

Først hadde jeg planer om å bytte ut farger i nav baren og gi de ulike effektene forskjellige farger; 1. den statiske grafikken som vises når pekeren ikke er over knappen, 2. grafikken som vises når pekeren er over knappen, 3. grafikken som vises når pekeren klikker på knapper, 4. et område som er mottakelig for perkerbevegelse, ikke synlig grafikk.
Jeg startet med å jobbe med hvilke farger som passet sammen, og som passet til kunden. Deretter begynte jeg å tenke å hvilke fonter som ville passe. Jeg benyttet moodboardene fra tidligere innlegg til dette.

Senere spurte jeg hva kunden syntes om denne idéen, og vi diskuterte nok engang hvilke sider som var nødvendige til nettstedet. Nå kom vi frem til at de ulike sidene skulle være: Front (istedenfor Home) – innholde et bilde samt noe innledende tekst om merket, About eller Story – hvordan Steel Feather ble til, hvordan det lages, Made in Japan, om denim etc, Collection (istedenfor Products) – bilder og beskrivelse om produktet/produktene, Lookbook (istedenfor Gallery) – bilder av maskiner, fabrikker, arbeidere, detaljer, inspirasjon etc. Alle bilder skal være merket med en Steel Feather logo, News – blogg innlegg, fungere som kommunikasjon, oppdatere ang. produkter, kontakter, legge ut bilder og tekst, Stockists – hvor man kan få kjøpt Steel Feather jeans, dette vil bli oppdatert senere og Contact – side med kontakt informasjon.

Etter en del research på konkurrentenes nav barer forklarer kunden at han ønsker en nav bar med fonten som blir benyttet i logoen, altså fonten LHF Indian Script 2. Dette mener jeg kun fører til problemer dersom dette er en kjøpt font, og ingen har denne installert på sine maskiner. Den eneste løsningen blir å lage små bilder med fonten og titler som linker til sidene. Dette er ikke noe jeg har vært borti før, og jeg trodde på dette tidspunktet at dette var umulig. Her er noen screenshot av konkurrentenes menyer:

Det siste eksempelet viser mer eller mindre hvordan kunden ønsker at nav baren skal være. Her har vedkommende brukt en font og laget bilder av dette, hvor man kan klikke seg videre til de ulike sidene.

Dette har vært et stort og krevende prosjekt for meg, og fra første tanke om at dette ikke er mulig til at jeg nå har fått det til har vært en lang prosess. Her er noen kilder jeg har benyttet og sammenlignet for denne delen av prosessen, samt hvordan jeg skal legge til og benytte knapper til sosiale medier:

http://diythemes.com/thesis/rtfm/replace-wp-menu-text-links-image-sprites/

http://www.wpbeginner.com/plugins/how-to-add-custom-menu-images-in-wordpress/

http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/

http://letsbuildwebsites.com/social-media-buttons/

http://tutorialspot.wordpress.com/2011/05/22/how-to-add-social-media-buttons-to-your-wordpress-blog/

http://devilsworkshop.org/how-to-add-images-inside-wordpress-3-0-custom-menu/

Her er et bilde av hvordan nav baren først så ut etter en del testing av farger. Vi kom frem til at hvit tekst mot svart bakgrunn er det beste for lesbarheten, samtidlig som det i tillegg er stor kontrast.

Først testet jeg størrelse på font og kom frem til at 38 pt var det mest optimale for nav baren og lesbarheten på fonten. Dette gjorde jeg i Photoshop, passet på at alle titler var plassert på samme sted og lagret i hvit farge med transparency– lagret som .png

Deretter lastet jeg opp bildene i cPanel, i images mappen. Videre logget jeg inn på WordPress, under Dashboard, Appearance -> menus. På venstre side kan man velge noe som heter Custom links – fyll inn URL (permalink til siden) og deretter label (koden <img src=»…»>), samt title attribute. Det var en prøvelse å få til navigation label riktig hver gang. Her er et eksempel på hvordan home linken ser ut:

Dette gjorde jeg til alle sidene og knappene som nav baren består av, totalt 8 stk. Slik ser resultatet ut:

Denne linken har jeg benyttet angående permalinker, altså URL til hver individuelle side og innlegg. Dette er noe man finner under Dashboard i wordpress, under Settings -> Permalink.

http://codex.wordpress.org/Using_Permalinks : » %postname% A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI.»

Videre har jeg prøvd å funnet ut av hvordan man blir kvitt page title under hver side. Eksempel: en side heter About og under menyen i det hvite feltet står det About som overskrift. Dette ønsket jeg ikke, jeg ønsket å kunne skrive egne overskrifter, og velge font på disse.

http://www.creativeworld.com.au/blog/web-design/how-to-remove-the-page-title-from-your-wordpress-homepage/

http://wordpress.org/support/topic/twentyeleven-hideremove-page-title

http://voodoopress.com/playing-with-fonts-on-a-twentyeleven-child-theme/

Da var det mest krevende tekniske delen av prosessen over. Neste innlegg vil bli om fotografering, redigering og plugins.

– Annette B. D.

Advertisements

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s