Retina Display Resolution Design: Tips & Tricks för UI Designers

Vandelay Design kan få ersättning från företag, produkter och tjänster som omfattas på vår webbplats. För mer information, se vår informationssida.

med tillkomsten av högupplösta smartphones och retina iMac blir det uppenbart att web & mobila designers måste överväga retina-skärmar i sin designprocess. Fler enheter kommer från hyllan med en retina-skärmupplösning som grupperar flera pixlar i samma fysiska skärmutrymme.

det betyder att innehållet kommer att se skarpare ut om det är korrekt utformat. Så hur ska en UI-designer arbeta för att hantera retina-skärmar? Vilken nuvarande teknik finns tillgänglig och vad är det bästa sättet att hantera den största användarbasen?

jag skulle vilja täcka de mest tillförlitliga metoderna för hantering av retina/hi-DPI-skärmar och skapa gränssnitt som bara fungerar. Om du följer med den här guiden kommer du vara säker på att gå bort med tillämpliga tips och praktiska lösningar på retina display conundrum.

13" och 15 " Macbook-upplösningar

hantering av Retina-enheter

det första steget är att kontrollera skärmskärmar baserade på hi-DPI-upplösningar. Nu när vissa enheter har @3x-storlekar vill du kontrollera ett antal skärmupplösningar innan du visar bilder. Du kan alltid vara säker med @3x-bilder, men de är också mycket större och kräver mer bandbredd att ladda ner.

denna kontroll kan göras med srcset men det finns många olika metoder som använder JavaScript också. Kolla in denna handledning för mer info.

ett trevligt knep för retina-färdiga ikoner är att använda en gratis iconfont istället för bitmappsbilder. Font Awesome är ett mycket populärt val som är helt gratis, öppen källkod och ger ett bibliotek med ikoner att välja mellan.

font awesome ikoner hemsida

ett annat val är att använda SVG-bilder istället för bitmappar. Dessa SVG: er är fullt skalbara vektorer som långsamt har fått fullt webbläsarstöd.

caniuse svg check

den enda svårigheten är att utforma SVGs från början och lära sig att exportera dem ordentligt, vilket kan vara mer invecklat än att bara använda PNG eller JPEG. Plus SVG är inte användbart för detaljerade bilder som fotografier eftersom det verkligen är en vektorfiltyp.

men SVGs har mer utrymme för anpassad animering som visar skarpa vid alla upplösningar.

målet är att bestämma filtyper och webbläsarkontroller från fall till fall. Vissa bilder är bättre som jpg och vissa webbplatser är bättre med CSS vs JS retina kontroller. Jag föredrar personligen CSS, men jag rekommenderar att du försöker båda för att se vad du föredrar.

CSS bakgrundsbilder

det enklaste sättet att hantera anpassade bakgrunder är med retina bakgrundsbilder med egenskapen bakgrundsstorlek.

detta är ofta det snabbaste sättet att kontrollera retina-bilder eftersom de kan fungera på alla enheter, även icke-retina-enheter. Det skadar inte att ha en överoptimerad bild i CSS om du inte har något emot de utökade laddningstiderna.

den alternativa metoden skulle vara att ladda olika CSS-filer baserat på JavaScript-kontroller eller backend-serverkontroller.

men kanske det bästa sättet att hantera CSS är med en CSS retina media query. Dessa frågor kontrollerar pixeldensitet och laddar olika bakgrundsbilder för dessa enheter(även justering av bakgrundsstorleken).

CSS är i allmänhet det enklaste sättet att hantera bilder, men kan inte användas för in-post bilder. Dessa är mycket svårare och bör antingen laddas upp med högsta möjliga upplösning eller uppdateras med JavaScript.

om du inte är så bekymrad över laddningstider, gå bara med den största upplösningen för alla dina bilder. Om inte så vill du ladda upp @2x och @3x bilder manuellt med ett gratis JavaScript-bibliotek som Retina.js.

JavaScript-kontroller

om du vill ha mest kontroll över retina-upplösningsinnehållet behöver du JavaScript. De flesta besökare kör JS-kod och det är det enklaste sättet att upptäcka upplösningar med inbyggda JavaScript-metoder.

