For få år siden var det relativt nemt at designe og opbygge hjemmesider. Websites var enklere, og blev set på desktops og laptops med lidt variation i skærmstørrelser. I dag med mobilenheder, der overtager seernes browsertid, kan en hjemmeside ses på en 4,8 "smartphone skærm, en 5" phablet, en 7 "tablet eller en hvilken som helst størrelse i mellem.
Så hvordan sikrer du, at din hjemmeside vises korrekt på tværs af enhedstyper og skærmstørrelser?
Løsningen blev først foreslået af Ethan Marcotte, da han udforskede måder at gøre hjemmesidedesigner lydhøre, dvs. få dem til at ændre sig efter skærmstørrelsen. Et lydhurt websteddesign er en, der gør en smart brug af CSS for at sikre, at websider gør det godt på tværs af en bred vifte af skærmstørrelser - uden at ty til URL-omdirigering eller dynamisk betjening af forskellige HTML- og CSS-kode afhængigt af UserAgent. Det er ikke rigtig en teknologi eller en standard, men snarere et sæt designprincipper, der hjælper med at opnå resultatet.
I løbet af de sidste par år er mange responsive skabeloner, CSS-rammer og WordPress-temaer spredt op. Det er for eksempel muligt at oprette et lydhurtigt websted i WordPress uden at skrive en enkelt kode kode.
Men en rigtig webdesigner er ikke tilfreds med blot at bruge skabelonerne. Hun vil gøre en indsats for at forstå elementerne i lydhurt webdesign for at kunne bruge dem effektivt.
Så i dag skal vi se på de 3 grundlæggende teknikker du behøver at mestre, du er en effektiv lydhør designer.
Medieforespørgsler kan du designe forskellige layouter til forskellige medietyper som skærm, print, tv, håndholdte enheder osv. Afhængigt af medietypen kan du konfigurere stilen, skrifttypen og andre elementer på siden.
Introduceret i CSS3, giver medieforespørgsler en designer mulighed for at tilpasse præsentationen af indholdet, så det passer til et specifikt udvalg af outputenhedstyper. De består af en medietype-erklæring og et eller flere mediefunktions udtryk, der vurderer til sandt eller forkert.
Sortimentet af medietyper omfatter håndholdt, skærm, tv, print og projektion. Mediefunktioner omfatter, men er ikke begrænset til enhedshøjde, bredde, billedformat, opløsning, farveindeks samt højde, bredde af browservinduet.
Lad os tage et grundlæggende eksempel; Forestil dig, at du vil have din tekststørrelse til at krympe på mindre enheder, som f.eks. telefoner. Forespørgslen til det ville se noget ud:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Skriftstørrelsen på dine afsnit bliver nu indstillet til 1em, med mindre browseren er mindre end 400px, og i så fald krymper den til 0.8em.
Efter min erfaring er den bedste måde at designe et responsivt layout på at oprette et standard master stilark med de vigtigste strukturelle elementer. Derefter kan du tilføje medieforespørgsler til at tilpasse elementer baseret på layoutet eller andre enhedselementer. Hvis det er mere end en håndfuld regler, kan det være bedre at flytte dem ud til et særskilt børneark - som du senere kan selektivt indlæse. Sådan fungerer det:
Dette stykke kode kontrollerer, om enheden er en håndholdt i landskabsmodus med enheden bredde mindre end 720px, og i så fald lægger den tablet_layout.css stilarket op.
Bemærk, at funktionerne bredde, højde, min / maxbredde, min / max-højde alle henviser til browservinduets bredde og højde. Enhedsbredden og højden styres af enhedens bredde, enhedshøjde, min / maksimal enhedsbredde, min / maksimal enhedshøjde . Hvis du gerne vil kigge op flere eksempler ved brug af medieforespørgsler MDN har en god runde op.
"Fluid grid" er et udtryk, der bruges til at beskrive et layout, der er kodet i relative proportioner af de forskellige elementer, snarere end med faste pixelværdier.
Traditionelle CSS-layouter brugte faste breddegitter til at placere elementerne. Fast-bredde tilgangen virker ikke længere i dag nu, da vi har enhed skærme spænder fra 3 inches til et par meter. I et væskeformet design er alt kodet i forhold til dets relative forhold til basiselementet, dvs. i stedet for at specificere højden og bredden af hvert element; den gives en procentdel eller en relativ størrelse.
Forestil dig at du har fire kolonner. For at gøre denne væske, i stedet for at specificere hver som 200 pixel bred, skal du angive dem 0,2083% (dvs. som 200/960). Det er i hvert fald princippet. At skabe et helt fluidgitter kræver meget omhu. Det er et af de sjældne tilfælde, jeg vil hellere anbefale at bruge brugerdefinerede værktøjer. Tiny Fluid Grid , Variable Grid System og Fluid Baseline Grid er nogle gode alternativer til at skrive dit eget væskenet fra bunden.
Billeder anses for at være fleksible, når billedet gøres i native størrelse, så længe HTML-beholderen understøtter det, men når browservinduet krymper, skaler billedet for at passe det.
Selvom resten af designet er flydende og lydhør, går det ikke godt, hvis alle komponenter ikke skaleres. Dette kan blive vanskeligt med billeder og videoer. Et 700 pixel stort billede vil se godt ud på et skrivebord, men få hakket ud, når det ses på en 320 pixel tablet. De fleste moderne responsive designs bruger CSS maxbreddeegenskaben til at gøre billedskala. (Denne metode var først foreslået af Richard Butler .)
img {max-width: 100%;}Disse få linjer sikrer, at billedet ikke bliver hugget af ved at indstille maksimal billedbredde til 100% af beholderen. Hvis browservinduet eller skærmen bliver mindre, vil dette stykke CSS kode krympe billedet proportionalt. Højden justeres automatisk, mens billedforholdet låses.
Du kan i stedet låse billedet for at optage en vis lodret skærmandel som denne
img {max-height: 75%;}(Sørg for ikke at bruge både max højde og maksimal bredde egenskaber sammen.)
Billedstørrelsen kan også knyttes til tekststørrelsen i stedet for moderelementet ved hjælp af em , som denne:
img {width: 30em;}Hvis billedet indeholder tekst, skal du muligvis begrænse minimums- / maksimumstørrelsen for at sikre, at teksten kan læses. Du kan angive det som følger:
img {width: 30em;max-width: 500px;min-width: 100px;}De samme teknikker kan bruges til at skalere videoer, for eksempel:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Responsivt design er fremtiden for vores branche, men med så mange forskellige teknikker, der flyver rundt, er det ofte svært at holde op. Master disse 3 enkle teknikker, og du vil være 90% af vejen til at være en lydhør designer.
Fremhævet billede / miniaturebillede, elastisk billede via Shutterstock.