SlideShare a Scribd company logo
1 of 13
Responsive design
или новото чудо голямо
Що е то?



Подход към създаването на уеб сайт, така
че да бъде оптимално видим, лесен за
четене и навигация в голям набор от
различни устройства и екранни
резолюции - от десктоп монитор до
смартфон
Как изглежда?
Как става?


Вълшебните думички: CSS 3, Media
queries, fluid grids, flexible images

и

нов процес: research > define > content
priority guide > style prototype > final
design> code responsive templates >cms
integration > launch
Малко примери - от света


http://skinnyties.com/
http://www.indochino.com/
http://www.awwwards.com
http://www.anderssonwise.com/
http://www.whitelotusaromatics.com/
http://mashable.com/
http://www.bostonglobe.com/
http://mattkersley.com/responsive/
Малко примери - у нас


fibank.bg
http://parvite.com/successful-business/
http://www.bgsite.org/step/
kaksepishe.com
http://www.uxsofia.com/bg/
Откъде се взе?


- възход на мобилния уеб
- много устройства, много екрани, много
резолюции
- много версии на сайта
- Итън Маркот - 2009, 2010
Защо всички говорят за него?


- модерно - #2 в Top Web Design Trends
2012 от сп. .net
- интересно
- революционно (може би)
- решава реални проблеми
Кои проблеми решава?


User Experience
Usability
1 URL
По-бързо и изгодно от >2 специални
версии
Бъдещето
Кои проблеми създава?


User Experience - навикът

Usability - контекст, архив, навигация,
старите браузери
Кои проблеми създава?


Планирането на сайта - съдържанието,
навигацията, визиите, all content for all
context

Ами приходите от реклама? - RCD, IAB,
пример

Времето и цената за разработка? - около
1.5 разлика
Задължителен ли е?


В момента и за повечето сайтове - НЕ
 - сложно и скъпо
 - мобилните браузери се справят добре

... Но скоро и за следните случаи - ДА:
• - mobile first
• - сайтове на събития
• - сайтове предимно с текст - блогове,
  WP-базирани, новинарски
БЛАГОДАРЯ!

  Горица Белогушева
gbelogusheva@abcbg.com

More Related Content

Viewers also liked

Christmas Online
Christmas OnlineChristmas Online
Christmas Onlineabcbgcom
 
Foursquare
FoursquareFoursquare
Foursquareabcbgcom
 
WP3 Further specification of Functionality and Interoperability - Gradmann
WP3 Further specification of Functionality and Interoperability - GradmannWP3 Further specification of Functionality and Interoperability - Gradmann
WP3 Further specification of Functionality and Interoperability - GradmannEuropeana
 
Finance & Sustainability Aggregators forum 2014
Finance & Sustainability Aggregators forum 2014Finance & Sustainability Aggregators forum 2014
Finance & Sustainability Aggregators forum 2014Europeana
 
PRCA - 'Maximise broadcast integration within social media' v2
PRCA - 'Maximise broadcast integration within social media' v2PRCA - 'Maximise broadcast integration within social media' v2
PRCA - 'Maximise broadcast integration within social media' v2Russell Goldsmith
 
Мобилна реклама
Мобилна рекламаМобилна реклама
Мобилна рекламаabcbgcom
 
Isola Madre, Italy
Isola Madre, ItalyIsola Madre, Italy
Isola Madre, ItalyIvan Szedo
 
Игрите във Facebook
Игрите във FacebookИгрите във Facebook
Игрите във Facebookabcbgcom
 
Google оптимизация с усмивка
Google оптимизация с усмивкаGoogle оптимизация с усмивка
Google оптимизация с усмивкаabcbgcom
 

Viewers also liked (17)

Christmas Online
Christmas OnlineChristmas Online
Christmas Online
 
Debrecen1
Debrecen1Debrecen1
Debrecen1
 
Western wall
Western wallWestern wall
Western wall
 
Foursquare
FoursquareFoursquare
Foursquare
 
Dead sea
Dead seaDead sea
Dead sea
 
21st century learning 2010 cspa
21st century learning 2010 cspa21st century learning 2010 cspa
21st century learning 2010 cspa
 
Computer Boot Camp
Computer Boot CampComputer Boot Camp
Computer Boot Camp
 
WP3 Further specification of Functionality and Interoperability - Gradmann
WP3 Further specification of Functionality and Interoperability - GradmannWP3 Further specification of Functionality and Interoperability - Gradmann
WP3 Further specification of Functionality and Interoperability - Gradmann
 
Finance & Sustainability Aggregators forum 2014
Finance & Sustainability Aggregators forum 2014Finance & Sustainability Aggregators forum 2014
Finance & Sustainability Aggregators forum 2014
 
