Hur man designar för högupplösta skärmar

Författare: Louise Ward

Skapelsedatum: 9 Februari 2021

Uppdatera Datum: 14 Juni 2024

Hur man designar för högupplösta skärmar - Kreativ

Innehåll

Steg till högupplöst
En förändring av processen
En osäker framtid
En attackplan
Kodningstekniker
Speciellt för framtiden
Gillade detta? Läs dessa!

Webbdesignspecialisten Christopher Schmitt har ett positivt svar på frågan om vi bör ta hänsyn till högupplösta visningar i våra designmetoder: ”Vi brukade ha webbläsarkrig. Nu har vi tablettkrig. Marknaden blir bara mer mättad med högupplösta skärmar. Detta måste åtgärdas eftersom problemet inte försvinner. ” Och han är inte ensam. "Faktum är att praktiskt taget alla smartphones och surfplattor nu har en högupplöst skärm och skrivbord är inte långt efter", säger JavaScript-guru Thomas Fuchs. "Men vänta för länge med att svara så blir du kvar."

Inte alla är lika gung-ho. "Jag gillar inte tanken att designa en andra uppsättning högupplösta bilder för Retina och använda JavaScript för att betjäna dem baserat på mottagarenheten", klagar Happy Cog-grundaren Jeffrey Zeldman. "Det känns som ett gigantiskt steg tillbaka till tiden med" bäst sett med ... "Det är inte vad standardbaserad design skulle handla om." Interaktionsdesignern Wells Riley konstaterar att teknikhuvuden kan "fastna i en bubbla, särskilt med nya Retina MacBooks på skrivbordet", men medger att det kan vara dags att "investera hjärnkraft i att anta en ny teknik".

För designern och författaren Andy Clarke är argumentet enklare: "Om du är en webbproffs är du skyldig kunder och användare att få din webbplats att se bäst ut på alla enheter du kan. Det innebär att designa och utveckla för högupplösta skärmar. ” Han tillägger att envägstrenden är mot högre upplösning och precis som Fuchs anser Clarke att designers som standard bör lägga till högupplöst stöd till nya projekt och uppgradera gamla när det är möjligt. "Det är något du inte kan lämna åt slumpen", säger Treesaver medgrundare Roger Black. "Vissa webbplatser hade tur, men då ser du olyckliga jäveler som skickar tidningsappar som en bok med PNG-filer, [och] text diderades så illa att du inte kan läsa den ..."

Steg till högupplöst

Genom att starta omedelbart säger frontend webbutvecklare Todd Motto att du inte behöver ”uppgradera” äldre webbplatser vid ett senare tillfälle. Men med enheter, anslutning och webbstandarder långt ifrån stabila, lönar det sig att planera framåt. "Om jag har en högupplöst iPad men en långsam anslutning, vill jag vänta på en högupplöst bild?" frågar Zeldman. ”Det finns inget sätt att veta säkert. I en värld där mobil är mer och mer viktig och bandbredd är mindre och mindre konsekvent, ser det inte ut som en bra idé att betjäna Retina-optimerade bilder. ”

Designer och utvecklare Mat Marquis uppmanar också försiktighet. ”Två miljarder människor går åt nätet. De flesta är i Asien, med ett stort antal som använder funktionstelefoner och betalar för varje kilobyte de förbrukar. ” Hans poäng är att de medvetet undviker bandbreddstunga webbplatser, och designers måste vara uppmärksamma på att tillgodose denna marknad. ”Det är oansvarigt att sadla användare med extra ekonomiska kostnader för förbättringar som de inte kommer att dra nytta av. Att bygga ”Retina som standard” tänker bara i termer av vårt eget privilegierade sammanhang - skarpa bilder för våra $ 3000 bärbara datorer, levererade via nästan obegränsad bandbredd. ”

