Om du inte redan har noterat, går webben högt def. Från bilder till bakgrund till användargränssnitt är high definition den nya normala.
Det började med några av näthinnan och högupplösta skärmar, men tillgång till snabbare anslutningar har också betonat detta fenomen, vilket ger större tillgång till HD-webbplatser från vilken enhet som helst. Tänker du på och utformar i high definition? Här är några saker att tänka på.
Vad är HD, verkligen?
Den vanligaste cue för HD är termen retina display. Gjord populär av Apple-enheter har termen kommit synonymt med högupplösta skärmar. Detta gäller vissa ganska specifika tekniker för enheter.
Paula Borowska för Designmodo har en av de enklaste att förstå beskrivningar:
- Enhetspixel är den minsta fysiska enheten som visas.
- Pixeldensitet är antalet pixlar som visas i ett visst utrymme.
- Upplösning är antalet pixlar över hela bredden eller höjden på det visade utrymmet.
- Pixlar per tum, känd som ppi eller dpi, avser antalet pixlar du får när du delar upp skärmens fysiska bredd med antalet horisontella pixlar som visas.
- Hög DPI är en bildtäthet på 200 pixlar per tum eller högre.
De flesta enheter som du köper idag från mobiltelefoner till surfplattor till bärbara datorer har sannolikt en högupplöst bildskärm. (Och verkligheten är att även om du har en enhet utan en HD-bildskärm kommer det inte att skadas med en högupplöst webbplats).
Bilder
Platsen där du kanske vill tänka på high definition är när det gäller bilder. Dagen för att spara varje bild vid 600 pixlar vid 72 ppi är över. Det kommer bara inte att klippa det på dagens skärmar.
Basstandarden för HD är 200 ppi. Det är mer än dubbelt vad du kanske har sparat tidigare. Lägg till det faktum att skärmarna blir större med 1920 vid 1080 växer i snabb takt. Enligt W3Schools.com är de vanligaste skärmarna 1024 med 768 pixlar eller högre, med mer än 30 procent av användarna som arbetar på en högupplöst skärm.
Detsamma gäller även små skärmar. Populära enheter som iPhone 6 (401 ppi) och Samsung Galaxy S5 (577 ppi) har också HD-kapacitet.
Så när det gäller bilder måste de vara skarpa. Du kommer inte komma undan med suddiga eller pixelerade bilder. Spara vid den gamla? Standardupplösningen? Låt din design se platt ut, medan högupplösta bilder visas mer polerade. Nackdelen med att använda denna typ av bild är hastighet; högre kvalitet motsvarar längre belastningstider. Spara så nära spec som möjligt och överlappa inte bildfiler.
Roligt knep: Överväg att använda den suddiga bildutvecklingen till din fördel här om du är orolig för belastningstider. Det finns mindre data att läsa och du kan spara lite mindre och ändå få önskad skärpa från andra mindre högupplösta element.
Video
Video är den måste-visuella trenden i 2016. Det verkar som om du vänder dig överallt, är det rörande åtgärder på hemsidans hemsidor. Precis som med bilder måste den vara av hög kvalitet.
För de flesta designers och webbplatser betyder det att man håller fast vid en ganska kort loop-video för att förhindra lastning av hicka. Andra väljer längre videor och distraherar användare från väntetiden med en laddningsanimation. Högkvalitativ video kräver inspelning, komprimering och sparning av hög kvalitet.
Det tar också mycket planering när det gäller hur videon ska spela och titta på webbdesignen. En fullskärmsheltvideo måste till exempel skötas horisontellt så att den passar skärmen. För enkel användning kan enkla videoredigerare hjälpa dig att justera bildrutorna efter bildförhållande. välj 16: 9 för en bredbilds-känsla eller 4: 3 för det mer kvadratiska utseendet.
Roligt knep: Använd stillbild? för en hög dramaffekt. Här är idén: Film något som för det mesta är statiskt med bara en liten rörelse i bakgrunden. Du får en cool användarupplevelse utan att väga din design nere.
Illustrationer och bakgrunder
När det gäller illustrationer och bakgrunder, här betyder HD också. Kom ihåg att varje detalj (eller brist på det) syns i högdefinitionsutrymmet, så du vill se till att alla delar av designen bidrar till det övergripande estetiska.
När det gäller illustrationer eller bakgrunder är detaljer viktiga. Fokusera på att skapa en design som är praktiskt taget pixel perfekt, passar designen och faller inte ihop när den skalas upp eller ner. Det enklaste sättet att göra detta är att fokusera på enkelhet.
Medan det kan vara lätt att få draget in för att skapa en komplicerad illustration eller texturerad bakgrund, är enkelt enkelt ett bättre alternativ. Om du vill lägga till mer intresse, överväga att göra en liten animerad del av designen eller krydda den med djärva färgalternativ än du normalt brukar använda.
Och då finns det den tekniska komponenten: Du måste använda ett skalbart bildformat så att allt verkligen skala enligt vad som är avsedd och till full HD-potential.
Roligt knep: Lägg till en aning av animering till bakgrunden på en lång slinga. Snabba besökare kan missa det, men den lilla belöningen är säker på att glädja upprepade användare och de som håller fast vid en längre tid.
Ikoner och element
När det gäller alla ikoner och användargränssnitt på din webbplats finns det sex bokstäver du behöver veta: SVG och CSS. Och alla dessa element kommer sannolikt att klassificeras som en av dessa två typer.
SVG, eller skalbar vektorgrafik, är väsentlig vektor för webben. Du kan använda SVG för att spara former, ikoner och många andra användargränssnitt. Bilder läses av moderna webbläsare - det finns några äldre där ute som inte fungerar (vi pratar med de få av er som arbetar med Internet Explorer) - som text och gör i stort sett samma sätt som HTML.Scott Murray har en ganska bra primer på sin blogg om du vill komma in i SVGs nitty gritty.
CSS-elementen är ren kod och kommer att skala och stila med designen. (Du behöver nog inte dra knappar i Photoshop och klistra in dem på din webbplats.) W3Schools.com har en grundläggande handledning om hur man skapar och använder CSS-element.
Här handlar det om både SVG och CSS: Elementen flyttar med din webbplats. Detta är vad du behöver i en lyhörd ram. Inget kommer att döda din högupplöst webbplatsdesign snabbare än en massa pixelerade knappar.
Roligt knep: Du behöver inte uppfinna hjulet för att hitta några smutsiga SVG- eller CSS-element. Kolla in dessa SVG-knappar från Tympanus eller CSS Button Generator.
Slutsats
High Definition kommer att ställa in din webbplats förutom alla som inte gör det. Användare börjar förvänta sig en HD-upplevelse på alla sina skärmar från televisions till datorer till telefoner. Din webbplats måste uppfylla dessa förväntningar.
Den goda nyheten är att du kan göra små förändringar på vägen för att komma dit. Var uppmärksam på dina bilder, videoklipp och andra användargränssnitt för att se till att du visar bildpunkter och varje visuell är sömlös och hög kvalitet.