PRCA - 'Maximise broadcast integration within social media' v2
PRCA - 'Maximise broadcast integration within social media' v2PRCA - 'Maximise broadcast integration within social media' v2
PRCA - 'Maximise broadcast integration within social media' v2
 
Мобилна реклама
Мобилна рекламаМобилна реклама
Мобилна реклама
 
Isola Madre, Italy
Isola Madre, ItalyIsola Madre, Italy
Isola Madre, Italy
 
Игрите във Facebook
Игрите във FacebookИгрите във Facebook
Игрите във Facebook
 
Google оптимизация с усмивка
Google оптимизация с усмивкаGoogle оптимизация с усмивка
Google оптимизация с усмивка
 
Laszlo kiraly
Laszlo kiralyLaszlo kiraly
Laszlo kiraly
 
Ocsb learning technologies updates dec 2012
Ocsb learning technologies updates dec 2012Ocsb learning technologies updates dec 2012
Ocsb learning technologies updates dec 2012
 
Social media in K-12 School Boards
Social media in K-12 School BoardsSocial media in K-12 School Boards
Social media in K-12 School Boards
 

Similar to Responsive design или новото чудо голямо

Да се научим да пишем за уеб
Да се научим да пишем за уебДа се научим да пишем за уеб
Да се научим да пишем за уебMoby2 Ltd.
 
Създаване на сайт за рекламна агенция - Курсова работа
Създаване на сайт за рекламна агенция - Курсова работаСъздаване на сайт за рекламна агенция - Курсова работа
Създаване на сайт за рекламна агенция - Курсова работаAnita Nestorova
 
Seo and-website-architecture
Seo and-website-architectureSeo and-website-architecture
Seo and-website-architectureCtOlaf
 
Seo and-website-architecture
Seo and-website-architectureSeo and-website-architecture
Seo and-website-architectureCtOlaf
 
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добре
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добреOnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добре
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добреnetMagazine
 
Изработка на фирмен сайт
Изработка на фирмен сайтИзработка на фирмен сайт
Изработка на фирмен сайтDigitalen Marketing
 
Presentation bg site 2013
Presentation bg site 2013Presentation bg site 2013
Presentation bg site 2013Microart
 
The Mobile version of a web-site - a plus for SEO optimization 2011
The Mobile version of a web-site - a plus for SEO optimization 2011 The Mobile version of a web-site - a plus for SEO optimization 2011
The Mobile version of a web-site - a plus for SEO optimization 2011 Borislav Arapchev
 
5 въпроса за UX, които търсят отговор
5 въпроса за UX, които търсят отговор5 въпроса за UX, които търсят отговор
5 въпроса за UX, които търсят отговорEric Reiss
 
SEO Class Sofia University 2012
SEO Class Sofia University 2012SEO Class Sofia University 2012
SEO Class Sofia University 2012Lily Grozeva
 
Лекция 00 - Въведение в WordPress
Лекция 00 - Въведение в WordPressЛекция 00 - Въведение в WordPress
Лекция 00 - Въведение в WordPressVladimir Vassilev
 
Прави пари с WordPress: преглед на многото начини по които може да се изкара...
Прави пари с WordPress: преглед на многото начини по които може да се изкара...Прави пари с WordPress: преглед на многото начини по които може да се изкара...
Прави пари с WordPress: преглед на многото начини по които може да се изкара...Kaloyan Tsvetkov
 
3 насоки за успеха на вашия онлайн бизнес
3 насоки за успеха на вашия онлайн бизнес3 насоки за успеха на вашия онлайн бизнес
3 насоки за успеха на вашия онлайн бизнесTravel Mind Workshop
 
SEO за мобилни устройства - E-Manager 2014
SEO за мобилни устройства - E-Manager 2014SEO за мобилни устройства - E-Manager 2014
SEO за мобилни устройства - E-Manager 2014Teodor Zahariev
 
The future of search and seo
The future of search and seoThe future of search and seo
The future of search and seoSEOM
 

Similar to Responsive design или новото чудо голямо (20)

Да се научим да пишем за уеб
Да се научим да пишем за уебДа се научим да пишем за уеб
Да се научим да пишем за уеб
 
Изработване на уебсайт
Изработване на уебсайтИзработване на уебсайт
Изработване на уебсайт
 
Създаване на сайт за рекламна агенция - Курсова работа
Създаване на сайт за рекламна агенция - Курсова работаСъздаване на сайт за рекламна агенция - Курсова работа
Създаване на сайт за рекламна агенция - Курсова работа
 
Seo and-website-architecture
Seo and-website-architectureSeo and-website-architecture
Seo and-website-architecture
 
Seo and-website-architecture
Seo and-website-architectureSeo and-website-architecture
Seo and-website-architecture
 
Maxbike
MaxbikeMaxbike
Maxbike
 
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добре
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добреOnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добре
OnlineBIZ'12 - Борил Караиванов, Как дизайнът на сайта може да продава по-добре
 
