ontwerp van Retina-beeldschermresolutie: Tips & Tricks voor UI-ontwerpers

Vandelay Design kan compensatie ontvangen van bedrijven, producten en diensten die op onze site worden behandeld. Voor meer details verwijzen wij u naar onze Disclosure pagina.

met de komst van hi-res smartphones en de retina iMac wordt het duidelijk dat web & mobiele ontwerpers retina displays in hun ontwerpproces moeten overwegen. Meer apparaten komen van de plank met een Retina-display resolutie die groepeert meerdere pixels in dezelfde fysieke schermruimte.

dit betekent dat de inhoud scherper zal lijken als deze goed is ontworpen. Dus hoe moet een UI ontwerper werken om retina schermen te behandelen? Welke huidige technologie is beschikbaar en wat is de beste manier om met de grootste userbase om te gaan?

Ik wil graag de meest betrouwbare methoden behandelen voor het omgaan met Retina / hi-DPI schermen en het creëren van interfaces die gewoon werken. Als u deze gids volgt, zult u zeker weglopen met toepasselijke tips en praktische oplossingen voor het netvlies-display raadsel.

13" en 15 " Macbook resoluties

behandeling van Retina-apparaten

de eerste stap is het controleren van schermweergaven op basis van hi-DPI-resoluties. Nu sommige apparaten @3x-maten hebben, wilt u een aantal schermresoluties controleren voordat u afbeeldingen weergeeft. Je kunt altijd veilig zijn met @3x-afbeeldingen, maar ze zijn ook veel groter en vereisen meer bandbreedte om te downloaden.

deze controle kan gedaan worden met srcset, maar er zijn ook veel verschillende methoden die JavaScript gebruiken. Bekijk deze tutorial voor meer info.

een leuke truc voor retina-ready iconen is om een gratis iconfont te gebruiken in plaats van bitmap-afbeeldingen. Font Awesome is een zeer populaire keuze die is volledig gratis, open source, en biedt een bibliotheek van pictogrammen om uit te kiezen.

font awesome pictogrammen homepage

een andere keuze is om SVG images te gebruiken in plaats van bitmaps. Deze SVG ‘ s zijn volledig schaalbare vectoren die langzaam hebben opgedaan volledige browser ondersteuning.

caniuse svg controle

de enige moeilijkheid is het ontwerpen van SVG ’s vanaf het begin en het leren om ze goed te exporteren, wat ingewikkelder kan zijn dan alleen het gebruik van PNG ’s of JPEG’ s. Plus SVG is niet nuttig voor gedetailleerde afbeeldingen zoals foto ‘ s, omdat het eigenlijk een vector bestandstype.

maar SVG ‘ s hebben meer ruimte voor aangepaste animatie die bij alle resoluties helder weergeeft.

het doel is om bestandstypen en browsercontroles van geval tot geval te bepalen. Sommige afbeeldingen zijn beter als JPG ‘ s en sommige websites zijn beter met CSS vs js retina controles. Ik persoonlijk liever CSS, maar ik raad proberen beide om te zien wat je liever.

CSS-achtergrondafbeeldingen

de eenvoudigste manier om aangepaste achtergrondafbeeldingen te verwerken is met retina – achtergrondafbeeldingen met behulp van de eigenschap achtergrondgrootte.

dit is vaak de snelste manier om retina-afbeeldingen te controleren omdat ze op alle apparaten kunnen werken, zelfs niet-retina-apparaten. Het doet geen pijn om een over-geoptimaliseerd beeld in CSS als je het niet erg de uitgebreide laadtijden.

de alternatieve methode zou zijn om verschillende CSS-bestanden te laden op basis van JavaScript controles of backend server controles.

maar misschien is de beste manier om met CSS om te gaan met een CSS retina Media query. Deze queries controleren pixeldichtheid en laden verschillende achtergrondafbeeldingen voor die apparaten (ook het aanpassen van de achtergrondgrootte).

CSS is over het algemeen de eenvoudigste manier om met afbeeldingen om te gaan, maar kan niet worden gebruikt voor in-post afbeeldingen. Deze zijn veel lastiger en moeten ofwel worden geüpload met de hoogst mogelijke resolutie of bijgewerkt met JavaScript.

als u niet zo bezig bent met laadtijden, kies dan gewoon de grootste resolutie voor al uw afbeeldingen. Zo niet dan wilt u @2x en @3x afbeeldingen handmatig uploaden met een gratis JavaScript-bibliotheek zoals Retina.js.

JavaScript Checks

Als u de meeste controle over retina resolutie inhoud wilt dan hebt u JavaScript nodig. De meeste bezoekers draaien JS-code en het is de makkelijkste manier om resoluties te detecteren met ingebouwde JavaScript-methoden.