du hittar massor av gratis handledning för att upptäcka JavaScript retina-skärmar, men det här är bara halva striden. När du väl vet skärmupplösningen måste du uppdatera bilderna i enlighet därmed.

jag rekommenderar att du använder en förbyggd lösning för att spara tid och huvudvärk under processen.

Utvecklare vill aldrig uppfinna hjulet på nytt. Så om någon annan redan löst detta problem varför ska du bry dig om att börja från början?

den enda anledningen till att rulla din egen lösning är om du behöver anpassad funktionalitet. I så fall kolla in länkarna nedan för att se hur du kan implementera en anpassad JS retina-kontroll.

annars fortsätt rulla och ta tag i ett av de gratis JS-biblioteken som jag har listat i nästa avsnitt.

  • 5 sätt att stödja Retina-skärmar med hög densitet
  • Easy 2x retina-bilder med jQuery
  • servera Retina-grafik till din webbplats

Open Source Retina-verktyg

det finns dussintals anpassade retina-verktyg för att upptäcka och hantera retina-bilder. Dessa är inte alltid det enklaste att genomföra, men de kan göra din publik mycket lyckligare på lång sikt.

så vilken ska du välja att komma igång? Det finns verkligen inget fel svar.

jag skulle vilja ge några av de mest populära verktygen och ge dig chansen att välja vad som fungerar bäst för din webbplats.

näthinnan.js

retinajs open source javascript

näthinnan.js library är en gratis JavaScript-kodbas med öppen källkod som automatiskt upptäcker retina-upplösningar och skärmstorlekar. Skriptet kontrollerar också om det finns en befintlig högupplöst bild efter Apples designriktlinjer, och i så fall växlar den för att visa högupplöst version.

namnkonventioner följer ett suffix på @2x före filtypen. Så om du har my_image.jpg du vill också ha [email protected] i samma mapp.

Detta är ett av de enklaste skripten eftersom det verkligen bara är plug and play. Men det kräver också viss kunskap om näthinneinnehåll för att få det att fungera perfekt. Om du precis har börjat är detta verkligen ett bra skript och du kan inte gå fel med standardfunktionen.

jQuery näthinnan

jQuery JS retina plugin

ett annat alternativ är jQuery Retina som drivs av jQuery library. Detta fungerar lite annorlunda eftersom det körs på HTML5-dataattribut.

du skickar helt enkelt ett bild-URL-värde till data-retina-attributet i varje bildtagg som kräver ett retina-bildalternativ. Det kräver mer hård kodning men det är också det enklaste att rulla tillbaka med anpassade alternativ. GitHub-sidan har mer information med grundläggande steg för installation.

WP Retina 2x

WP WordPress retina @2x plugin

om du är en WordPress-användare kan WP Retina 2x vara ett bra alternativ till att lägga till ett JS-plugin från GitHub. WP Retina-plugin fungerar direkt med WordPress för att söka efter bilder i retina-storlek och ersätter dem automatiskt.

det är en annan plug-and-play-lösning där du bara aktiverar plugin och låter den springa. Super lätt att använda och definitivt en ren lösning för icke-tekniska WP-användare.

tät.js

densejs plugin jquery

vad jag gillar mest om den täta.js library är stöd för varierande enhetsförhållanden. Inte alla retina-skärmar är helt enkelt 2x storleken. Andra förhållanden kan inkludera 1,5 x eller 3x.

detta plugin upptäcker automatiskt vilken skärmtäthet som används och justerar dina bilder i enlighet därmed. Det finns många alternativ så anpassning är inget problem. Kolla in GitHub för att komma igång och online docs för mer information.

om du letar efter mer retina display resurser rekommenderar jag också dessa plugins.

  • CSS Media frågor för iPads & iPhones
  • adaptiva bilder i HTML
  • Swipebox jQuery Lightbox
  • Grails Retina bilder Plugin
  • att välja en lyhörd bild lösning

förhoppningsvis detta material erbjuder mer än tillräckligt för att hjälpa dig att hantera bilder och media på retina-skärmar. Eftersom CSS kommer att skala automatiskt för alla upplösningar behöver du verkligen inte oroa dig för saker som marginaler eller sidbredder.

men media på sidan som ikoner och foton måste vara skräddarsydda för retina-enheter.

Lämna ett svar

Din e-postadress kommer inte publiceras.