Изработка на фирмен сайт
Изработка на фирмен сайтИзработка на фирмен сайт
Изработка на фирмен сайт
 
Inf 11827
Inf 11827Inf 11827
Inf 11827
 
Presentation bg site 2013
Presentation bg site 2013Presentation bg site 2013
Presentation bg site 2013
 
The Mobile version of a web-site - a plus for SEO optimization 2011
The Mobile version of a web-site - a plus for SEO optimization 2011 The Mobile version of a web-site - a plus for SEO optimization 2011
The Mobile version of a web-site - a plus for SEO optimization 2011
 
Seo за начинаещи
Seo за начинаещиSeo за начинаещи
Seo за начинаещи
 
Seo plovdiv 2011
Seo plovdiv 2011 Seo plovdiv 2011
Seo plovdiv 2011
 
5 въпроса за UX, които търсят отговор
5 въпроса за UX, които търсят отговор5 въпроса за UX, които търсят отговор
5 въпроса за UX, които търсят отговор
 
SEO Class Sofia University 2012
SEO Class Sofia University 2012SEO Class Sofia University 2012
SEO Class Sofia University 2012
 
Лекция 00 - Въведение в WordPress
Лекция 00 - Въведение в WordPressЛекция 00 - Въведение в WordPress
Лекция 00 - Въведение в WordPress
 
Прави пари с WordPress: преглед на многото начини по които може да се изкара...
Прави пари с WordPress: преглед на многото начини по които може да се изкара...Прави пари с WordPress: преглед на многото начини по които може да се изкара...
Прави пари с WordPress: преглед на многото начини по които може да се изкара...
 
3 насоки за успеха на вашия онлайн бизнес
3 насоки за успеха на вашия онлайн бизнес3 насоки за успеха на вашия онлайн бизнес
3 насоки за успеха на вашия онлайн бизнес
 
SEO за мобилни устройства - E-Manager 2014
SEO за мобилни устройства - E-Manager 2014SEO за мобилни устройства - E-Manager 2014
SEO за мобилни устройства - E-Manager 2014
 
The future of search and seo
The future of search and seoThe future of search and seo
The future of search and seo
 

More from abcbgcom

Бизнес закуска: Онлайн маркетинг при новите регулации и изисквания
Бизнес закуска: Онлайн маркетинг при новите регулации и изискванияБизнес закуска: Онлайн маркетинг при новите регулации и изисквания
Бизнес закуска: Онлайн маркетинг при новите регулации и изискванияabcbgcom
 
Ретаргетинг
РетаргетингРетаргетинг
Ретаргетингabcbgcom
 
Съдържанието в уеб
Съдържанието в уебСъдържанието в уеб
Съдържанието в уебabcbgcom
 
GetLokal за бизнеса
GetLokal за бизнесаGetLokal за бизнеса
GetLokal за бизнесаabcbgcom
 
Social Media Management – в три прости стъпки
Social Media Management – в три прости стъпкиSocial Media Management – в три прости стъпки
Social Media Management – в три прости стъпкиabcbgcom
 
Какво да очакваме в Социалните мрежи?
Какво да очакваме в Социалните мрежи?Какво да очакваме в Социалните мрежи?
Какво да очакваме в Социалните мрежи?abcbgcom
 
Кои са новите social платформи и мястото им в микса?
Кои са новите social платформи и мястото им в микса?Кои са новите social платформи и мястото им в микса?
Кои са новите social платформи и мястото им в микса?abcbgcom
 
Мобилност – сайтове, приложения, кампании
Мобилност – сайтове, приложения, кампанииМобилност – сайтове, приложения, кампании
Мобилност – сайтове, приложения, кампанииabcbgcom
 
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...abcbgcom
 
Нашите служители, техните мобилни телефони и нашият бизнес
Нашите служители, техните мобилни телефони и нашият бизнесНашите служители, техните мобилни телефони и нашият бизнес
Нашите служители, техните мобилни телефони и нашият бизнесabcbgcom
 
Мобилни сайтове
Мобилни сайтовеМобилни сайтове
Мобилни сайтовеabcbgcom
 
Мобилни приложения
Мобилни приложенияМобилни приложения
Мобилни приложенияabcbgcom
 
Колко е важен мобилният ни телефон
Колко е важен мобилният ни телефонКолко е важен мобилният ни телефон
Колко е важен мобилният ни телефонabcbgcom
 
In-game advertising today
In-game advertising todayIn-game advertising today
In-game advertising todayabcbgcom
 
Bdvo bgsite2009 2
Bdvo bgsite2009 2Bdvo bgsite2009 2
Bdvo bgsite2009 2abcbgcom
 
