Om du har ignorerat mobila plattformar tidigare kan det vara skrämmande att äntligen göra hoppet och börja stödja mobila surfning på dina befintliga webbplatser. Det finns så mycket att lära sig, en miljon tekniker att välja mellan och en obegränsad mängd arbete som du potentiellt kan lägga in i befintliga projekt.
En fråga som både designers och webbplatsägare alltid vill veta är? Hur kan jag snabbt lägga till mobilt stöd ?? Ibland har du inte budgeten att börja från början och ändå önska dig en modicum av mobil godhet. Idag går jag igenom fem saker som du kan göra för att göra din webbplats mer mobilvänlig.
Den här artikeln är en del av vår serie på? Utöver skrivbordsdesign?, Som kom med dig i samarbete med Heart Internet VPS.
Använd en Fluid Layout
Fluidlayout har funnits i flera år. Långt före lyhörd design som vi känner till idag kom tillsammans med flera webbdesigners och utvecklare på denna teknik som lösningen på problemet med flera visningsstorlekar.
Att skapa vätskeformat är ganska enkelt, allt du behöver göra är att släppa statiska bredder till förmån för procentbaserade bredder i din CSS. Så istället för kolumn med en uttryckt bredd på 350px kan du ställa in den till 30%. Denna breddinställning tar automatiskt hänsyn till visningsportens storlek och anger bredden till 30% av den totala summan. Så om ditt webbläsarfönster är 900px bredt blir kolonnens bredd 270px.
Så hur drar du det här i naturen? Tricket är att förstå den nödvändiga matematiken. Du vet att du börjar med 100%, så att du kan dra med dig en fem kolumnlayout, du kanske frestas att ställa in varje kolumn till 20% bredd (20 * 5 = 100). Detta skulle dock resultera i att dina kolumner fyller hela den tillgängliga bredden utan mellanrum mellan dem. Du vill vanligtvis lägga till några marginaler, vilket kommer att äta upp lite av den bredden.
Vad du behöver göra är att räkna ut hur mycket marginal du vill använda för varje kolumn, multiplicera då det gånger antalet kolumner för att upptäcka den totala marginen. Slutligen delar du kolumnerna i vad som är kvar. Jag ställer vanligtvis något på Instacalc för att räkna ut alla siffror för mig.
Här kan du se att jag har skapat en 5 kolumnlayout med 4% marginaler på varje kolumn (två till vänster, två till höger). Klicka på bilden ovan för att gå till denna räknare där du kan tweak dessa siffror själv. När dessa två värden är angivna, är resten utestängd för oss.
Fyra procent marginal gånger fem kolumner motsvarar tjugo procent av vår bredd för marginaler och lämnar åttio procent kvar för kolumner. Åttio procent bredd dividerad med fem kolumner är lika med en sexton procent bredd per kolonn.
Oavsett vilken storlek webbläsarfönstret är, kommer dessa proportioner att bibehållas.
Gör det med Sass
Om du vill ha ett sätt att ställa upp detta enkelt i din CSS, kan du använda Sass för att räkna ut all matte för dig. Här är en mixin som utför alla nödvändiga operationer, du skickar helt enkelt antalet kolumner och marginalen för varje kolumn.
För att genomföra denna mixin, använder du ett inkluderat uttalande följt av namnet på mixin och de parametrar som vi just nämnde. Här är ett exempel som distribuerar automatiskt fyra kolumner med en 4% -marginal på varje kolumn.
Den sammanställda CSS placerar en bredd på 21% på varje kolumn med en marginal på 2% på vänster och höger sida. Detta visar verkligen användbarheten hos förprocessorer som Sass och LESS.
Använd en ram
Om du är försiktig med att bygga upp din egen fluidlayout från början, finns det många CSS-ramar som gör allt arbete för dig. Ta en titt på vart och ett av följande alternativ, varav några tar hand om mediasökningar för dig.
- 1140px CSS Grid System
- Fluid 960.gs
- Tiny Fluid Grid
- NegativeGrid
- Golden Grid System
- Vätskegränssnitt
Kasta i en enkel kolumn mediasökning
Dessa dagar är min rekommendation för mobila vänliga webbplatser att gå fullständigt lyhörd. Detta gör att du kan skapa en enda design som flexiblar och anpassar sig till olika visningsportar, vilket säkerställer att din webbplats ser bra ut på nästan vilken enhet som helst. Denna lösning är elegant och enklare att implementera än du kan tänka dig.
Med det sagt kommer du fortfarande att springa in i flera utmaningar när du försöker en fullständigt lyhörd design. Du måste sätta upp dig om ett helt nytt sätt att titta på webbdesign och optimera din webbplats vid flera brytpunkter.
I den verkliga världen har du kanske inte alltid tid och budget för att fokusera på en fullständig responsiv översyn. Kanske, även i det långa loppet, planerar du en helt ny responsiv design, men du vill åtminstone ge din nuvarande webbplats en snabb ökning så att den ser bättre ut på mindre visningar.
En lösning är att servera en enda mediefråga som väsentligen sätter 100% bredd på dina kolumner och behållare. Minska din webbläsarfönster storlek och hitta den punkten där din design inte längre är mycket användbar, och kasta i några grundläggande stilar för att åtgärda det:
Som jag har gjort här kommer du troligtvis att behöva justera några andra saker förutom att ställa in kolumnbredderna till 100% för att se till att allt ser bra ut med den här nya layouten.Med den här tekniken kommer din standardlayout att visas upp till större skärmar och kommer att flytta till en enda kolumn när visningen blir för liten för att rymma den ursprungliga konstruktionen (700px i vårt exempel ovan).
Jag demonstrerade nyligen denna teknik i en tidigare artikel med följande enkla layout. Här är designen i stor storlek:
På mindre enheter stör vi inte med massor av förändringar utan använder istället kodfliken ovan för att skapa en enda kolumn innehåll.
Lägg till Apple Touch-ikonen
Den här är en liten iOS-centrerad men det gör aldrig ont att skräddarsy till anpassade plattformar där det är möjligt. Det kräver en minimal ansträngning och gör din webbplats mycket mer benägen att behållas på en iPhone / iPad-användarens startsida (speciellt användbar för webbapps).
Safari på iOS tillåter användare att inte bara bokmärke en sida i traditionell mening utan också placera den bredvid alla andra ikoner i startskärmens rutnät. För att säkerställa att ikonen som Safari tar taggar är formaterad korrekt, är det bäst att skapa din egen.
Hur man implementerar ikonerna
Det finns för närvarande tre olika skärmar för att redogöra för med Apple-enheter: iPad, iPhone 4 och andra äldre iPhones. Passande storlekar för dessa är 57px kvadrat för gamla iPhones, 72px kvadrat för iPads (version en och två) och 114px kvadrat för iPhone 4 och senare. Tänk på att iPad 3 sannolikt kommer att kräva en fyrkantig fyrkantig ikon om rykten om upplösningsfördubbningen är sanna.
Här är koden som du måste inkludera i huvuddelen av din HTML-fil.
Du kan lägga till en startskärm till din webbapp med en mycket liknande metod. Kolla in den officiella dokumentationen för mer information.
Specialeffekter
Vi har redan gått över storlekarna för varje bild, men det är mer att tänka på. Varje ikon som du skapar ska vara fyrkantig med hörn, 90 grader och inte innehålla genomskinlighet eller skuggor. IPhone kommer automatiskt att runda hörnen till lämplig radie och tillämpa standardglanseffekten.
Tips: Lägg till? Precomposed? till filnamnet för att hoppa över den glansiga effekten. Exempel: apple-touch-icon-precomposed.png.
Titta på dig
Detta är en ganska generisk rådgivning, men det är något jag alltid uppmuntrar nybörjare att överväga när man utformar mobila webbplatser. För skrivbords webbdesign tenderar jag att använda hovers ganska omfattande och ibland gå utöver enkla visuella tips och faktiskt använda dem för att utlösa någon funktionell händelse.
Tänk på hur denna händelse kommer att överföras till mobila, pekskärmsplattformar. Plötsligt finns det ingen svängare. Du knackar antingen på ett objekt eller inte, det finns inget mellan som det finns med en mus. Betyder det att du inte ska använda svängbaserad funktionalitet? Inte alls, kom ihåg att se till att din webbplats fortfarande fungerar perfekt på en mobil enhet.
Det kräver inte alltid mycket arbete. I slutändan uppmuntrar jag dig att utföra test där det är möjligt för att verkligen få en känsla för hur din webbplats ska fungera. Till exempel har jag nyligen publicerat en handledning om att skapa en expanderande navigeringsmeny som glider öppen på svävaren. Jag trodde instinktivt att menyn skulle vara värdelös på en iOS-enhet eftersom det inte finns någon svänghändelse, men det visar sig att iPhone och iPad automatiskt översätter den till en touch-händelse, vilket gör att menyn är perfekt fungerande.
Banka aldrig på det här, eftersom det kanske inte alltid är så att dina hovers översätter bra till mobila plattformar. När de inte gör det kan du prova att erbjuda en anpassad mediefråga eller bara mobila bara JavaScript för att kompensera.
Använd mobil vänlig teknik
Mobilbanan har presenterat ett antal kompatibilitetsutmaningar för designers och utvecklare. Huvudobjektet som får mest press är att iOS helt enkelt vägrar att stödja Flash, men det slutar inte där. Webben är full av proprietära plugins som Microsofts Silverlight som inte kan installeras på vissa mobila plattformar.
För att ta reda på det här, se till att din webbplats inte är beroende av att dessa tekniker fungerar. Om de gör det måste du servera en speciell mobilversion för att kompensera. Till exempel använder YouTube (en tidigare Flash-Only Site) nu en speciell HTML5-videospelare som fungerar extremt bra på mobila plattformar.
Också vara säker på att dra nytta av förbyggda bibliotek som gör att du enkelt kan lägga till stöd för flera mobila plattformar. Ett exempel som JavaScript-fans älskar är jQuery Mobile, en rockin HTML5-baserad verktygslåda byggt på jQuery och jQuery UI.
Slutsats
Självklart är denna lista inte på något sätt uttömmande men istället bara som ett sätt för dig att doppa tån i världen av webbplatser som ser ut och fungerar bra på vilken plattform som helst. När du verkligen dyker in i dessa fem tekniker lovar jag att du kommer att känna dig bättre när du närmar dig mobil webbdesign och kommer att hitta dig själv att krossa ut fullt lyhörda plattformsdesign på nolltid.
Lämna en kommentar nedan och låt oss veta hur du skulle ändra den här listan. Om jag frågade dig om fem snabba och enkla sätt att göra en webbplats mer mobilvänlig, vilka råd skulle du erbjuda?