Jeg gennemsøger internettet hver dag på flere enheder. Jeg bruger min Macbook Pro, iMac, PC, iPad, iPhone og ja endda mit fjernsyn. Så det generer mig virkelig, når jeg ser websteder, der ikke er optimeret til større skærmopløsninger, eller det tager to minutter at indlæse på min mobile enhed.
Vi har alle taget imod begrebet lydhørt design. Meget få mennesker argumenterer imod det. Faktisk er den eneste overbevisende repost jeg har hørt for nylig, at en klient ikke er villig til at betale for den ekstra tid, der er involveret. Men som med enhver ny praksis har myter vokset op for at modvirke det.
Lad os se, om vi kan buste nogle af disse misforståelser ...
Ja mobilwebben eksploderer og ja det er drivkraften bag lydhørt design, men når vi tænker på lydhørt design, skal vi overveje mere end bare mobil. Med introduktionen af nethinden og browsere til videospil ser internetbrugere nu websites på større skærmopløsninger og i mange forskellige sammenhænge.
Prøv at tage hensyn til forskellige brugerkontekster, når du designer og udvikler lydhøre websites. Du skal tænke på, hvilken enhed en bruger bruger: Er brugeren på en mobil enhed eller hjemme foran fjernsynet? Du skal tænke på, hvor brugeren er placeret: Er brugeren i kø på købmanden eller camping i ørkenen? At have godt indhold betyder intet, hvis dit websted tager ti minutter at indlæse, mens dine brugere sidder på stranden og har en margarita.
Indhold er alt, men kontekst er overalt, og det er noget, du har absolut ingen kontrol over. Det er derfor, realistisk, at dit indhold skal skaleres til enhver opløsning, stor eller lille. Vi har et sæt værktøjer til vores rådighed, der giver os mulighed for at manipulere layouter, optimere tekststørrelser og øge ydeevnen i enhver sammenhæng, så husk at bruge dem.
Husk, at konteksten skifter hele tiden, hvorfor det er så vigtigt at afbalancere det visuelle layout, brugerens behov og ydeevne, når man nærmer sig et lydhørt design. Det handler ikke kun om mobil.
Jeg plejede at argumentere for, at lydhurtigt webdesign ikke virker for hvert projekt, og at det afhænger af brugen sagen. Nå har jeg for nylig ændret min opfattelse, og jeg tror fuldt ud på, at hvis vi skal være brugerorienterede designere og udviklere, skal vi nærme alle projekter med et responsivt design i tankerne.
Websteder med fast bredde kan være begrænsende for større og mindre skærmopløsninger. Den nederste linje er, at vores websteder skal være tilgængelige for alle, uanset hvilken enhed eller skærmopløsning de bruger, uden begrænsninger.
Jeg har bemærket en tendens, der opstår i branchen, hvor designere og udviklere bygger lydhørige websites, der kun er målrettet mod bestemte enhedsopløsninger, og jeg er også skyldig i det. De tre mest almindelige enheder er selvfølgelig laptops / desktops, iPads og iPhones (eller andre mobile enheder). Som designere er vi nødt til at indse, at responsivt design drejer sig om design breakpoints og gør indhold læselig og tilgængelig for alle, ikke kun brugerne af bestemte enheder.
Når det er sagt, hvis du designer websites i et softwareprogram, er det vigtigt at have en form for rammer med breakpoints at arbejde ud af. Jeg foreslår at oprette din egen. Optimer dit layout i henhold til indholdet. Den bedste måde at finde ud af, hvilke breakpoints der fungerer bedst, er at skitsere et par wireframes først for at få en ide, så du kan begynde at lægge pixler i din valgte software. Sørg for, at du arbejder ud af det samme gitter, når wireframing og design.
Hvis du er ligesom mig, så kode du dine wireframes og oprette en levende prototype. Dette har hjulpet mig meget med min lydhøre arbejdsgang, fordi jeg kan oprette en flydende mockup og tilføje breakpoints til designet som design bryder i stedet for at prøve at cram pixels i Photoshop.
Et af de største problemer, jeg har bemærket på mange lydhørige websites, er, at typografi er kastet til ulvene, når designere og udviklere vælger at bruge enhedens breakpoints over design breakpoints. Efter min mening vælger enheden over design en fuldstændig tilsidesættelse af indholdet, der udgives, og brugeren bruger dette indhold. Indholdet skal bibeholde dets læsbarhed, indtil det skal justeres for at opretholde læsbarheden. Indhold vil altid være konge, og tilgængeligheden og læsbarheden af dit indhold skal altid have højeste prioritet.
En af de måder, jeg kan godt lide at håndtere læsbarheden af indhold i et lydhørt design på, er at bruge relative enheder som ems for skrifttypestørrelse, polstring, margener og layout. Responsivt design handler om proportionerlige layouter, og efter min mening er ems en perfekt pasform.
Ems er relative enheder, der kan skaleres til bogstavstørrelsen af overordnede elementer, de kan spare dig for meget tid og besvær, og de hjælper med at opretholde strukturen i hele dit layout. Hvad betyder det, du spørger? Tja, det betyder, at når skrifttypestørrelsen stiger eller falder, justerer layoutet jævnt uden at fudge noget op.
Her er et eksempel, lad os sige, at vi har fundet to design breakpoints, en til en meget stor stationær skærm med en super opløsning og en til en lille tablet. Lad os også sige, at vores standard fontstørrelse er 16px, hvilket svarer til 1.0em, og vi støtter basis skrifttypestørrelsen op til 22px, når webstedet ses med en opløsning på 3840 x 2160 (super opløsning), og vi sænker den grundlæggende skrifttypestørrelse til 14 px ved en opløsning på 800 x 600 (lille laptop / tablet). Vi har lige dramatisk ændret størrelsen af typen og layoutet på vores hjemmeside på to udpegede breakpoints, en stor og en lille. En overskrift på 1.4em med en skrifttypestørrelse på 22 px for større opløsninger betyder, at 1.4em svarer til 30,8 px og ved den mindre basepoststørrelse på 14 px, ville 1,4em være 19,6 px. Selvom vores skriftstørrelse blev dramatisk større på 3840 x 2160, behøver vi ikke bekymre os om layoutbruddet, fordi det også har justeret. Lad os sige, at vores indeholdende element havde en bredde på 50em. Ved en opløsning på 800 x 600 ville det være 700px men ved opløsningen på 3840 x 2160 ville det være 1100px. Vores polstring og marginer ville også tilpasses. Ved den større opløsning, der har skrifttypestørrelser og layout i ems, har vi tilladt vores design at skalere proportionalt, hvilket gør vores indhold mere tilgængeligt og mere læsbart.
Formålet med responsivt design er at gøre dit indhold tilgængeligt for alle, selv deaktiverede, på tværs af alle skærmopløsninger og enheder. At gemme indhold er aldrig en god ide, og chancerne er, hvis du skal skjule det, behøvede du ikke det til at begynde med. Skjul indhold gør det ulæseligt for skærmlæsere, og du gør nu dit indhold utilgængeligt for dem med visuelle eller kognitive handicap. Husk at indholdet skal være universelt på tværs af alle enheder, ikke straffe dine brugere ved at begrænse det, de kan se på en separat enhed.
Når det er sagt, finder jeg stadig et par brugssager hvor displayet: ingen; kommer til nytte. For det meste beskæftiger alle brugssager sig med en form for navigation, og jeg bruger display: none; på navigationselementer, der ændrer form på forskellige enheder. Det er aldrig en god ide at begrænse eller skjule indhold på forskellige enheder, fordi du højst sandsynligt har baseret denne beslutning på en antagelse, og nogle brugere, et eller andet sted, vil have en meget dårlig oplevelse.
Der har været en række hjemmesider, som jeg har set sidst, der har vist mangel på empati til brugere med lav båndbredde. De fleste af disse websteder har de samme ting til fælles, store billeder og store JavaScript-biblioteker, og mange af disse hjemmesider kunne have været optimeret, hvis de blev designet med en mobil første tilgang.
Fordi der stadig er meget diskussion om lydhøre billeder, er det svært for enhver at forpligte sig til en eneste løsning. Jeg forstår dilemmaet, men venter på en perfekt løsning, der er standard på tværs af alle browsere, og enheder gør ikke din nuværende hjemmeside nemmere at bruge på enheder med begrænset båndbredde. Find en løsning, som bedst løser dit problem og løber med det. Ikke at finde en løsning betyder præstationsproblemer for alle, og det fuldstændig besejrer formålet med lydhør design.
Store JavaScript-biblioteker kan også forårsage problemer på mindre enheder. Prøv at finde en måde at kalde dem betinget baseret på skærmopløsning eller enhedstype. Ydeevne bør ikke være en eftertanke når det kommer til responsivt design.
Internettet er eksploderet, og med fremkomsten af mobil- og smarttelefonteknologi kan vi få adgang til indhold overalt og i enhver sammenhæng. Det er vigtigt at sikre, at vi kan nå alle vores brugere og give dem det, de vil have, når de vil have det. Responsivt design er en meget ny teknik, og efter min mening er det den perfekte teknik til at forene vores indhold på tværs af internettet.
Hvilke andre myter om responsivt design vil du gerne debunk? Er der nogen ulemper til lydhør design? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, lydhurtigt webbillede via Shutterstock.