Ursprungligen är nyckeln att prioritera. Frilansdesigner Paddy Donnelly föreslår att man serverar en högupplöst logotyp, vilket "gör stor skillnad i hur människor upplever ditt varumärke på en Retina-skärm". Hantera ikoner därefter, säger han, för "de kan bli oigenkännliga när de skalas upp". För andra aspekter av en webbplats föreslår Kitcatt Nohr Digitas tekniska chef Mo Morgan att fokusera på förhållandet mellan innehåll och användare: ”Det finns sammanhang där användare kan dra nytta av högre upplösning, till exempel bilder av varor i en onlinebutik. Det är svårt att förstå varför en användare inte vill se något tydligare något de kan köpa. "

En förändring av processen

De tankar som hittills beskrivits visar hur högupplösta har stört webbdesignvissheter. "Vi har spenderat 20 år på att vi bygger webbplatser för att vara webbläsaragnostiska, men det var en vit lögn", säger Schmitt och resonerar att antaganden ofta gjordes om 960 pixlar och 72 punkter per tum. "Nu har sanningen blivit avslöjd, vi måste tänka på design som en serie villkor som skapar olika smaker av en design."

Morgan anser att detta ”blandade tillstånd” bör leda till omvärderingar av produktionen. "Om du bygger en webbplats och det inte kan motivera specifika överväganden för högupplösta idag, betyder det inte att det inte kommer att göra det i framtiden. Och det finns inget att säga att vi inte kommer att se ännu högre upplösningar. ” För att göra övergångar smärtsamma rekommenderar han att man inte längre anser webbplatsförvar som ögonblicksbilder av en ”slutprodukt” med kraftigt optimerade tillgångar. ”Högupplösta enheter påminner oss om att det är viktigt att versionera källorna till sådana tillgångar, inklusive utskriftskvalitetsbilder och vektorillustrationer. Vi vet inte när vi behöver dem igen, men det är troligt att vi kommer att göra det. ”

Mobilstrateg Jason Grigsby instämmer och förespråkar lagring och uppladdning av alla tillgångar med högsta tillgängliga upplösning. ”Fotografiet som verkar för stort för att någonsin vara vettigt online kan senare komma till nytta när alla använder Ultra HDTV i sina hem. Men att försöka spåra källfiler senare är dyrt när alla har lämnat ett projekt. ” Utöver fotografi tycker Fuchs att "det lönar sig att ha konstverk som vektorer när det är möjligt".

En osäker framtid

Grigsby, Fuchs och andra tänker framåt. Du bör inte slösa tid på att optimera för pixeldensiteter som ännu inte finns, men det finns ingen skada i planeringen av vad som kan vara. "Det skulle vara dumt att begränsa vårt tänkande till x1- och x2-bilder", tror designern och utvecklaren Dan Eden. "Pixeltätheten kommer sannolikt att fortsätta bli intensivare, men kan du tänka dig att visa bilder i storlekarna x1, x2, x3 och x4?" Han gynnar också vektorer, och även CSS3 för skalbara element som knappar, tillsammans med innehållshanteringssystem som WordPress, som automatiskt genererar flera upplösningar för uppladdade bilder.

Clearleft frontend-utvecklare Josh Emerson instämmer och hävdar att du bara borde sikta på 'x?', För precis som du inte längre kan förutsäga visningsstorleken på en användares skärm är det snart inte möjligt att förutsäga upplösningstäthet. "Omfatta framtidens osäkerhet genom att känna igen allt du inte vet och utforma för det", föreslår han.

Det finns ytterligare osäkerheter framöver baserat på hur högre upplösningar påverkar innehållet. Fotograf Will Fallon säger att även om befintligt kit producerar bilder som är lämpliga för höga upplösningar, "minskas marginalen för fel avsevärt, så kreativa underlag och planering blir betydligt viktigare". Han tror att fotografer snart kommer att kräva för att uppgradera kameror i enlighet därmed, och de kreativa friheterna de åtnjuter inom webbmiljön kan begränsas. Typografi är ett annat starkt drabbat område, eftersom skärmar utvecklas från uppenbar pixellering till ett tillstånd som liknar utskrift. "Men allt är relativt", varnar Black. ”En Retina-skärm är inte lika skarp som en laserskrivare. För att läsa rekommenderar jag fortfarande teckensnitt som är utformade för liten text, som Verdana och Georgia, eller Reading Edge-teckensnitt från Webtype. ”

