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