Accentsconagua
Blauw. Nee, yel…
Hou je mond! Wil je stil zijn?! Maar je bent als één gekleed… Camelot! Je stemt niet voor koningen.
Share
We gaan een eenvoudige, responsieve websitenavigatie bouwen. Onze oplossing zal ons helpen de nadruk te leggen op de inhoud van onze pagina, misschien wel de topprioriteit bij het ontwerpen voor mobiel. Er is geen JavaScript bij betrokken en we pakken het aan via een Mobile First-aanpak.
Als u extra hulp nodig hebt, kunt u contact opnemen met een van de ontwerpers en ontwikkelaars van Envato Studio. Ze kunnen bugs en problemen voor u oplossen of zelfs een volledig nieuw ontwerp maken.
U kunt bijvoorbeeld een vast website-ontwerp omzetten in een volledig responsief ontwerp voor slechts $ 350, en het geheel wordt binnen zeven dagen voltooid.
Als je Luke Wroblewski's Mobile First hebt gelezen, ben je bekend met zijn verklaring dat:
Als algemene regel geldt dat inhoud voorrang heeft op navigatie op mobiele apparaten.
Hij bedoelt hiermee dat mobiele gebruikers vaak op zoek zijn naar onmiddellijke antwoorden; ze willen de inhoud waarnaar ze op zoek waren, niet meer navigatie-opties.
Veel sites, zelfs responsieve, houden zich aan de conventie dat navigatie bovenaan elke pagina staat. Deze aanpak kan bruikbaarheidsproblemen op mobiele apparaten veroorzaken, omdat mobiele gebruikers vaak te kort zijn aan twee dingen: schermruimte en -tijd. Als de primaire navigatie bovenaan een pagina wordt geplaatst, is de kans groot dat deze een volledig mobiel scherm versluiert. Dit probleem wordt nog verergerd door de grote aanraakvriendelijke menuelinks, waardoor gebruikers over de navigatie moeten scrollen om waardevolle inhoud te vinden.
Neem dit voorbeeld van London & Partners:
Een perfect fatsoenlijk responsief ontwerp, maar op standaard mobiele viewport-dimensies (320 x 480 pixels) is alles wat je echt ziet een navigatiemenu. Zeker, net aangekomen op de startpagina, wil ik iets anders zien dan dat? Het zijn niet alleen Londen en Partners die dit demonstreren - het is een praktijk die te zien is in veel responsieve ontwerpen op internet.
We hebben een paar manieren gezien om dit te omzeilen, vaak leunend op jQuery om dingen voor ons uit te zoeken. Neem Chris Coyier's uitleg van het reactievoltooimenu Five Simple Steps.
Met behulp van jQuery wordt een duplicaat van het menu gemaakt in de vorm van een vervolgkeuzelijst, aanvankelijk verborgen voor weergave met CSS. Wanneer mediaquery's een kleiner scherm detecteren, maken ze de vervolgkeuzelijst zichtbaar en is de originele navigatie onzichtbaar. Dit is perfect voor mobiele apparaten, omdat dropdowns minimaal onroerend goed in beslag nemen en gebruik maken van de specifieke gebruikersinterface van het apparaat (zoals de scroller van de iPhone).
Je kunt ook je navigatie verbergen, maar deze in beeld laten verschijnen wanneer op een knop 'menu' wordt geklikt. Je kunt dit effect in actie zien met de nieuwste Bootstrap van Twitter.
Kleinere schermen verbergen de navigatielinks en geven een 'lijst'-pictogram weer (snel geaccepteerd als' menu ') dat de navigatie onthult wanneer erop wordt geklikt. Nogmaals, mobiele bezoekers worden gepresenteerd met zo veel mogelijk inhoud, maar hebben navigatie-opties beschikbaar als ze dat willen.
We gaan een techniek gebruiken die besproken is door Luke, die gebruik maakt van CSS en een Mobile First-aanpak. Wat bedoelen we met een Mobile First-aanpak? Simpel gezegd, we gaan een overzichtelijke mobiele lay-out ontwerpen en vervolgens het ontwerp voor grotere schermen geleidelijk verbeteren. We gebruiken mediaquery's die gestaag toenemende schermformaten detecteren, terwijl we stijl en functies toevoegen.
Dit betekent dat alleen het minimale beer van CSS en bronnen wordt geladen wanneer ons ontwerp wordt bekeken met een mobiel apparaat. Het betekent ook dat oudere versies van IE (die mediaquery's niet herkennen) worden gepresenteerd bij de mobiele site. Bekijk Joning Korpi's Leaving Old Internet Explorer Behind voor meer informatie hierover.
Ik zal de ideeën achter deze oplossing uitleggen als we doorgaan, dus laten we voorlopig wat markup samenvoegen, te beginnen met een blanco HTML5-document.
Mobile First Responsive Navigation
Notitie: Vergeet de metatag van Viewport niet!
Als je dat hebt gedaan, voegen we wat paginastructuur toe. Straight-forward dingen en alles voor de doeleinden van onze demonstratie. Ik heb vultekst van Monty Python's Holy Grail gebruikt (bedankt Chris Valleskey), wat een leuke manier is om een lach op je gezicht te toveren terwijl je werkt :)
Nav
Blauw. Nee, yel…
Hou je mond! Wil je stil zijn?! Maar je bent als één gekleed… Camelot! Je stemt niet voor koningen.
We willen een struikgewas!!
Kijk, mijn liege! Hou je mond! Maar je bent als één gekleed…
- De neus?
- Shh! Ridders, ik bied je welkom in je nieuwe huis. Laten we naar Camelot rijden!
- Kijk, mijn liege!
Help, help, ik word onderdrukt!
Waarom? Luister. Vreemde vrouwen die in vijvers liggen die zwaarden verdelen, is geen basis voor een regeringssysteem. Opperste uitvoerende macht is afgeleid van een mandaat van de massa, niet van een of andere farcische aquatische ceremonie. Wees stil! Een newt?
We hebben een standaard html-pagina samengesteld, dus nu is het tijd voor de hoofdattractie; onze belangrijkste navigatie ...
Ja, dat heb je goed gezien, we hebben dat toegevoegd op regel 68, na het laatste artikel. Vergeet niet dat we nu ontwerpen voor mobiele apparaten, we zullen later de desktop bespreken. We hebben de navigatie onder aan onze pagina geplaatst, zodat deze helemaal niet in de weg staat. We gaan nu een link bovenaan onze pagina plaatsen zodat gebruikers de navigatie kunnen vinden als ze dat willen.
Nav
Menu
Afhankelijk van hoe u normaal gesproken webprojecten start, wijkt deze stap af van uw gebruikelijke workflow. Ik heb altijd gevonden dat de reset van Eric Meyer een solide basis is om vanuit te werken, vooral omdat hij het onlangs heeft aangepast. We voegen zijn resetregels toe aan een stylesheet om onze css uit te schakelen:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 OPMERKING: WERK IN VOORUITGANG GEBRUIK MET VOORZICHTIGHEID EN TEST MET ABANDON * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , acroniem, adres, groot, citeren, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, figuurcaption, figuur, footer , header, hgroup, menu, nav, sectie, samenvatting, tijd, markering, audio, video margin: 0; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; lettertype: inherit; vertical-align: basislijn; / * HTML5 weergave-rol reset voor oudere browsers * / artikel, opzij, details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block; body line-height: 1; ol, ul lijststijl: geen; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; / * vergeet op geen enkele manier inserts te markeren! * / ins text-decoration: none; del text-decoration : line-through; table border-collapse: collapse; border-spacing: 0;
Op het moment ziet onze pagina er vrij weinig inspirerend uit ...
... dus laten we de dingen verbeteren door enkele eenvoudige styling toe te voegen.
/ * begin met onze stijlen * / body font: 16px / 1.4em 'PT Sans', sans-serif ;; kleur: # 1c1c1c; p, ul margin: 0 0 1.5em; ul lijststijl: schijf; opvulling: 0 0 0 20px; a color: # 1D745A; h1 h2 font-family: 'PT Serif', serif; lettertypegrootte: 32px; regelhoogte: 1,4em; marge: 0 0, 4em; lettertype: vet; / * layout * / .wrapper artikel border-bottom: 1px solid # d8d8d8; opvulling: 10px 20px 0 20px; marge: 10 px 0; / * header * / header background: # 1c1c1c; opvulling: 15px 20px; / * kortere clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header: before, header: after content: ""; -display: table; header: after clear: both; / * Voor IE 6/7 (trigger hasLayout) * / header zoom: 1; h1.logo a color: # d8d8d8; tekstdecoratie: geen; lettertype: vet; text-transform: hoofdletters; lettertypegrootte: 20px; regelhoogte: 22 px; zweven: links; letter-spacing: 0.2em; a.to_nav float: right; kleur: #fff; achtergrond: # 4e4e4e; tekstdecoratie: geen; opvulling: 0 10px; lettergrootte: 12px; lettertype: vet; regelhoogte: 22 px; hoogte: 22 px; text-transform: hoofdletters; letter-spacing: 0,1em; -webkit-border-radius: 2px; -moz-border-radius: 2px; grensradius: 2px; a.to_nav: hover, a.to_nav: focus color: # 1c1c1c; achtergrond: #ccc;
Dit zijn allemaal basismateriaal (lettertypen, lijnhoogten, kleuren enz.), Wat tot nu toe cruciaal is, is dat ik de 'menu'-knop heb gestileerd om naar rechts te zweven binnen de , waar je vaak zou verwachten dat navigatie wordt gevonden.
Als je erover zweeft, zie je de hover-status - niet noodzakelijk voor apparaten met aanraakschermen, maar deze ervaring wordt ook geleverd aan niet-coöperatieve Internet Explorer-versies. Wat we hebben gedefinieerd ten behoeve van mobiele gebruikers is een :focus staat. Het is hetzelfde als de : hover staat, maar biedt cruciale feedback voor apparaten met aanraakschermen. Onze gebruikers zullen weten ze zijn succesvol geweest in het aanraken van de menuknop.
Hoe dan ook, klik erop en je wordt naar de navigatie gebracht, super.
Laten we nu het menu een beetje stylen.
We gaan onze primaire navigatie eigenlijk net zo stylen als het voorbeeld van London & Partners dat eerder werd getoond, behalve deze keer staat het duidelijk onderaan deze pagina ...
/ * navigatie * / #primary_nav ul lijststijl: geen; achtergrond: # 1c1c1c; opvulling: 5px 0; #primary_nav li a display: block; opvulling: 0 20px; kleur: #fff; tekstdecoratie: geen; lettertype: vet; text-transform: hoofdletters; letter-spacing: 0,1em; letter-spacing: 0,1em; regelhoogte: 2em; hoogte: 2em; border-bottom: 1px solid # 383838; #primary_nav li: last-child a border-bottom: none; #primary_nav li a: hover, #primary_nav li a: focus color: # 1c1c1c; achtergrond: #ccc; / * footer * / footer font-family: 'PT Serif', serif; lettertype-stijl: cursief; text-align: center; lettergrootte: 14 px;
Veel beter. We hebben de menukoppelingen mooi en groot gemaakt (lees meer over Touch Target Sizes op Luke Wroblewski's eigen blog) en hebben opnieuw een :focus staat voor gebruikersfeedback.
Het is ook duidelijk geworden dat we een 'top'-link hebben opgenomen die gebruikers indien nodig terugbrengt naar de top van de pagina.
OK, we hebben onze eenvoudige mobiele lay-out afgehandeld, dus nu is het tijd voor een aantal progressieve verbeteringen. We gaan mediaquery's gebruiken om te bepalen wanneer onze mobiele lay-out niet langer geschikt is.
Maar op welk moment wordt het ongepast? Er zijn veel manieren om mediaquery's te benaderen, maar we gaan werken vanuit de basis dat een mobiel kijkvenster 320px x 480px is. Het is 320 px breed als het wordt bekeken in portret, 480 px breed als het in landschap wordt bekeken, dus we konden met recht onze eerste mediaquery instellen om elk scherm groter dan 480px te detecteren.
De volgende stap omhoog is echter aantoonbaar de tablet. De iPad heeft een resolutie van 980px x 768px, dus we kunnen er gerust van uitgaan dat alles wat kleiner is dan 768px geschikt is voor onze mobiele lay-out. Alles dat groter is dan 768 px kan overweg met meer desktopachtige navigatieslay-outs.
We kunnen daarom beginnen met het toevoegen van regels, dus laten we een mediaquery instellen:
/ * mediaquery's * / @media alleen scherm en (min-breedte: 768px)
Deze mediaquery voert alle stijlen uit die daarin zijn opgenomen wanneer het kijkvenster ten minste 768 px breed is. Let op de opname van de enkel en alleen zoekwoord, waardoor Internet Explorer 8 niet helemaal in de war raakt en de query probeert te verwerken. Zie mijn eerdere uitleg voor details.
Laten we de boel uitschakelen door onze 'menu'-knop te laten verdwijnen:
@media only screen en (min-width: 768px) a.to_nav display: none;
Met de browser iets breder gemaakt, wordt de menuknop niet meer weergegeven.
Nu moeten we onze primaire navigatie naar de bovenkant van de pagina brengen. We doen dat door het uit de documentstroom te verwijderen en het absoluut bovenaan te plaatsen.
@media only screen en (min-width: 768px) a.to_nav display: none; .wrapper positie: relatief; breedte: 768 px; marge: automatisch; #primary_nav position: absolute; top: 5px; rechts: 10px; achtergrond: geen; #primary_nav li display: inline; #primary_nav li a float: left; rand: geen; opvulling: 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; grensradius: 2px;
Om dat mogelijk te maken, moeten we eerst de ouder ervan maken (.wikkel) relatief gepositioneerd. We kunnen dit hier in de mediaquery doen, of bepalen aan het begin van ons stylesheet.
Zodra het menu absoluut is gepositioneerd, moeten we een deel van de ankerstijl verwijderen. Er is niet veel te doen, maar we hebben de lijstitems nodig om inline weer te geven en we moeten de randen en overdreven padding van de ankers verwijderen. De zweeftoestanden die we eerder hebben gedicteerd, zijn natuurlijk prima, dus we hoeven ze niet te veranderen.
Als je oplet, heb je gemerkt dat we nog steeds een 'top' link in de navigatie hebben - we hebben dat niet echt nodig meer eh?
We kunnen dit op verschillende manieren verwijderen, maar we weten dus zeker wat er aan de hand is. Laten we eerst een klasse aan het lijstitem toevoegen:
En dan kunnen we er vanaf onze media-query van afkomen:
#primary_nav li.top display: none;
Dat is het! Er zijn tal van manieren om op dit idee voort te bouwen (het implementeren van het lijstpictogram dat er maar één is) en natuurlijk kunt u doorgaan met het toevoegen van mediaquery's voor groeiende schermen. Hopelijk heb je nu de basis om dit te doen. We hebben een eenvoudige, responsieve, aanraakvriendelijke navigatie gemaakt, van een eerste mobiele aanpak waarbij de nadruk ligt op inhoud en bruikbaarheid. Wie kan er meer vragen??!
Een paar nuttige links genoemd in de tutorial, allemaal opgestapeld in een handige lijst:
Er zijn veel mobiele eerste ontwerpsjablonen beschikbaar op Envato Market voor onmiddellijk gebruik in uw projecten.
Bijvoorbeeld, eerst is een mobiel eerste webapp / admin dashboardthema met een platte UI gebaseerd op Bootstrap 3. Het is lichtgewicht maar met veel componenten die aan uw behoeften voldoen. Het is ook volledig responsief en de widgets en componenten zijn eerst mobiel.
eerste - Mobile First Web App Theme