Även om industrisiffror också entusiaster över den moderna webbens frihet vad gäller typsnitt och höga upplösningar, instämmer frilansdesignern Oli Studholme med Black att "standard" -teckensnitt inte nödvändigtvis är en dålig idé: "Om du använder höga DPI-bilder, kanske en standardteckensnitt för brödtext är en värdefull eftergift för prestanda. ” Han tillägger att även om högupplösta displayer visar detaljer om ett teckensnitt, så är det inte alltid en bra eller en dålig sak: ”Teckensnitt som ursprungligen var utformade för tryck tenderar att fungera bra, men dessa skärmar är fortfarande nya och gjuterier anpassar sig fortfarande till dem . ” Dessutom konstaterar Emerson att sådana skärmar kan vara mer exakta, men de "förbättrar inte någons syn på ett magiskt sätt och gör dem inte heller mer tvungna att läsa långa stycken skrivna med något snyggt teckensnitt", och det är därför viktigt att upprätthålla läsbarheten.

En attackplan

Abstrakter är bra, men vid något tillfälle måste du anamma den aktuella verkligheten och börja arbeta med tillgångar, markering och CSS på ett sätt som fungerar med olika skärmar. Många tekniker finns för produktion och tillämpning, beroende på innehållet du arbetar med. Med rasterbilder rekommenderar Studholme att vara noga med att skapa innehåll som delar sig enkelt och minskar väl, vilket undviker udda pixelbredder i x2-bilder. "Bli bekant med att skripta ditt bildprogram för att spotta ut de storlekar du behöver, eventuellt i flera format för att jämföra vilket som är bäst för varje storlek", säger han och tillägger att logotyper och favoritikoner är ett bra ställe att börja. Experimentera med komprimering med större bilder. "Jag har hittat en bild som komprimerar bättre i PNG vid normal upplösning och JPG vid höga upplösningar", konstaterar Studholme; och eftersom pixlar är nästan omöjliga att lösa på högupplösta, kan du ofta komma undan med tyngre JPEG-komprimering än när du exporterar för standardskärmar.

Det är också viktigt att inse när man ska undvika att använda bilder helt. Studholme säger: ”Text är alltid högupplöst, så undvik text som bilder. Använd CSS3 för att blinga som droppskuggor. Om du har svartvita vektorbaserade bilder som ikoner, överväg ikonsteckensnitt eller SVG. Bästa praxis - som att designa från innehållet, progressiv förbättring och lyhörd webbdesign - ger dig också en solid bas. ” Bjangos regissör Marc Edwards varnar för att noggrant testa bildutdata, snarare än att göra antaganden: ”Gränssnittselement skapade helt i CSS-skala oändligt, men kan vara en prestanda flaskhals om de är alltför komplexa. SVG är bra för siffror och ikoner, men att vara vektor och ritas vid körning kan det orsaka prestandaproblem om bilden är för detaljerad. Bildteckensnitt har bra webbläsarstöd, men de är svåra att skapa och underhålla och erbjuder inte precision på pixelnivå. "

Kodningstekniker

