Apple и Samsung бутат технологичната индустрия напред чрез увеличаване плътността на пикселите при iPhone, iPad и съответно Galaxy. Това е супер от гледна точка на потребителя, но като сайтаджия или дизайнер е малко трудно да промените начина си на разработване на сайтове.

Готови ли сте за малко HD web design(сори тва заглавие ако го преведа Висококачествен/Високорезолюционен уеб дизайн и ще остане криворазбрано). Замисляли ли сте се как вашият сайт изглежда на новото поколение екрани с висока резолюция? Какви стъпки трябва да предприемете за да се подготвите и какви умения ще са ви необходими за да останете в крак с тенденциите? Малко съветчета от мен…

Когато Apple и Samsung говорят, ние слушаме

Първо – сори на всички Apple фенове, но Samsung все по – често влиза в категорията на иновативните решения – не можем да го отречем. И въпреки това нещата в този параграф може би ще се харесат повече на Apple фенове.

Посредством впечатляваща трансформация, изградена върху отдадеността на служителите да създават иновативни решения от следващо поколение, Apple се превърна в най – ценената корпорация на планетата (толкова сложно изречение отдавна не бях построявал). Може и да няма Mac на всяко бюро в България, но ако си изберете случайна къща в голям град, шансовете да намерите iPod, iPhone и/или iPad не са малки.

Няма да ви убеждавам в култа за Apple, но смятам, че и Samsung са тръгнали натам (с колегите ми сме разделени на Apple и Samsung фенове и постоянно се шегуваме на тази тема, което според мен си е първа крачка и предпоставка именно към това). И все пак Samsung имат още доста да се доказват. Поне за момента Apple е движещата сила (без значение начина по който го постига) в индустрията. Никой не му пука какви новости са пуснали Newton, но при пускането на нов продукт от Apple света сякаш спира и само слуша както бъдеще му предупределя Apple.

Apple залага на високата резолюция

До скоро, Apple не се справяха кой знае колко добре с това, да ни очароват със по – добра резолюция. През последното десетилетие производителите се стремяха да произвеждат колкото се може по – големи и по – добри HD телевизори, докато клиентите си ги купуваха. В повечето държави (тука не включвам може би нашата мила родина) се наблюдава огромен интерес към колкото може по – високорезолюционни екрани, филми, кабелни телевизии (и всичко това благодарение на правилен маркетинг).

Tази тенденция избяграше компютърния свят. Естествено всичко се промени, когато Apple пуснаха iPhone 4 през 2010 година и представиха “Retina” екрана, с който удвоиха гъстотата на пикселите – 326 пиксели на инч (ppi) (за сравнение 27’’ iMac е 109ppi). Това доста промени ситуацията. Много хора смятаха постигнатото за невъзможно, но Apple продължиха и успяха да го осъществят и при своя iPad – 264ppi. Точно в това отношение в случая Samsung играят ролята на догонващи със стоите 218ppi при Galaxy S2.

И какво ни бърка това нас?

И след този полу исторически, полу лично мнение, може би всички си задавате въпроса – „Това какво общо има с нас, които сме дизайнери или сайтаджии”. На кой му пука за резолюцията на iPad-a.

Проблема може да е видим дори докато разглеждате този блог, или някой сайт, който ще посетите днес. Направете си следния експеримент – вземете произволно изображение от нета и си го отворете през Photoshop. Отворете информацията за размерите на изображението (Image Size). Вече сигурно сте забелязали интересната част.

Web дизайнерите винаги са имали едно малко предимсвтво пред печатните дизайнери – те могат да използват по – ниска резолюция при работа. Защо това е предимство а не обратното? Първо – PSD с високорезолюционни слоеве (layers) може буквално да ви приспи машината, високорезолюционните снимки може да отнемат цяла вечност докато се заредят на някой сайт при по – бавен нет, високорезолюционните снимки струват доста повече и т.н.

Та мисля, че изяснихме малко проблема. Повечето снимки в нета са с 72ppi, докато iPad-а е с 264ppi.(ще имам цял пост за мита за 72ppi изображенията). Та, помислете какво значи това – повечето нови продукти се бутат да влязат над 200ppi. От там можем да си направим извода, че милиони хора в момента се ровят в нета с високорезолюционни екрани, които не показват качествено изображеията. И ако си мислите, че това ще отмине и ще се върнем на 72ppi… не – ще става още по – лошо. Не е далеч момента, когато това ще сполети и лаптопите. И тогава?

Какво можем да направим по въпроса

Като цяло проблема е доста интересен. Голяма част от хората дори няма да му обърнат внимание. Web обхваща толкова много и различни технологии, които малко или много живеят в някакъв баланс и хармония, които може да бъде унищожен, ако някоя технологии реши да се откъсне в развитието си.

Като едини добри сайтаджии сигурно постоянно гледате времето, за което се зарежда сайта, който правите, и как блъскате нискорезолюционни картинки само и само да зареди по – бързо. И сега си представете какво се случва, ако всичките ви картинки трябва да са с висока резолюция. Ако от 72ppi трябва да скочите на 326ppi.

HTML & CSS елементи

Добрите новини са, че малко или сме били подготвени за тази ситуация, без дори да го осъзнаваме. Възхода на HTML5 наистина ни дава възможност да намалим броят на изображенията, които използваме. В наши дни повечето UI елементи се рендират в browser-a, което ще рече, че биха изглеждали прилично на всеки екран, който ги визуализира.

