Responsive уеб дизайн и какво трябва да знаем за него

Google официално препоръча responsive уеб дизайна като техен предпочитан метод за създаване на мобилни уебсайтове. Ако имате сайт или блог е време сериозно да се замислите върху преминаване към responsive дизайн, вместо да поддържате отделен мобилен сайт.

responsive_design

Един дизайн, няколко екрана 

Ако сте нови в Responsive Web Design (RWD), тук ще намерите кратко ръководство, което ще отговори на повечето ви въпроси за тази технология, така че, нека започваме.

Въпрос 1 – Защо да премина към Responsive уеб дизайн?

Вашият уебсайт може да изглежда страхотно на компютърен екран, но това може да не е така, ако сайтът се посети чрез мобилен телефон. таблет или е-четец (Kindle за пример). Щом преминете към Responsive дизайн, сайтът си ще изглежда добре на всички всички устройства – от настолен компютър до Kindle.

Въпрос 2 – Какви са другите предимства на Responsive уеб дизайнa?

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

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

2.Responsive дизайна е много добър за оптимизацията на сайта (SEO), тъй като всяка страница ще има отделен линк, като по този начин, Google ще може да индексира по-добре сайта.

3. Рапортите от Google Analytics ще бъдат по-точни, тъй като посещенията на сайта от мобилни устройства и компютри ще се изкарват заедно.

4.Същото важи и за социалните приставки на сайта (Facebook харесвани, Twitter споделяния, +1 на Google), тъй като мобилната и основната версия на сайта няма да имат различни линкове.

5.Responsive дизайна е по-лесен за поддръжка. Нужно е само да промените CSS кода, за да може самият сайт да се изменя според устройството.

6. Едни от първите методи, използван за разпознаване на устройството, с което е посетен сайта, използваше потребителски низ, за да се определи устройството и браузъра, който се използва. Методът обаче е неточен на моменти, заради постоянно излизащите нови мобилни устройства и нови версии на мобилни браузъри, което прави поддръжката на кода труден. Responsive дизайна не се нуждае от подобни данни.

Въпрос 3 – Какво трябва да знам като за начало за responsive дизайна?

Responsive дизайна е HTML и CSS код. Правят се няколко прости правила в CSS кода, които сменят стилът на сайта, според резолюцията.

За пример, нека кажем, че искаме при определена резолюция, лентата на сайта да изчезне, да кажем при резолюция под 300px или при резолюция по-голяма от 1900px, шрифта на body-то да се увеличи на 15px. Ето как става това:
@media screen and (max-width: 300px) {
.sidebar {
display:none;
}
}

Въпрос 4 – Как да разбера дали даден сайт използва responsive дизайна?

Това е лесно. Отворете сайта на компютъра си с даден браузър и променете размера на прозореца. Ако дизайна на сайта се променя с промяната на размера на браузъра, то сайта използва responsive дизайна. Също така можете да използвате  няколко онлайн инструмента за да видите как изглежда сайта на различни мобилни устройства и резолюции.

Въпрос 5 – Може ли да споделиш няколко сайта, използващи responsive дизайн?

Такива сайтове са доста и се увеличават със всеки ден, но някой от тях са The Boston Globe (новинарски сайт), Simple Bits (личен блог), Happy Cog  (агенция за уеб дизайн), Barack Obama (сайта на президента на САЩ),  Shake Shack  (верига ресторанти), Nicole & Josh (сватбен сайт), Food Sense  (кухня и рецепти), dConstruct 2012  (дизайн конференция) и Good to Know  (сайта на Google са онлайн защита). Също така може да посетите и mediaqueri.es -галерия, използваща responsive дизайн.

Въпрос 6 – Ако използвам responsive дизайн, ще работи ли сайта ми със по-стари браузъри?

В повечето случаи да. Responsive дизайна използва CSS3 media-queries и HTML5, които не се поддържат в по-старите версии на IE. Все пак има Javascript метод – respond.js, чрез който CSS3 и HTML5 да се използва в по-старите IE браузъри, включително IE6.

Въпрос 7 – Има хиляди мобилни устройства. Каква резолюция сайта ми трябва да поддържа?

Отворете Google Analytics ->Audience -> Technology -> Browser & OS. Сега сменете на таба Screen Resolution и вижте какви мобилни устройства и с каква резолюция са посещавали сайта ви.

Бих ви посъветвал да използвате поне няколко отправни точки във вашите CSS3 mediaqueries – 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android таблети), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape и desktops).

Въпрос 7 – Какви са недостатъците на този метод?

Responsive дизайна ще добави няколко килобайта към уеб страницата ви, тъй като трябва да се свалят допълнителни CSS и Javascript файлове, който преди не са били необходими. Другият проблем са снимките – не трябва да се използват снимки, с твърде голяма резолюция.

Също така, научаването на този метод може да бъде труден за някои. Въвеждането на responsive дизайн във вече съществуващ сайт също може да бъде трудно. Понякога е по-добре да се започне от нулата, вместо да се нагажда кода във вече съществуващ сайт.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s