Responsiv design i företagsvärlden
När du redan har en full skylt med klientarbete kan det vara svårt att komma in på ny teknik. Responsiv design är en stor buzz-fras just nu, men det är onödigt att tvinga det på en klient, såvida inte deras användare kommer att dra nytta av det.
Vid 352 Media Group såg vi nyligen ett tillfälle att skapa en fullständigt mottaglig webbplats för en klient, Purple Communications. De gör programvara för personer med hörselnedsättning som annars inte skulle kunna ringa. Med hjälp av sin dator, telefon, videotelefon eller annan elektronisk enhet kan de kommunicera med andra med hjälp av en videorelästjänst.
Purple Communications erbjuder appar för flera telefonplattformar, så en stor del av deras webtrafik är från mobila enheter. Tittar på deras trafik blev det tydligt klart att den bästa lösningen för kunden var att skapa en fullt mottaglig webbplats. Vårt företag har tidigare gjort mobila webbplatser, men det var första gången som en webbplats skulle tjäna både mobila och stationära användare. Om du är intresserad av att integrera några mottagliga webbdesignfunktioner i ditt företags eller kundens hemsida, så är det några tips att tänka på:
Kompromissa inte med design
Det finns mönster som lånar sig till en lyhörd, flytande layout långt mer än andra. En minimalistisk design med en enkel bakgrund kan bara kräva några tweaks för att bli flytande. Så det kan vara väldigt frestande att driva denna typ av design på klienten, eftersom det skulle göra att webbplatsen är märkvärdigt lättare.
En av 352 Media Groups konkurrensfördelar är vår prisbelönta design. Så samtidigt som jag inledningsvis succumbed till frestelsen av en minimalistisk design, ändrade jag mig och bestämde mig för att ta reda på hur vi kunde använda den design vi ville ha på ett lyhörd sätt.
Det finns tre olika sätt att utveckla en lyhörd design. Jag har skapat namn för dem så att de blir enklare att diskutera:
Stegade layouter
Denna teknik använder mediafrågor för att servera olika stylesheets vid uppsatta resolutioner. Traditionellt skulle du skapa tre olika mönster - en för stationära datorer, en för tabletter och en för telefoner.
Denna metod var väldigt tilltalande på grund av mitt beslut att designa en webbplats som skulle kunna vara ganska komplicerad att göra vätska. I huvudsak kan vi ta vår befintliga process för att utveckla en webbplats och bara multipla den med tre. Vi kan även använda servernsdetektering för att se till att du bara har den CSS-fil du behövde för din upplösning.
Problemet med denna teknik är att du måste välja vilka lösningar du ska optimera din webbplats för. De flesta använder siffror baserade på iOS-enheterna-768px för tablettdesignen och 320px för mobildesignen. Men med alla de olika smarta telefonerna och tabletterna finns det massor av olika upplösningar. Eftersom appsna Purple Communications gör att de är tillgängliga för många olika telefoner, ville vi se till att varje användare skulle ha en optimal upplevelse. Så medan jag tror att den här tekniken skulle vara perfekt för en iPhone-appwebbplats, skulle den inte passa våra behov för det här projektet.
Vätskegrid
Ett annat sätt att göra din webbplats mottaglig är genom att använda procentuella bredder så att allt kommer att skala med visningsporten hela vägen ner till 0. Med den här metoden ställer du upp ditt procentuella grid som kommer att göra det huvudsakliga legworket. Tidigare använder du mediafrågor för att finjustera saker för olika skärmar. Denna metod har en distinkt fördel jämfört med den stegade metoden eftersom webbplatsen optimeras för varje upplösning, i motsats till bara en handfull.
Nackdelen här är att vissa konstruktioner kan vara exponentiellt svårare att utveckla. Jag övervägde denna metod under en lång tid och försökte räkna ut hur man kodar besvärliga områden. Vi använder en gemensam metod som kallas skjutdörr teknik som kan låta dig använda en enda bild för att göra en behållare med flytande bredd med invecklade kanter. Om du inte använder det, titta definitivt på handledningen eftersom det är en fantastisk teknik. Men även med det och några andra saker i vårt arsenal, hade det fortfarande varit ganska svårt att dra av.
Fluid / Stepped Hybrid
Till slut bestämde jag mig för en kombination av de två metoderna. Vi skulle använda den stegade tekniken för att skapa en design för skrivbordet, och sedan ett stort steg ner till en vätskedesign under 960px bred. Detta innebar att för processorn var vår process nästan samma som ett normalt projekt. Vi stöder resolutioner 1024 × 768 och upp till skrivbordet, så vi gör våra webbplatser till standard 960px bredd (vilket möjliggör en vertikal rullningsbar och annan webbläsare och OS-krom). Eventuellt visningsutrymme under den bredden skulle normalt bara visa en rullningsrad.
I stället för att försöka välja vilken upplösning som har det mest förnuftiga för en tablettstorlek, ställde vi bara upp det där allt under platsbredden på 960px skulle utlösa vätskelayouten. På det sättet skulle ingen någonsin få den fruktade horisontella rullningsfältet.
Som en liten tilläggsbonus får en komplett skrivbordsversion en tablett (som är minst 960 px bred) på webbplatsen i liggande läge. Tänk på att du förmodligen vill göra lite små tweaks med mediafrågor för att göra länkar och knappar lättare att röra.
Mobil först
Om du har gjort någon forskning om responsiv design, har du säkert hört mantraen att utveckla för mobil först, vilket definitivt är något du bör tänka på. Eftersom vi alla har tänkt på att utveckla webbplatser för stationära datorer så länge är det väldigt enkelt att titta på mediefrågor på fel sätt. Du kanske tror, "Allt jag behöver göra är att göra några nya bilder och lägga in en ny CSS i en mediefråga, och min sida kommer också att fungera på telefoner." Även om detta är sant, är det också helt bakåt.
Så fantastiskt som smartphones har blivit, är de fortfarande inte lika kraftfulla som stationära datorer. Dessutom förbrukas innehåll ofta på språng. Men genom att följa vår tidigare logik optimerar vi en webbplats för mindre kraftfulla enheter på långsammare anslutningar genom att lägga till CSS och bilder. När du tänker igenom det, inser du att du måste ändra ditt arbetsflöde.
Den svåraste delen är att göra detta arbete för img taggar. Om du följer bästa praxis har du optimerade bilder för olika upplösningar. Den utmanande delen är att se till att du bara hämtar den bild du behöver. Det här problemet kan vara en artikel på egen hand, men lyckligtvis har Jason Grigsby redan sammanställt en lista med responsiva bildmetoder och deras fördelar och nackdelar.
Förbi att allt vi behöver jobba är CSS. Med vår "mobila första" mentalitet kommer vi att skapa en mobil.css-fil som innehåller alla de CSS som mobilen behöver. Det här är den enda filen som telefonen laddar ner. Då ska vi göra en andra fil som heter desktop.css som bygger på och överskrivar de basformat som etablerats i mobile.css. För att se till att telefoner / surfplattor bara får mobil.css och skrivbord får både mobile.css och desktop.css ser våra länkar ut så här:
Den här kombinationen har hittills arbetat för allt jag testat förutom versioner av Internet Explorer före 9. Eftersom vår företagsstandard är att stödja IE7 +, var vi tvungna att göra en sista tweak. Du kommer märka att min kod ovan körs på servern. På backend söker vi efter versionen av IE, och om den är mindre än 9, ändrar vi medieattributet till "skärm, projektion". Detta fungerade bäst för oss, men om du inte kör något serverns sida kan du använda answer.js istället.
Det betyder att vår skrivbords CSS inte blir så optimerad som den skulle vara på en vanlig webbplats. Men det enda offret vi gör är att ladda ner en lättvikts CSS-fil som vi sedan skriver över där vi behöver. Vi behövde kompromissa någonstans, och för att vi fortsätter chanting, "mobil först", vet vi att det här är bättre än alternativet.
Fortfarande erbjuder klientkontrollen
Vid 352 Media Group tror vi på att ge kunden full kontroll över sin webbplats. När vi har avslutat utvecklingen överlämnar vi all källkod. Vi tillhandahåller även ett specialbyggt CMS som låter klienten hantera sidorna, navigeringen och sidkartan. Precis som design är det en standard som vi inte vill kompromissa med, så vi hade några extra hinder.
En av de svåraste gränssnitten att överföra till mobilen är navigeringen. Det här är ett problem eftersom det också är en av de viktigaste gränssnitten på en webbplats. Den första frågan du behöver fråga är om mobila användare behöver snabb åtkomst till hela navigationen, eller om de bara är intresserade av några få få. Om de behöver all navigering, och det finns mer än fyra huvudnivån, tycker jag att en av de bästa lösningarna är att gruppera dem i en element. Detta kommer att använda telefonens operativsystem för ett optimerat gränssnitt som användaren redan är van vid.
På Purple Communications fanns det bara två huvudnivån som mobilanvändare primärt tittade på: Produkter och tjänster och Om oss. Så vidare på telefoner visar vi bara de två objekten, och grupperar sedan resten i en "More" dropdown.
Men en av de saker som vi erbjuder kunden är kontroll över deras navigering. För den här webbplatsen var det enda som de inte skulle ha kontroll över, vilka saker som kollapsade i menyn, så vi försökte rensa det med dem först. Men förbi det, kan de lägga till några objekt eller underartiklar som de vill ha. För att uppnå detta använde vi en andra kopia av navigeringen i det sista objektet "Mer". Vi gömmer det på skrivbord, och i mobilen döljer vi de översta objekten vi inte vill visa. I den nestade listan gömmer vi sedan "Produkter & tjänster" och "Om" så att användarna inte ser dem två gånger. Detta ger vår klient full kontroll utan att behöva hantera en separat mobilnavigering (som skulle bli en chore med dubbla objekt).
För innehållsområdena gav vi utbildning till kunden så att de skulle kunna veta de bästa sätten att strukturera innehållet. Vi har också satt upp några klasser som de kan använda på saker som YouTube-videor, knappar och samtal till handling, vilket säkerställde de saker de lagt till skulle optimeras för alla upplösningar.
Skapa en återanvändbar ram
Det sista du bör tänka på när du utforskar ny teknik, såsom lyhörd design, är att se till att ditt företag kommer att bli bättre förberedt inför framtiden. Du vill att alla som arbetar med projektet ska inte bara tänka på klienten och deras användare, utan också om vilka lektioner som kan tillämpas på andra projekt. Var alltid på utkik efter projekt som detta som kan få din fot in i dörren till nya områden så ditt företag kommer fortsätta att utvecklas tillsammans med industrin.
Vid 352 Media Group har vi redan etablerat ramverk för både våra programmerare och våra utvecklare. Vi delar till exempel alla våra CSS i flera filer för att komprimera komponenter och hålla alla organiserade. Vi har separata filer för struktur, typografi, former, widgets, etc. När du flyttar in i ny teknik kan du ta det som ser ut som den enkla vägen och överge bara saker som inte verkar passa och skapa nya saker för framtida. Men genom att göra så lämnar du år av erfarenhet som har fungerat bra för dig hittills.
Jag förenklade vår kod tidigare som länkar till CSS-filerna. Vi kunde ha krävt att mottagliga webbplatser använde de två nya CSS-filerna istället för den normala ramen. Men istället, med lite kreativitet, räknade vi ut vilka filer som skulle appliceras på mobilen, vilket borde tillämpas på skrivbordet och som skulle delas upp över de två. Vi kunde anpassa vad vi redan hade arbetat med i något som kommer att fungera bra för oss i framtiden.