Responsive Web Layouts för mobila skärmar Intro, tips och exempel
Designers har det tuffare nu än tidigare. Vi behöver inte bara designa för stationära enheter, utan även mobila enheter som surfplattan och smartphones, och eftersom vi talar om många olika skärmstorlekar och upplösningar här är det en stor uppgift att axla. I ljuset av detta, responsiv webbdesign kan vara den bästa lösningen. Det erbjuder mer än bara en enkel mobilmall; istället är hela din webbplatslayout utformad för att vara flexibel nog för att passa in i en eventuell skärmupplösning.
Med ett sådant fluiddesignschema finns uppenbara fördelar och nackdelar. Tänk på mina exempel nedan för hur lyhörd webbdesign kan göra övergången till mobila enheter smidigare.
Hur Responsive Design Works
När jag använder ordet “mottaglig” När det gäller webbdesign menar jag att hela layouten svarar utifrån användarens skärmupplösning. Föreställ dig det här scenariot: du läser en webbplats på en tablett, då växlar du till en annan enhet av en eller annan anledning. Webbläsarfönstret är nu omformat. En lyhörd webbdesign layout kommer att innehålla scheman och en layout som graciöst bryter ner och återupplivar sig själv. Ur ett användbarhetsperspektiv är detta en lysande teknik.
Responsiv design handlar om att skapa en homogen upplevelse oberoende av webbläsarens eller skärmens storlek. Jag har hittat det perfekta exemplet från "A List Apart" för att illustrera min punkt, som också innehåller dynamiska bilder. Bredden sätts i CSS med procentandelar för mestadels alla de inre behållarelementen. Större webbplatser svarar också bra för att ta bort dynamiskt innehåll som JavaScript när det inte stöds.
Varför Design för mobil?
Det har blivit uppenbart att fler användare går mobila, och inte bara för on-the-go webbläsning heller. Tablet PC-apparater har börjat förändras i kontext när användarna är online i klassrummet. Att designa för mobil är verkligen ett krav i dagens webbstandarder. Det enda problemet är att välja din utvecklingsmetod och rikta in målgrupperna på lämpligt sätt.
När du börjar kodning för specifika skärmupplösningar slutar du med alltför många stylesheets att hantera. Mediafrågor i CSS3 kan användas för att skapa iPhonespecifika layouter för både porträtt och landskapsvisning. Eftersom du kan förutbestämma pixeldensiteten är det enkelt att uppdatera någon HTML-mall för mobilen.
(Bildkälla: bradfrostweb)
Men när du kodar en layout för responsiv design, tas de mobila aspekterna som standard om hand. Både stationära och mobila användare kommer att erbjudas en liknande upplevelse och du behöver inte oroa dig för externa CSS-egenskaper. Den enda forskningen du behöver göra är att planera för minsta möjliga bildskärm. Google Analytics trafikdata kan vara till stor hjälp för detta.
Du kommer inte troligen att få din webbplats att fungera 100% på varje enskild enhet som kör varje webbläsare. Men du kan rikta in en majoritet baserat på skärmens genomsnittliga bredd. Äldre iPhone-modeller använder en 320 × 480 skärmupplösning som inte är så otroligt. Jag skulle skjuta för en minsta bredd på 240px, eller ännu mindre om du kan passa den.
Ta bort standardzoom
Om du har spenderat tid på att surfa på webben på en smartphone märker du hur webbplatser skaas ut för att visa fullständigt på skärmen. Det här är för användarens bekvämlighet eftersom de flesta webbplatser inte har en mobil motsvarighet, så hela layouten är den säkraste insatsen.
Men när du kommer in i byggandet av en lyhörd mobil design, kan auto-zoom verkligen rota upp dina layoutelement. Speciellt kan bilder och navigationsinnehåll visas små eller för stora i din layout. Det finns en särskild metakod som du kan lägga till i dokumenthuvudet som återställer detta i de flesta Android- och iPhone-enheter.
Detta är känt som viewport metakod som ställer in några anpassade variabler inom innehållet. Apple har en dokumentationssida om några andra metataggar du borde titta på, även om de är inriktade specifikt på webbplatser på iOS. De initial-skala värdet är viktigt eftersom det här ställer in din webbplats till en fullständig 100% zoom.
Det sista värdet för användar skalbar kommer att ta bort denna zoomfunktion helt och hållet så att användaren inte kan ändra storlek på layouten. Detta låser konstruktionen i en storlek baserat på hela enhetens bredd. Observera att även om du inaktiverar zoomfunktionen, anpassas en bra, responsiv design ändå vid övergång från stående till liggande på vilken enhet som helst! Men det är vettigt att låsa en lyhörd design och ta bort de generiska skalningsalternativen.
Dynamisk bildskalning
Bilder är en annan viktig aspekt av praktiskt taget alla webbplatser. Mobila användare kanske inte letar efter att strömma videor, men bilder är en helt annan historia. Dessa är också de största synderna när det gäller layouter som bryts ut ur lådmodellen.
img maxbredd: 100%;
Standardregeln för CSS är att tillämpa en egenskap med max bredd på alla bilder. Eftersom de alltid kommer att ställas till 100% kommer du aldrig att märka snedvridningar. När användaren omformar sitt webbläsarfönster mindre än din bild kan hantera, justeras den automatiskt till 100% bredd nedskalad. Problemet är att Internet Explorer inte kan förstå den här egenskapen, så du måste sammanställa ett IE-specifikt formatark med bredd: 100%;.
Flexibla bilder är också möjliga om du använder JavaScript eller jQuery plugins. Det finns några riktigt smarta utvecklare där ute som har lagt in tiden för att bygga otroligt responsivt bildinnehåll. Den här tråden är bara en av många i Stack Overflow, som har en outlandish men ändå lämplig inställning för att lösa IE6 / 7-buggarna.
Jag skulle personligen rekommendera att hålla fast vid naturlig CSS-bildåterställning. Om din webbplats körs i en mobil webbläsare med JavaScript aktiverat kan det troligtvis också stödja CSS. Om du verkligen vill gräva djupare, kolla in den här 24 sättartikeln Bilder för Adaptive Designs ...
Touching Designs
Webbutvecklare kan glömma att mobila användare inte längre är på tangentbordstelefoner som BlackBerrys längre. En majoritet av smartphones använder idag pekskärmsgränssnitt, vilket gör ett scenario som skiljer sig från mus- och tangentbordsinställningar.
Som sådan måste du överväga alternativa lösningar i mobila element. Dropdown-menyerna kan fungera bättre när de visas som en meny på höger sida. De flesta användare kan trycka på länkar på höger sida lättare än vänster, men antingen kolumnen fungerar för att lindra utrymme. Med hjälp av marginindelningar är det enkelt att identifiera länkhierarkin utan att kräva någon jQuery-kod.
Det är också bra att öka storleken på dessa navigeringslänkar. Mobila användare har inte lyxen på en stor skärm som erbjuds på stationära datorer eller till och med bärbara datorer. Du måste behålla texten stor, upp, fram och bakåt och läsbar till varje pris. Du kanske till och med vill ändra storlek om användaren växlar mellan stående och liggande visning - en ganska vanlig återkommande när du surfar på mobilbanan.
Anpassade CSS-layouter
I allmänhet är det bäst att anpassa din layout och tillåta naturlig försämring av ditt innehåll. Om du har ett sidfält och innehållsområde ska du ställa in dem i bredd av procentandelar eller ems, allt som kommer att omformas med webbläsarfönstret. Om du ansöker en min-bredd Detta kommer till sist att bryta av en del av layouten. så nu visar ditt sidfält innehåll ovanför sidinnehållet.
(Bildkälla: Pepperson)
När du överväger hur det påverkar den övergripande designen är det mycket lättare att utveckla externa stilark. Men du är sannolikt att köra in i skärmupplösningar som bara är för små för att din layout ska göra. Det här är det perfekta scenariot för att lägga till egna CSS-egenskaper för att ta bort delar av sidan, eller omformatera innehållet helt och hållet.
Växla extra innehåll på / av
Exempel på stora innehållsblock inkluderar webbformulär, dynamiska menyer, bildreglage och andra liknande idéer. I stället för att helt avlägsna dessa element då layouten blir mindre varför inte bara gömma dem i en “minimerad” innehåll div? Du kan använda antingen CSS eller JavaScript för att utföra ändringarna, men i slutändan kommer du sannolikt att behöva lite JS-kod för att skapa en växlingsknapp.
Detta alternativ är perfekt för att hålla din hemsida dynamisk och full av rika webbmedier. I stället för att helt och hållet ta bort din rullgardinsmeny eller omordna sidstrukturen kan du gömma den inom en innehållsdel. Om användaren vill visa dina länkar trycker de på en växlingsknapp för att öppna / stänga menyn.
Denna formatering är enkel, intuitiv och lätt att arbeta med på pekskärmsenheter. Inne i div kan du placera var och en av rullgardinsmenyerna sida vid sida i ett kolumnformat. När fönstret ändras ännu mindre faller de naturligtvis under varandra och ökar sidhöjden. Men möjligheten att kollapsa hela menyn är lätt att nå och bara en enda kran iväg. Denna bygel div är också perfekt för bildreglage i samarbete med dynamisk bildåtergivning.
Använda mediefrågor
Om en mobil skärm skulle bryta din layout med 2 eller 3 kolumner kommer du att sluta med var och en av de innehållsområden som staplas ovanför varandra. Hela sajten verkar blöda över och kan komma mycket förvirrande utan kända blockområden. En bättre idé är att lägga till en nedre gräns i varje kolumn, bara för mobila enheter, med hjälp av ett externt stilark som mobile.css.
Med dessa nya stilar bryts ditt innehåll upp i delbara sektioner. Medieattributet ovan är speciellt utformat för att riktas mot äldre iPhone-enheter i landskapsvisning. Men det kommer också att gälla enheter med skärmar mindre än 480 pixlar. Använd detta till din fördel så att du kan bestämma vid vilken tidpunkt layouten “bryter upp”.
Det finns några fler alternativ du kan använda för att upptäcka enhetens orientering. Den här fantastiska guiden på CSS-media kan ge dig några idéer. Dessutom erbjuder det nya mobilprojektet 320 och upp en panna för mobil CSS @media stilar. Dessa kan inkluderas direkt i samma mobile.css-fil och tillämpa regler för många olika enheter.
/ * Smartphones (porträtt och landskap) ----------- * / @media bara skärm och (min enhet bredd: 320px) och (max enhet bredd: 480px) / * Styles * / / * Smartphones (landskap) ----------- * / @media bara skärm och (min bredd: 321px) / * Styles * / / * Smartphones (porträtt) ---- ------- * / @media bara skärm och (max bredd: 320px) / * Styles * / / * iPads (porträtt och landskap) ----------- * / @ medias endast skärm och (min enhetens bredd: 768px) och (max enhetens bredd: 1024px) / * Styles * /
(Källa: Hårdvarna CSS3 Media Queries)
Användbara verktyg
- Skelett - Beautiful Boilerplate för Responsive Mobile Design
- Kommer från adaptiv till full responsiv
Showcase: Beautiful Responsive Designs
Jag hoppas att dessa tips och designtekniker kommer att uppmuntra dig att flytta till att bygga spännande responsiva layouter, inte bara för mobila skärmar, men för alla vanliga enheter med webbläsning. För att hålla kreativa juicer flödande har jag lagt ihop en liten showcase av lyhörda mobila webbdesigner. Var noga med att kolla in några av de mer unika funktionerna och dela dina tankar om designen eller ämnet i diskussionsområdet.
hänger upp månen
Macdonald Hotell
CSS-Tricks
Glad Cog
Teixido
CSS Wizardry
Informationsarkitekter
ART = WORK
Hårdkokad webbdesign
Sony USA
Future Friendly
Vi kan inte sluta tänka
Autentiska jobb
Colbow Design
320 och uppåt
Gaffel CMS
Den glada biten
Elektrisk massa
Foster-rekvisita
Plexical
Preeti kakor
Fler faror
Tandläkares informationscenter
ribot - gränssnitt design
Hej Fisher
Social marknadsförare toppmötet
William Csete
Woolly Robot
Meltmedia
Håll dig igång!
I morgondagens inlägg kommer vi att visa några gratis responsiva WordPress-teman Du kan ladda ner för användning. Var noga med att ställa in för det.