За да илюстрирам ето един бутон, който съм доближил през телефона си (няма да правя реклама – прикачената снимка е screenshot).

Сега ако изградим същият бутон, но със CSS3, със същата гъстота на пикселите, при доближаване, разликата е осезаема.

Красота! В случая, неизползването на изображение ни се отплаща значително, не само като качество, но и като компоненти, за които трябва да се притесняваме, че и дори ни спестява няколко обръщения към сървъра. Но в случая е важно да се отбележе, че обекти рендирани с HTML5 canvas и Javascript могат да постигнат подобен успех.

SVG

SVG или Scalable Vector Graphics, е друга важна стъпка към независимостта от резолюцията. Тази технология съществува от години, но чак наскоро започна да се поддържа от всички browser-и и колкото и да ви шокира – IE9 също влиза в тази категория.

Когато ми кажат SVG и се сещам за Adobe Illustrator. Тази програмка се използва главно, за създаването на векторно базирани графики със значителни възможности при оразмеряването. SVG предвалга същите възможности от гледна точка на web графики.

Почти всичко, което можете да направите с Illustrator-а или други векторно базирани програми (Corel Draw), можете да трансформирате в SVG и да си го сложите на страницата като мащабируем  (е как се превежда scalable) обект.

Предимството пред CSS може и да не е много видимо, но става такова, в момента, в който решите да работите с малко по – сложни изображения. Лесно е да създадете закръгленичък бутон с CSS, но когато ви се наложи да направите логото на Starbugs да речем, нещата стават доста объркани и сложни.

Като алтернатива на дългите частове прекарани в CSS research и може би стотиците редове код за единично изображение (дори да предположим, че е възможно само с CSS), можете просто да ползвате SVG версия на изображението и да го вкарате в сайта си, само за 1-2 минути. Тук можете да видите пример на живо именно със такова SVG. Приближете колкото можете с ctrl+ и вижте как се мащабира изображението.

SVG е доста дълга тема и едва ли ще остане некоментирана на дълго и широко във следвщи постове.

Супер ами снимките?

Всичко супер, ама аз искам да имам снимки на сайта си, а до сега говорим само за imageless web design свързан с UI и съвсем малко за възможностите на SVG. Та реално проблема идва при снимките.

Снимките са разтерни изображения и като такива просто разбиват напук и прах илюзията за резолюционно независим web design. Без значение какви запаси от знания и инструменти имаме, няма как да избегнем това ограничение.

Поне за сега, това означава да предоставяме снимки с различно качество на различните устройства. Това е кофти, но пък едва ли искате нискорезолюционните екрани да се борят с качествените ви снимки или пък още по – малко искате високорезолюционните екрани да показват кофти изображения, така че,  поне за сега това е единственото решение.

Това всъщност не е толкова трудно постижимо с media queries и device-pixel-ratio. Ето например как можем да прихванем третата генерация iPad (iPad 3).
{code type=codetype}
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
div {background: url(‘biggerphoto.jpg’);}
}
{/code}

Ами HTML изображенията?

Всичко добре, ами снимките които искаме да вкараме директно в HTML-a си? Предложеното решение би сполучило само при background изображения. Можем да отидем и малко по напред в тази посока и да се замислим и за високорезолюционните видеа, които искаме да покажем на сайта си.

За съжаление, аз поне не знам за чисто решение на този проблем(евентуално може да се постигне някакъв резултат с js). Някой ден, може би ще видим изчистено решение и на този проблем, но поне за сега – кофти братя (в братя включвам и дамите четящи пост визирайки „братя по съдба”)

Можете да опитате да се разровите за решения с javascript, php, asp. Много набързо един пример, който е красноречив и няма нужда от обяснения:

{code type=codetype}
[removed]
if( window.devicePixelRatio >= 2 ){
alert( “Hi Res @ Pixel Ratio : ” + window.devicePixelRatio + ” & Size : ” + screen.width * window.devicePixelRatio);
}else{
alert( “Normal @ Pixel Ratio 1 & Size : ” + screen.width + “+” + screen.width);
}
[removed]
{/code}

Та дори и това решение би затруднило сайтаджиите, които искат да се придържат към чист HTML и CSS, и не са запознати с javascript и други web технологии за по – напреднали. Изведнъж всъщност се оказва, че тази група от хора не може дори да предостави просто съдържание, което да е оптимизирано за кадърен изглед при различните устройства.

Заключение

Заключението е, че може би този пост не беше от най – смислените, но се надявам да е дал някаква представа за ситуацията поне на по – незапознатите.

Та без значение дали мразите или харесвате Apple, факт е, че това което те правят в момента влияе и на работата ви като сайтаджия/дизайнер и по точно начина, по който разработвате сайтовете си. И да – може би това беше и целта на този пост, да се замислите как разработвте сайтовете си, ако вече не сте го направили.

Накратко за сега имаме няколко задачи, които да излследваме в тази насока – HTML5 canvas, SVG, Javascript, media queries и набора от тях би ви предоставил добър арсенал в борбата с високорезолюционните екрани.

Та ще се радвам да чуя и вашето мнение в коментарите. Както знаете приемам с радост идеи, теми за нови постове, така че се чувствайте свободни да ми пишете или да оставите коментар.