u vindt veel gratis tutorials voor het detecteren van JavaScript retina displays, maar dit is slechts de helft van de strijd. Zodra u de schermresolutie Weet, moet u de afbeeldingen dienovereenkomstig bijwerken.

Ik adviseer om een vooraf gebouwde oplossing te gebruiken om tijd en hoofdpijn te besparen tijdens het proces.

ontwikkelaars willen het wiel nooit opnieuw uitvinden. Dus als iemand anders dit probleem al heeft opgelost waarom zou je de moeite nemen om vanaf nul te beginnen?

de enige reden om uw eigen oplossing te draaien is als u aangepaste functionaliteit nodig hebt. In dat geval check out de onderstaande links om te zien hoe u een aangepaste js retina check kunt implementeren.

anders blijven scrollen en pak een van de gratis js-bibliotheken die ik in de volgende sectie heb vermeld.

  • 5 manieren om high-Density Retina Displays
  • Easy 2x retina images met jQuery
  • Toon Retina afbeeldingen op uw Website

Open Source Retina Tools

er zijn tientallen aangepaste retina tools voor het detecteren en beheren van retina afbeeldingen. Deze zijn niet altijd de makkelijkste te implementeren, maar ze kunnen uw publiek een stuk gelukkiger op de lange termijn.

dus welke moet u kiezen om te beginnen? Er is echt geen verkeerd antwoord.

Ik wil graag een aantal van de meest populaire tools bieden en u de kans geven om te kiezen wat het beste werkt voor uw site.

netvlies.js

retinajs open source javascript

het netvlies.js library is een gratis open source JavaScript-codebase die automatisch retina-resoluties en schermformaten detecteert. Het script controleert ook of er een bestaande afbeelding met hoge resolutie volgens Apple ‘ s ontwerprichtlijnen, en zo ja, het zal overschakelen naar de hi-res-versie weer te geven.

naamgevingsconventies volgen een achtervoegsel van @2x voor het bestandstype. Dus als je mijn _afbeelding hebt.jpg die je ook wilt hebben [email protected] in dezelfde map.

dit is een van de eenvoudigste scripts omdat het eigenlijk gewoon plug and play is. Maar het vereist ook enige kennis van retina-inhoud om het perfect te laten werken. Als je net aan de slag Dit is echt een geweldig script en je kunt niet fout gaan met de standaard functionaliteit.

jQuery Retina

jquery js retina plugin

een andere optie is jQuery Retina aangedreven door de jQuery bibliotheek. Dit werkt een beetje anders omdat het draait op HTML5 data attributen.

u geeft eenvoudig een URL-waarde van de afbeelding door aan het data-retina-attribuut in elke afbeeldingstag die een alternatief voor de retina-afbeelding vereist. Het vereist meer harde codering, maar het is ook het makkelijkst om terug te rollen met aangepaste opties. De Github pagina heeft meer info met basisstappen voor installatie.

WP Retina 2x

wp wordpress retina @2x plugin

als je een WordPress gebruiker dan WP Retina 2x misschien een geweldig alternatief voor het toevoegen van een js plugin van GitHub. De wp Retina plugin werkt direct met WordPress om te controleren op retina-formaat beelden en vervangt ze automatisch.

het is een andere plug-and-play oplossing waarbij je gewoon de plugin activeert en laat draaien. Super makkelijk te gebruiken en zeker een schone oplossing voor niet-technische WP gebruikers.

dicht.js

densejs plugin jquery

wat ik het leukst vind aan de dichtheid.js library is de ondersteuning voor variërende apparaat verhoudingen. Niet alle Retina displays zijn gewoon 2x de grootte. Andere verhoudingen kunnen 1,5 x of 3x omvatten.

deze plugin detecteert automatisch welke schermdichtheid wordt gebruikt en past uw afbeeldingen dienovereenkomstig aan. Er zijn veel opties, dus maatwerk is geen probleem. Bekijk de GitHub om te beginnen en de online docs voor meer informatie.

als u op zoek bent naar meer Retina display bronnen raad ik deze plugins ook aan.

  • CSS Media Queries voor iPads & iPhones
  • adaptieve afbeeldingen in HTML
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • een responsieve Afbeeldingsoplossing kiezen

hopelijk biedt dit materiaal meer dan genoeg om u te helpen met afbeeldingen en media op Retina-displays. Aangezien CSS automatisch zal schalen voor alle resoluties die u echt geen zorgen te maken over dingen zoals marges of pagina breedtes.

maar media op pagina ’s zoals pictogrammen en foto’ s moeten speciaal ontworpen zijn voor retina-apparaten.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.