En titt på design för mobila enheter
När den första iPhone släpptes tog den techvärlden med storm. Sedan dess har det varit nästan 5 år och smarttelefonmarknaden har ökat i popularitet, och även Microsoft har kommit in i tävlingen med sina Windows 7-operativsystem och partners. Med så många Internetanvändare på sin smartphone nuförtiden är det sunt förnuft att förvänta sig att antalet mobila webbplatser ska öka aggressivt.
Men designen för mobilbanan är en helt annan operation med vanlig webbdesign. Våra webbplatser är utformade för stor skärm, men smarttelefonens skärmstorlek är alldeles för liten jämfört med det, vilket leder till irriterande användbarhetsfrågor. Nya konstruktionsstandarder och praxis krävs starkt för en bättre mobildesign med smidig användarupplevelse.
I den här guiden kommer vi leta efter att designa en användarvänlig webbplats för smartphones mobila webbläsare. Jag kommer att prata om bästa praxis och användbart utvecklingsverktyg för att du ska kunna designa en bättre mobilwebbplats, så låt oss komma in i det efter hopp!
Planerar stark användarupplevelse
När du bygger en mobil webbplats är det viktigt att Håll alltid dina användare i åtanke, som i slutändan din webbplats är utformad och skapad för att användarna ska njuta av. Det är säkert vanligt att användarna förväntar sig en mobilwebbplats för att uppträda på samma sätt som skrivbordsmiljön hålla användarupplevelsen vänlig bör vara ditt huvudfokus när du bygger en framgångsrik mobil webbplats.
Det finns många användbarhetskoncept att överväga för dina användare. Dessa överväganden inkluderar skärmstorlek, inline bilder, hyperlänkar, typsnittstorlekar, och sidnavigering. Vi har skrivit om mobil användbarhetsdesign för att du kan skära din webbplats för bättre användbarhet. Förutom guiden behöver du alltid var försiktig med nya idéer för att förbättra din webbplats.
Att planera en stark användarupplevelse betyder också att du borde överväga hur en användare kommer att interagera med din webbplats. På ett skrivbord kan din webbplats interagera med en mus och ett tangentbord, men på en smartphone kommer användarna att vara tappning, snärta, och svep deras väg runt din webbplats. Du behöver förmodligen utforma webbplatsen på sätt som användarna kan få tillgång till webbplatsinformationen enkelt med dessa fysiska rörelser.
Håll sidor korta och söta
Köttet och potatiserna på vilken webbplats som helst är sidinnehåll. Var och en av dina webbsidor har betydande mängder användbar information för dina användare, till exempel text, foton eller videoklipp. Du hittar även nyhetsartiklar och blogginlägg som körs på några sidor, vilket kan hjälpa till att bryta upp text men det rekommenderas inte för mobila enheter som tekniken kräver mer sidlastning vilket innebär mer väntetid på användarsidan.
Om det inte är absolut nödvändigt rekommenderar jag Håller ditt sidinnehåll kort. Du bör också överväga att göra det ser sött ut styling teckensnittet till en mycket större storlek och kanske rörliga bilder åt sidan. Med ditt innehåll på fullskärmsläget uppmärksammar det naturligtvis uppmärksamhet, för att inte tala om att optimeringen gör det enklare att skanna sidorna. Detta är också anledningen till att a enkelspelets layout passar räkningen perfekt.
I de flesta fall kommer mobila webbläsare inte att ladda webbsidorna lika snabbt som stationära webbläsare, vilket kan irritera dina läsare, det är därför du behöver optimera innehållet och webbplatsen för höghastighetsinnehållsbelastning. Du kan antingen Förkorta artikeln medan du håller hela innehållet, eller bara ta bort onödiga bilder. Placera ditt fokus på enkelhet istället för skönhet.
Din kärnnavigering är livsuppehållaren för dina besökare som vill flytta mellan sidorna. På en mobil enhet kommer skärmslänkarna att visas mycket mindre av naturen, vilket är mycket svårare att knacka på. En viktig tweak för att lösa problemet är att maximera teckensnittet och platsen för dina navigeringslänkar, kanske tar upp hela blockområdet. Alternativt kan du design navigeringsfältet som liknar den riktiga iPhone-applikationens flikfält, som den som visas ovan.
Bygga mobila CSS-stilar
Nu när vi vet hur man optimerar mobilwebbplatsen för bättre läsbarhet och användbarhet är det bra att prata om CSS-stilar. Varje CSS-stilark innehåller många selektorer med egenskaper som gäller teckensnitt, storlekar, positionering och bildskärmsinställningar. När det gäller mobil bör du vara uppmärksam på hur dina block faller på plats.
(Bildkälla: Smashing Magazine)
Ett område för att komma igång är att Återställ webbplatsens wrappbredder i procent. Det är vanligt att använda pixlar som enhet för positionering, linjens höjd, teckensnittstorlek och div-bredd, men när du arbetar med mobilen vill du att dina sidor ska vara vätska och övergång mellan varje enhet naturligt. Om du ställer in containerdivor till 100% bredd tillåts innehållet att fyll lätt mellan stående / liggande läge utan att flyta över kanten.
Om du är en av de personer som vill strukturera hela din layout, se till att du slå allt med a återställa. Också stycken, rubriker och navigeringslänkar bör alla ställas in på display: block; så du får den linjära utskriftsstil känslan. Sätt tillbaka marginalerna och vadderingen för att ta bort blocket från din layout. Undvik tabeller om möjligt eftersom dessa tenderar att göra buggyresultat mellan enheter.
Stora bilder är också ett problem mellan enheter. De flesta av dina webbsidor kommer att göra större än 480px och du kanske inte vill ha dem att bryta behållaren. Det första alternativet är att ställ deras bredd på 100% så bilderna kan ändra storlek naturligt. Det är säkert möjligt att skapa olika uppsättningar bilder för din webbplats och göra dem annorlunda baserat på webbläsaren, men det är helt enkelt detta som bara lägger till fler verk på din sida, så försök att använd tekniken endast när det verkligen behövs.
Designa webbplatser för iPhone
Den mobila marknadsandelen är ganska stor och uppdelad, men Apple har fått en stor del av cirkeln med sina iDevices. Både iPhone och iPad är mobila Internet-klara enheter med inbyggd pekskärmsfunktion. De har samma standardwebbläsare, Safari och en hel mängd andra alternativ.
För iPhone-specifika webbplatser måste du rikta in skärmstorleken. Den fasta skärmstorleken är inställd på 320px med 480px för äldre iPhone-modeller och 640px med 960px för iPhone 4 och iPhone 4S.
iPhone skärmar är begränsade till rymden. Du borde ha ett block av innehåll som sträcker sig ner så länge som behövs. Håller element i en enda kolumn kommer att spara dig huvudvärk och tillåta en vätskelayout till “fylla i” både stående och liggande lägen. För detta behöver du förmodligen utveckla en annan mall och hitta ett sätt att kontrollera om din besökare använder en iPhone. Den lilla PHP-snippet nedan ska fungera bra:
I grunden drar logiken vår globala $ _SERVER variabel för HTTP-agenten och kontrollerar om ordet “iphone” visas var som helst. Om ja då vet vi att vår besökare använder en iPhone och där kan vi lägga upp lite annorlunda HTML eller till och med en helt ny malllayout! Detta kan också användas till inkludera ett iPhone-specifikt formatark, ändra sidtitlar, ta bort bilder eller nästan alla dynamiska effekter.
När det gäller att servera nya stilar finns det ett enklare sätt. Som tidigare nämnts är den maximala skärmstorleken för iPhone 960px bred. Därför med nya CSS3-mediafrågor kan du lägga till stilar direkt i din webbplatss huvudsakliga stilark som kommer att endast display på iPhone. Nedan är ett litet exempelkod:
@media skärm och (max enhetbredd: 960px) / * iPhone css * /
Detta fungerar eftersom CSS kan nu upptäcka webbläsare och deras egenskaper. Max skärmbredd är en av egenskaperna som också kan detekteras.
Allt-i-alla mobila webbplatser för iPhone-enheter är inte för svåra att designa för, det finns bara för många exempel att hänvisa, t ex CSS iPhone. Håll dig upptagen med att studera och var inte rädd för Experimentera med nya tekniker i UI-design.
Mobile jQuery Scripting
Majoriteten av webbutvecklare på framsidan är bekanta med jQuery-biblioteket. Det erbjuder några fantastiska stenografi för kodningseffekter, animationer, rullgardinsmenyer och en mängd andra funktioner i webbläsaren, och det blir bara fantastiskare med meddelandet om jQuery Mobile. Det är rekommenderas inte att hoppa i tekniken direkt och ladda din webbplats med effekter överallt, men för teständamål kan den avancerade funktionaliteten spela mycket bra.
jQuery Mobile är lite annorlunda än jQuery, eftersom det ger dig en komplett miljö att bygga på. När du arbetar med sina filer är de inte bara JavaScript men också CSS-format för knappar, länkar och övergångseffekter. Du skriver fortfarande webbsidor i HTML-kod, men jQuery Mobile-teamet har levererade många tillval UI-designfunktioner. Det finns mycket vi kan göra med denna ram men sedan ramverket är fortfarande i beta, låt oss hålla fast vid enkla effekter.
En liten handledning på DevGrow-bloggen ger några fantastiska exempel. Den officiella webbplatsen erbjuder också demo för dig att prova. Observera att vi använder HTML-attributet, data övergången att lägga till animeringseffekter med något av de fördefinierade värdena. Dessa inkluderar slide, pop, flip, fade etc. Kolla in det lilla DevGrow-exemplet för att få en smak av dessa effekter.
Effekterna och övergångarna är ganska snygga, och det faktum att du kan bygga ett helt mobilt gränssnitt strikt med jQuery är också ett stort steg framåt för den här plattformen, men med plattformen bara i beta skulle jag inte rekommendera att bygga hela din mobila webbplats med deras bibliotek, särskilt med det faktum att det är stöds inte av alla större smartphones vid skrivningstillfället (särskilt Windows Phone 7), men det blir säkert bättre med tiden.
I slutändan rekommenderar jag att du känner dig till den nya mobilramen innan distribuera live på något projekt.
Användbara utvecklingsverktyg
Mobila utvecklare tittar inte bara på kodnings- och designresurser. Det finns också en stor efterfrågan på programvaruverktyg och IDE, för att inte tala om kraftfulla mobilramar. Webbutveckling är en svår uppgift som kräver en hel del engagemang, men med hjälp av extra verktyg kommer ditt jobb att bli mycket enklare.
Opera Mobile Emulator
Letar du efter ett sätt att kontrollera hur din mobilwebbplats görs? Det kan vara en stor smärta om du inte har en smartphone med tillgång till Internet. Eller du vill inte använda din smartphone för att testa webbplatsen varje gång en uppdatering drivs på din server. Nå, Opera Mobile Emulator är ett fantastiskt program för att testa din mobila webbplats.
Emulatorn stöder sig runt 20 mobilprofiler till exempel Samsung Galaxy S, HTC Desire och till och med tablett som Motorola Xoom. Det är också möjligt att ställa in anpassad upplösning och pixel densitet för intensiva teständamål. Bäst av allt behöver du inte göra för mycket konfigurationsarbete, bara få klick och du är bra att gå.
Hämtningen är helt gratis och mjukvaran körs både i Mac OS X och Windows. Deras utvecklare är svåra på jobbet och skapar riktiga webbstandarder och anpassar sina mobila återgivningsmotorer. Jag rekommenderar sina andra dev-verktyg om du letar efter extra verktyg för att hjälpa dig på vägen.
PhoneGap
Det har inte funnits många API: er utvecklade via HTML5 för att bygga fasta mobila applikationer. I synnerhet det mobila landskapet har saknat dessa typer av webbplatser, vilket är exakt varför PhoneGap fyller nischen så bra. Deras plattform gör det enkelt för dig konstruera HTML5-baserade appar som inbyggda program på 6 olika plattformar.
Processen fungerar genom att först komprimera din kod och överföra den via PhoneGaps ansökningsram. Därifrån kan dina appar nå en stor del av mobilmarknaden, inklusive Android, iOS, Windows Phone 7 och BlackBerry.
Om du är lite förvirrad, gör inte för mycket. Deras supportsidor ger en detaljerad beskrivning av processen och erbjuder länkar till hjälpsamma resurser. Apparna som redan har utvecklats har sammanställts i en vacker biblioteksformatportfölj. Kolla in deras fullständiga apps samling som du kan sortera efter enheter med skärmdumpar.
Aptana Studio
Aptana-webbplatsen är den främsta platsen för att lära sig om deras utvecklingsverktyg. Den senaste versionen av Suite, Aptana 3.0.3, har en fullständigt integrerad IDE för webbutveckling, CSS-format och HTML-taggar, och den bästa delen: Aptana är helt fri att ladda ned! De erbjuder paket för alla 3 stora operativsystem (inklusive Linux) vilket är en stor bekvämlighet för utvecklare.
Vad som gör Aptana speciellt är hur snabbt du kan utveckla en liten webbapplikation och testa din design. I studiosuiten kan du snabbt utveckla och testa en webbapplikation som körs över Ruby on Rails, PHP, Python eller helt enkelt HTML / CSS, och deras kodmarkeringsfunktioner har nyligen förbättrats till Inkludera nya HTML5 och CSS3-tagbibliotek. Det kommer också med Git integration, en inbyggd terminal, kod debugger och en handfull andra nifty funktioner.
Mobile GUI-kits och ikoner
Vad skulle vara på webben utan freebies liggande? För webbdesigners är betydelsen av användargränssnittet rankat över allt annat. Enkla GUIs är svåra att komma och bara de kreativa designerna har kommit fram till arbetslösningar.
Det finns dock många gratis men ändå höga resurser tillgängliga för webbdesignern att testa. Dessa GUI-paket är mestadels avsedda för Adobe Photoshop eller Fireworks, där du kan flytta runt element och exportera dem som platta bildfiler.
Ikoner är en mycket praktisk resurs att ha. Designers skapar gratis uppsättningar och erbjuder dem online oftare än någonsin tidigare. En sådan webbplats Glyphish har en presentation av både gratis och pro ikoner. Dessa mönster bygger på ett enda tema som ska användas på mobilmallar och appdesigner.
Vår samling av prototyper för mobila enheter kommer att vara en utmärkt hjälp för dig under resan av webbsida och applikationsutveckling. Du bör inte börja kodning tills du har ett starkt grafiskt gränssnitt och dessa webbsatser kommer att komma igång på rätt väg.
iOS 5 GUI Kit
iPhone UI Vector Elements
iPhone App Icon Kit
Wireframe Magnets (DIY Kit)
Android gränssnitt GUI
