Et kig på design af mobile enheder
Da den første iPhone blev frigivet, tog den tech verden med storm. Siden da har det været næsten 5 år, og smartphone-markedet er ramlet op i popularitet, og selv Microsoft har fået en konkurrence med sine Windows 7-operatører og partnere. Med så mange internetbrugere på deres smartphone i dag er det fornuftigt at forvente, at antallet af mobile websteder øges aggressivt.
Design for mobilwebben er imidlertid en helt anden operation med fælles webdesign. Vores hjemmesider er designet til stor skærm, men smartphoneens skærmstørrelse er alt for lille i forhold til det, hvilket fører til irriterende brugbarhedsproblemer. Nye design standarder og praksis er stærkt påkrævet for en bedre mobil site design med jævn brugeroplevelse.
I denne vejledning ser vi ud til at designe et brugervenligt websted til smartphones mobilbrowsere. Jeg vil tale om de bedste metoder og nyttige udvikler værktøj til at designe en bedre mobil hjemmeside, så lad os komme ind i det efter hoppe!
Planlægger stærk brugeroplevelse
Når du opbygger en mobilwebsite, er det vigtigt at Husk altid på dine brugere, som i sidste ende din hjemmeside er designet og skabt for brugerne at nyde. Det er helt sikkert almindeligt for brugerne at forvente en mobilwebsted at opføre sig på samme måde som skrivebordsmiljøet holde brugeroplevelsen venlig bør være dit hovedfokus, samtidig med at du opbygger et vellykket mobilt websted.
Der er mange anvendelighedskoncepter at overveje til dine brugere. Disse overvejelser omfatter skærmstørrelse, inline billeder, hyperlinks, skrifttypestørrelser, og side navigation. Vi har skrevet om mobil brugervenlighed design for dig at skære dit websted for bedre brugervenlighed. Udover guiden skal du altid holde dig opmærksom på nye ideer at forbedre dit websted.
Planlægning af en stærk brugeroplevelse betyder også, at du skal overveje, hvordan en bruger vil interagere med din hjemmeside. På et skrivebord kan dit websted interagere med en mus og et tastatur, men på en smartphone bliver brugerne aflytning, zappe, og swiping deres vej rundt om dit websted. Du skal sandsynligvis designe webstedet på den måde, brugerne kan Få adgang til webstedet information nemt med disse fysiske bevægelser.
Hold sider Short & Sweet
Kød og kartofler på enhver hjemmeside er sideindhold. Hvert af dine websider indeholder betydelige mængder nyttig information til dine brugere, f.eks. tekst, fotos eller videoer. Du vil også finde nyhedsartikler og blogindlæg, der kører på for et par sider, hvilket kan hjælpe med at bryde op tekst, men det anbefales ikke til mobile enheder som teknikken kræver mere sideindlæsning, hvilket betyder mere ventetid på brugerens side.
Medmindre det er absolut nødvendigt, anbefaler jeg At holde dit sideindhold kort. Du bør også overveje, at det ser sødt ud af styling fonten til en meget større størrelse og måske flytte billeder til side. Med dit indhold på fuld skærm tiltrækker det naturligvis opmærksomhed, for ikke at nævne optimeringen gør scanning af siderne meget enklere. Det er også grunden til, at a enkelt kolonne layout passer perfekt til regningen.
I de fleste tilfælde vil mobilbrowsere ikke indlæse websiderne så hurtigt som stationære browsere, og det kan irritere dine læsere, derfor skal du optimere indholdet og hjemmesiden til højhastighedstastning af indhold. Du kan enten Forkort artiklen, mens du holder hele indholdet, eller simpelthen fjern unødvendige billeder. Placer dit fokus på enkelhed i stedet for skønhed.
Din kerne navigation er livredderen til dine besøgende på udkig efter at flytte mellem sider. På en mobil enhed vises skærmens links meget mindre af naturen, hvilket er meget sværere at trykke på. En væsentlig tweak for at løse dette problem er at maksimere skrifttypen og pladsen til dine navigationslinks, måske optager hele blokområdet. Alternativt kan du design navigationslinjen for at ligner den rigtige iPhone-applikationens faneblad, som den viste frem.
Opbygning af mobile CSS-stilarter
Nu hvor vi ved, hvordan du optimerer mobilwebstedet for bedre læsbarhed og brugervenlighed, ville det være godt at tale om CSS-stilarter. Hvert CSS stilark indeholder mange selektorer med egenskaber vedrørende skrifttyper, størrelser, positionering og displayindstillinger. Når det kommer til mobil, skal du være opmærksom på hvordan dine blokke falder på plads.
(Billedkilde: Smashing Magazine)
Et område at komme i gang er at Nulstil dit websteds wrapperbredder i procent. Det er almindeligt at bruge pixels som enheden til placering, linjens højde, skriftstørrelse og div's bredde, men når du beskæftiger dig med mobil, vil du have dine sider til at være væske og overgang mellem hver enhed naturligt. Indstilling af container divs til 100% bredde vil tillade indholdet at Fyld let mellem portræt / liggende tilstand uden at flyde over kanten.
Hvis du er en af de mennesker, der søger at strukturere hele dit layout, skal du sørge for dig slå alt sammen med a Nulstil. Også afsnit, overskrifter og navigationskoblinger skal alle indstilles til display: blok; så du får den lineære udskrivningstilstand. Placer margenerne og polstringerne igen for at fjerne opblussen fra dit layout. Undgå tabeller hvis det er muligt, da disse har tendens til at gøre buggy resultater mellem enheder.
Store billeder er også et besvær mellem enheder. De fleste af dine website billeder vil gøre større end 480px, og du kan ikke ønske at få dem til at bryde beholderen. Den første mulighed er at Indstil deres bredde på 100%, så billederne kan ændre sig naturligt. Det er sikkert muligt at Opret forskellige sæt billeder til dit websted og gøre dem anderledes baseret på browser agent, men ærligt dette tilføjer blot flere værker på din side, så prøv at Brug kun teknikken, når det virkelig er nødvendigt.
Design af hjemmesider til iPhone
Den mobile markedsandel er forholdsvis stor og opdelt, men Apple har fået et stort stykke af cirkel med deres iDevices. Både iPhone og iPad er mobile internetklare enheder med indbygget touchscreen-funktionalitet. De har den samme standardwebbrowser, Safari og en lang række andre muligheder.
Til iPhone-specifikke websites skal du målrette skærmens størrelse. Den faste skærmstørrelse er indstillet til 320px ved 480px til ældre iPhone-modeller og 640px ved 960px til iPhone 4 og iPhone 4S.
iPhone skærme er begrænset til plads. Du skulle have en blok af indhold, der spænder ned så længe som nødvendigt. At holde elementer i en enkelt kolonne vil spare dig for hovedpine og tillade et fluid layout til “Udfyld” både portræt og liggende tilstande. Til dette skal du sandsynligvis udvikle en anden skabelon og finde en måde at kontrollere, om din besøgende bruger en iPhone. Det lille PHP-uddrag nedenfor skal fungere godt:
Grundlæggende trækker logikken vores globale $ _SERVER variabel for HTTP-agenten og kontrollerer om ordet “iphone” vises overalt. Hvis ja, så ved vi, at vores besøgende bruger en iPhone, og derfra kan vi lægge lidt anderledes HTML eller endda et helt nyt skabelonlayout! Dette kunne også bruges til inkludere et iPhone-specifikt stilark, ændre dine sidetitler, fjern billeder eller næsten alle dynamiske effekter.
Når det kommer til at servere nye stilarter, er der en nemmere måde. Som nævnt tidligere er den maksimale skærmstørrelse til iPhone 960px bred. Derfor med nye CSS3 medie forespørgsler kan du tilføje stilarter direkte ind i dit websteds primære stylesheet, der vil kun display på iPhone. Nedenfor er et lille eksempelkode:
@media skærm og (maks. enhed bredde: 960px) / * iPhone css * /
Dette virker fordi CSS kan nu registrere browsere og deres egenskaber. Maks. Skærmbredde er en af egenskaberne, som også kan detekteres.
Alt-i-alt mobilwebsted til iPhone-enheder er ikke for svært at designe, for der er bare for mange eksempler at henvise til, f.eks. CSS iPhone. Hold dig selv travlt med at studere og vær ikke bange for eksperimentere med nye teknikker i UI design.
Mobile jQuery Scripting
Størstedelen af webudviklere i forreste ende er bekendt med jQuery-biblioteket. Det giver nogle fantastiske stenografi for kodende effekter, animationer, dropdown menuer og en lang række andre in-browser funktionalitet, og det bliver bare mere fantastisk med meddelelsen om jQuery Mobile. det er anbefales ikke at hoppe i tech direkte og læs dit websted med effekter overalt, men til test kan den avancerede funktionalitet spille meget godt.
jQuery Mobile er lidt anderledes end jQuery, da det giver dig et fuldt miljø at bygge videre på. Når du arbejder med deres filer, er de ikke kun JavaScript, men også CSS-stilarter til knapper, links og overgangseffekter. Du skriver stadig websider i HTML-kode, men jQuery Mobile-teamet har leverede mange valgfrie UI-designfunktioner. Der er meget, vi kan gøre med denne ramme, men siden rammen er stadig i beta, lad os holde os til enkle effekter.
En lille tutorial på DevGrow blog giver nogle fantastiske eksempler. Det officielle websted tilbyder også demoer, som du kan prøve. Bemærk, at vi bruger HTML-attributten, data-overgang at tilføje animationseffekter med nogen af de foruddefinerede værdier. Disse omfatter slide, pop, flip, fade osv. Tjek det lille DevGrow eksempel for at få en smag af disse effekter.
Virkningerne og overgange er ret pæne, og det faktum at du kan opbygge en hel mobil grænseflade strengt med jQuery, er også et stort fremskridt for denne platform, men med platformen kun i beta, vil jeg ikke anbefale at opbygge hele dit mobilsite med deres bibliotek, især med det faktum, at det er understøttes ikke af alle større smartphones på tidspunktet for skrivningen (især Windows Phone 7), men det vil sikkert blive bedre med tiden.
I sidste ende anbefaler jeg at gøre mig bekendt med denne nye mobile ramme Før implementere live på ethvert projekt.
Nyttige udviklerværktøjer
Mobiludviklere kigger ikke kun på kodnings- og designressourcer. Der er også en stor efterspørgsel efter softwareværktøjer og IDE'er, for ikke at nævne kraftfulde mobile rammer. Webudvikling er en vanskelig opgave, der kræver en del engagement, men ved at bruge ekstra værktøjer bliver arbejdet meget lettere.
Opera Mobile Emulator
Leder du efter en måde at kontrollere, hvordan din mobilwebsite udfører? Dette kan være en stor smerte, hvis du ikke har en smartphone med internetadgang. Eller du vil bare ikke bruge din smartphone til at teste webstedet hver gang, en opdatering bliver skubbet på din server. Nå, Opera Mobile Emulator er et fantastisk stykke software til at teste din mobilwebsite.
Emulatoren støtter rundt 20 mobilprofiler f.eks. Samsung Galaxy S, HTC Desire, og endda tablet som Motorola Xoom. Det er også muligt at indstille brugerdefineret opløsning og pixeldensitet til intensive test formål. Bedst af alt, du behøver ikke at gøre for meget konfigurationsarbejde, bare få få klik, og du er god at gå.
Downloaden er helt gratis, og softwaren kører både i Mac OS X og Windows. Deres udviklere har svært ved at skabe rigtige webstandarder og tilpasse deres mobilgengivelsesmotor. Jeg anbefaler deres andre dev værktøjer, hvis du leder efter ekstra værktøjer til at hjælpe dig undervejs.
PhoneGap
Der har ikke været mange API'er udviklet via HTML5 til at opbygge solide mobilapplikationer. Det mobile landskab har især manglet disse typer af hjemmesider, hvilket er netop derfor, at PhoneGap fylder nicheen så godt. Deres platform gør det nemt for dig konstruere HTML5-baserede apps som native applikationer på 6 forskellige platforme.
Processen virker ved først at komprimere din kode og sende den gennem PhoneGaps applikationsramme. Derefter kan dine apps nå en stor del af mobilmarkedet, herunder Android, iOS, Windows Phone 7 og BlackBerry.
Hvis du er lidt forvirret, skal du ikke bekymre dig for meget. Deres support sider skitserer omhyggeligt processen og tilbyder links til nyttige ressourcer. De apps, der allerede er udviklet, er blevet udarbejdet i en smuk biblioteksstilportefølje. Tjek deres fulde apps samling, som du derefter kan sortere efter enheder med skærmbilleder.
Aptana Studio
Aptana-hjemmesiden er den førende placering for at lære om deres udviklingsværktøjer. Den nyeste suite release, Aptana 3.0.3, har en fuldt integreret IDE til webudvikling, CSS-stilarter og HTML-tagging, og den bedste del: Aptana er helt ledig at downloade! De tilbyder pakker til alle 3 store operativsystemer (inklusive Linux), hvilket er en stor bekvemmelighed for udviklere.
Hvad der gør Aptana specielt, er, hvor hurtigt du kan udvikle en lille webapplikation og teste dit design. Studio suite giver dig mulighed for hurtigt udvikle og teste en webapplikation, der kører over Ruby on Rails, PHP, Python eller simpelthen HTML / CSS, og deres kodefremhævende funktioner er for nylig blevet forbedret til inkludere nye HTML5 og CSS3 tagbiblioteker. Det kommer også med Git integration, en indbygget terminal, code debugger, og en håndfuld andre nifty funktioner.
Mobile GUI-sæt og ikoner
Hvad ville være internettet uden freebies liggende rundt? For webdesignere er vigtigheden af brugergrænsefladen højere end alt andet. Enkle GUI'er er svære at komme forbi, og kun de mest kreative designere er kommet med arbejdsløsninger.
Der er dog mange gratis, men alligevel gode ressourcer til rådighed for din webdesigner til at teste ud. Disse GUI-kits er hovedsagelig designet til Adobe Photoshop eller Fireworks, hvor du kan flytte elementer og eksportere dem som flade billedfiler.
Ikoner er en meget praktisk ressource at have. Designere skaber gratis sæt og tilbyder dem online oftere end nogensinde før. Et sådant websted Glyphish har et udstillingsvindue af både gratis og pro ikoner. Disse designs er baseret på et enkelt tema, der skal bruges på mobilskabeloner og app designs.
Vores samling prototyper skabeloner til mobilenheder vil være en stor hjælp for dig under rejsen af hjemmesiden og applikationsudvikling. Du bør ikke starte kodning, før du har en stærk grafisk grænseflade, og disse websæt sætter dig i gang på den rigtige vej.
iOS 5 GUI-sæt
iPhone UI Vector Elements
iPhone App Icon Kit
Wireframe Magnets (DIY Kit)
Android Interface GUI