För markering och CSS optimerar Clarke först webbplatsmöbler med CSS-bakgrundsbilder och CSS3-mediefrågor. Denna teknik gör det möjligt för webbläsaren att reagera på en enhets pixeldensitet genom att betjäna lämplig bild. För inbyggda bilder räknar Motto med att du behöver mer kontroll, och förespråkar att du använder en img> -tagg med en minskad bredd på 50 procent. Detta, säger han, fungerar särskilt bra för logotyper. I huvudsak använder du en logotyp med dubbelt så stor som du vill att den ska visas i högupplöst display och definierar bredd- och höjdvärden till hälften av dess dimensioner i CSS (med regler som #container img).

JavaScript bör undvikas enligt Fuchs, förutom bakåtkompatibilitet med SVG. "Det är onödigt och ökar belastningstiderna", säger han. ”Istället kan du vanligtvis använda en högupplöst bild, utforma för Retina och låta webbläsare på icke-Retina-skärmar skala ner bilderna. Detta kommer också att hjälpa till med mobila enheter där människor zoomar in för att läsa - bilderna ser skarpare ut eftersom upplösningen är högre. ” Undantag, konstaterar han, är ikoner och liten typ av grafik: "Du vill ha separata versioner - normala och högupplösta - där för att justera ikoner pixel-för-pixel om det behövs." Det är också viktigt att komma ihåg att komprimera när du visar större bilder.

Marquis har en motsatt syn på skript och rekommenderar att man utforskar några för att se om de passar ditt syfte. För högupplösta innehållsvärden svär han vid Scott Jehls Picturefill, som "efterliknar beteendet hos den föreslagna bilden> elementet genom att använda standardkompatibel markering och attribut". Till skillnad från många ”standard kontra högupplösta” -lösningar undviker Picturefill en redundant begäran: ”I stället för att begära standardbilden och sedan eventuellt begära högupplöst bild, begär den bara bilden som är lämplig för användarens sammanhang.” Det finns också en gren som gör det möjligt för användaren att definiera en webbplatsövergripande preferens, vilket möjligen uppfyller problemet som Zeldman nämnde tidigare.

Dessutom räknar Marquis med att smärtan med att förbereda reserv för icke-SVG-webbläsare kan utrotas med Grunticon, ett plugin-program skrivet för Ben Almans Grunt.js av Filament Group. Grunticon tar en katalog med SVG-ikoner och skapar ett formatmall med inbyggda SVG-ikoner, ett formatmall med inbyggda PNG: er (för webbläsare som inte stöder SVG men stöder data-URI: er) och ett formatmall som länkar till en uppsättning PNG: er det gammaldags sättet (för äldre versioner av IE). "Efter att ha bara använt den i produktion en handfull gånger kan jag inte föreställa mig att gå tillbaka till jonglering av sprite-lakan", entusiastisk Marquis.

Speciellt för framtiden

Delvis beror oenigheter om teknik och metoder från det faktum att standarder klottrar för att hålla jämna steg med ökande upplösningar. Få designers klandrar standardorgan och webbläsartillverkare, men de har fortfarande önskelistor. "Vi behöver en lagringslösning för bildformat som kan lagra många upplösningar av en bild, och webbläsaren kan dra den den behöver", säger Schmitt. Emerson instämmer i att lägga till detta skulle kunna minska sprite-användningen, som han ser (tillsammans med ikonfonter) som ett hack: ”Vi missbrukade bakgrundsposition och visning: ingen för att minska förfrågningar och tillhandahålla en bild snarare än 100. Jag skulle vilja se en format som gör att många bilder kan buntas i en enda fil och ger varje bild ett namnområde så att vi kan ange vilken bild som ska användas med något mer vänligt än bakgrundsposition: 0, -100px. Detta kan vara en zip-fil som innehåller en massa tillgångar, och namnområdet skulle vara deras filnamn. ”

Det finns också samtal för webbläsarintelligens relaterad till nätverkshastighet. "Så småningom kommer vi att gå mot innehållsförhandlingar där en webbläsare bestämmer vilken upplösning av innehåll den föredrar baserat på nätverks- och användarpreferenser - liknande video nu - men vi måste röra oss för tillfället", räknar Studholme. Och Black hoppas att W3C kommer att definiera en ”absolut storlek för CSS, som den meterlånga platinafältet i franska nationalarkivet”. Han påminner om att "storlekens konstighet på webben" började med Microsoft på 1990-talet, och vi gav upp poäng för pixlar. Nu flyttar vi till en punkt där vi inte kan förutsäga pixelns storlek.

Vi har dock de verktyg vi har, och Rileys råd är att använda dem och inte oroa sig för mycket för vad som kan komma flera år längre fram: ”De flesta webbprojekt har kort hållbarhet - en fem år gammal webbplats är praktiskt taget gammal. Men tänk om 3D är nästa revolution? Eller hologram? Ingen kan förutse vad som kommer att hända om ett, tre eller fem år. " Högupplöst eller på annat sätt, han tror att om en webbplats plötsligt inte fungerar under nya begränsningar kommer du förmodligen att omforma den ändå, så dra bara nytta av det som för närvarande är tillgängligt. "

Den här artikeln publicerades först i nummer 235 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.