Защо реклама в Интернет? И защо точно сега?
Защо реклама в Интернет? И защо точно сега?Защо реклама в Интернет? И защо точно сега?
Защо реклама в Интернет? И защо точно сега?abcbgcom
 

More from abcbgcom (16)

Бизнес закуска: Онлайн маркетинг при новите регулации и изисквания
Бизнес закуска: Онлайн маркетинг при новите регулации и изискванияБизнес закуска: Онлайн маркетинг при новите регулации и изисквания
Бизнес закуска: Онлайн маркетинг при новите регулации и изисквания
 
Ретаргетинг
РетаргетингРетаргетинг
Ретаргетинг
 
Съдържанието в уеб
Съдържанието в уебСъдържанието в уеб
Съдържанието в уеб
 
GetLokal за бизнеса
GetLokal за бизнесаGetLokal за бизнеса
GetLokal за бизнеса
 
Social Media Management – в три прости стъпки
Social Media Management – в три прости стъпкиSocial Media Management – в три прости стъпки
Social Media Management – в три прости стъпки
 
Какво да очакваме в Социалните мрежи?
Какво да очакваме в Социалните мрежи?Какво да очакваме в Социалните мрежи?
Какво да очакваме в Социалните мрежи?
 
Кои са новите social платформи и мястото им в микса?
Кои са новите social платформи и мястото им в микса?Кои са новите social платформи и мястото им в микса?
Кои са новите social платформи и мястото им в микса?
 
Мобилност – сайтове, приложения, кампании
Мобилност – сайтове, приложения, кампанииМобилност – сайтове, приложения, кампании
Мобилност – сайтове, приложения, кампании
 
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...
Какво се случи през 2012-та и какво очакваме да се случи през 2013-та година ...
 
Нашите служители, техните мобилни телефони и нашият бизнес
Нашите служители, техните мобилни телефони и нашият бизнесНашите служители, техните мобилни телефони и нашият бизнес
Нашите служители, техните мобилни телефони и нашият бизнес
 
Мобилни сайтове
Мобилни сайтовеМобилни сайтове
Мобилни сайтове
 
Мобилни приложения
Мобилни приложенияМобилни приложения
Мобилни приложения
 
Колко е важен мобилният ни телефон
Колко е важен мобилният ни телефонКолко е важен мобилният ни телефон
Колко е важен мобилният ни телефон
 
In-game advertising today
In-game advertising todayIn-game advertising today
In-game advertising today
 
Bdvo bgsite2009 2
Bdvo bgsite2009 2Bdvo bgsite2009 2
Bdvo bgsite2009 2
 
Защо реклама в Интернет? И защо точно сега?
Защо реклама в Интернет? И защо точно сега?Защо реклама в Интернет? И защо точно сега?
Защо реклама в Интернет? И защо точно сега?
 

Responsive design или новото чудо голямо

  • 2. Що е то? Подход към създаването на уеб сайт, така че да бъде оптимално видим, лесен за четене и навигация в голям набор от различни устройства и екранни резолюции - от десктоп монитор до смартфон
  • 4. Как става? Вълшебните думички: CSS 3, Media queries, fluid grids, flexible images и нов процес: research > define > content priority guide > style prototype > final design> code responsive templates >cms integration > launch
  • 5. Малко примери - от света http://skinnyties.com/ http://www.indochino.com/ http://www.awwwards.com http://www.anderssonwise.com/ http://www.whitelotusaromatics.com/ http://mashable.com/ http://www.bostonglobe.com/ http://mattkersley.com/responsive/
  • 6. Малко примери - у нас fibank.bg http://parvite.com/successful-business/ http://www.bgsite.org/step/ kaksepishe.com http://www.uxsofia.com/bg/
  • 7. Откъде се взе? - възход на мобилния уеб - много устройства, много екрани, много резолюции - много версии на сайта - Итън Маркот - 2009, 2010
  • 8. Защо всички говорят за него? - модерно - #2 в Top Web Design Trends 2012 от сп. .net - интересно - революционно (може би) - решава реални проблеми
  • 9. Кои проблеми решава? User Experience Usability 1 URL По-бързо и изгодно от >2 специални версии Бъдещето
  • 10. Кои проблеми създава? User Experience - навикът Usability - контекст, архив, навигация, старите браузери
  • 11. Кои проблеми създава? Планирането на сайта - съдържанието, навигацията, визиите, all content for all context Ами приходите от реклама? - RCD, IAB, пример Времето и цената за разработка? - около 1.5 разлика
  • 12. Задължителен ли е? В момента и за повечето сайтове - НЕ - сложно и скъпо - мобилните браузери се справят добре ... Но скоро и за следните случаи - ДА: • - mobile first • - сайтове на събития • - сайтове предимно с текст - блогове, WP-базирани, новинарски
  • 13. БЛАГОДАРЯ! Горица Белогушева gbelogusheva@abcbg.com