Три шага к созданию адаптивного дизайна сайта НКО

3steps
Мы про­дол­жа­ем тему адап­тив­но­го веб-дизай­на ста­тьей, рас­ска­зы­ва­ю­щей о трех шагах на пути к созда­нию адап­тив­но­го веб-дизай­на для ваше­го сай­та.

Напо­ми­на­ем, что ранее мы рас­ска­зы­ва­ли о том, что такое адап­тив­ный дизайн и зачем он нужен, а так­же при­во­ди­ли под­бор­ку из 10 вдох­нов­ля­ю­щих при­ме­ров кра­си­во­го адап­тив­но­го дизай­на сай­тов НКО. Сего­дня мы рас­смот­рим три шага, кото­рые помо­гут вам в созда­нии адап­тив­но­го веб-дизай­на.

Пред­ставь­те, что вы ужи­на­е­те с дру­зья­ми или, напри­мер, это дело­вой ужин, и вы так вооду­шев­ле­ны, что хоти­те пока­зать сайт вашей орга­ни­за­ции. Вы доста­е­те iPhone, откры­ва­е­те сайт, но вдруг ока­зы­ва­ет­ся, что сайт, откры­тый через теле­фон, выгля­дит некра­си­во, или не чита­ет­ся, или колон­ки разъ­е­ха­лись в раз­ные сто­ро­ны, или кноп­ки такие малень­кие, что вам нуж­но уве­ли­чи­вать отдель­ные участ­ки сай­та, или все это сра­зу.

Не самое хоро­шее пер­вое впе­чат­ле­ние.

Почему адаптивный дизайн важен

Навер­ное, вы уже заме­ти­ли, что таких мобиль­ных устройств, как iPad, iPhone и Android, ста­но­вит­ся все боль­ше, и, соот­вет­ствен­но, людей, кото­рые захо­дят в Интер­нет, исполь­зуя такие устрой­ства, тоже ста­но­вит­ся боль­ше.

Так, 600 мил­ли­о­нов из 1 мил­ли­ар­да поль­зо­ва­те­лей Facebook захо­дят на сайт через мобиль­ные устрой­ства. Если рас­смат­ри­вать ситу­а­цию с НКО, то, соглас­но недав­ней ста­ти­сти­ке, 15% тра­фи­ка фанд­рай­зин­го­вых стра­ниц и стра­ниц с пожерт­во­ва­ни­ям в США при­хо­дят­ся на мобиль­ные устрой­ства.

Поэто­му для НКО ста­но­вит­ся все важ­нее иметь адап­тив­ный дизайн сай­та, кото­рый будет удо­бен всем поль­зо­ва­те­лям, неза­ви­си­мо от устройств, кото­рые они исполь­зу­ют. Поверь­те, если им не нуж­но будет умень­шать, уве­ли­чи­вать, пово­ра­чи­вать и совер­шать какие-либо еще мани­пу­ля­ции для того, что­бы про­чи­тать вашу послед­нюю новость, они будут очень бла­го­дар­ны, и веро­ят­ность того, что они зай­дут на ваш сайт сно­ва силь­но воз­рас­тет.

Три шага в создании адаптивного веб-дизайна

После того, как вы реши­ли, что ваш сайт дол­жен быть более адап­тив­ным, вы може­те после­до­вать трем основ­ным реко­мен­да­ци­ям.

1. Определите, для чего вам нужна мобильная версия сайта

Опре­де­ли­те, какие еще цели, кро­ме удоб­ства и чита­е­мо­сти со всех устройств, есть у мобиль­ной вер­сии сай­та. Спро­си­те себя – будут ли у мобиль­ных поль­зо­ва­те­лей дру­гие потреб­но­сти, чем у тех, кто захо­дит на сай­та с ком­пью­те­ра?

Напри­мер, поль­зо­ва­те­ли сай­та музея, кото­рые захо­дят с мобиль­ных устройств, веро­ят­но хотят иметь быст­рый доступ к рас­пи­са­нию и воз­мож­ность купить билет с помо­щью теле­фо­на. Выста­и­вая струк­ту­ру сай­та таким обра­зом, что­бы это было удоб­но сде­лать, вы уве­ли­чи­ва­е­те коли­че­ство потен­ци­аль­ных посе­ти­те­лей музея.

Поду­май­те о том, что могут захо­теть сде­лать поль­зо­ва­те­ли, посе­ща­ю­щие ваш сайт, и орга­ни­зуй­те его мобиль­ную вер­сию соот­вет­ству­ю­щим обра­зом.

2. Выберите подход

Суще­ству­ет три основ­ных под­хо­да к созда­нию адап­тив­но­го веб-дизай­на.

1. Мобиль­ная вер­сия сай­та. Создать мобиль­ную вер­сию сай­та – это зна­чит создать совер­шен­но отдель­ный сайт, пред­на­зна­чен­ный толь­ко для мобиль­ных устройств. Пре­иму­ще­ством это­го под­хо­да явля­ет­ся то, что это вер­сия толь­ко для мобиль­ных устройств, и вы може­те спро­ек­ти­ро­вать ее таким обра­зом, что­бы она была мак­си­маль­на удоб­на для поль­зо­ва­те­лей дан­ных устройств. Недо­стат­ки – это затра­ты, как вре­мен­ные, так и денеж­ные. Хотя, если вы поль­зу­е­тесь WordPress, вы може­те исполь­зо­вать пла­гин WP Touch, кото­рый авто­ма­ти­че­ски созда­ет мобиль­ную вер­сию сай­та и поз­во­ля­ет выбрать, какие стра­ни­цы будут отоб­ра­жать­ся, а какие нет.

2. При­ло­же­ние. Мобиль­ное при­ло­же­ние для ваше­го сай­та может быть еще более удоб­ным с точ­ки зре­ния поль­зо­ва­тель­ско­го опы­та – за счет таких допол­ни­тель­ных функ­ций, как доступ к сай­ту оффлайн, воз­мож­ность настрой­ки уве­дом­ле­ний, инте­гра­ция с соци­аль­ны­ми сетя­ми и т.д. Обрат­ной сто­ро­ной так­же явля­ет­ся высо­кая сто­и­мость и необ­хо­ди­мость посто­ян­ной рабо­ты с при­ло­же­ни­ем. Кро­ме того, поль­зо­ва­те­лям необ­хо­ди­мо будет спе­ци­аль­но загру­жать при­ло­же­ние.

3. «Рези­но­вый» дизайн. Это самый про­стой и деше­вый под­ход к созда­нию адап­тив­но­го веб-дизай­на. «Рези­но­вый» зна­чит то, что сайт авто­ма­ти­че­ски изме­ня­ет раз­мер и рас­по­ло­же­ние содер­жа­ния, в зави­си­мо­сти от раз­ме­ра экра­на устрой­ства, с кото­ро­го его про­смат­ри­ва­ют. Если вы исполь­зу­е­те WordPress, боль­шин­ство плат­ных тем, напри­мер, Headway, уже явля­ют­ся адап­тив­ны­ми.

3. Тестируйте после запуска

Без­услов­но, необ­хо­ди­мо про­те­сти­ро­вать ваш мобиль­ный сайт перед запус­ком, но важ­но так­же тести­ро­вать и после запус­ка. Основ­ной при­чи­ной явля­ет­ся то, что у вас очень мало инфор­ма­ции (не счи­тая гипо­тез) о том, как люди будут исполь­зо­вать мобиль­ный сайт. Тести­ро­ва­ние сай­та после запус­ка помо­жет вам най­ти и устра­нить раз­лич­ные про­бле­мы, и, соот­вет­ствен­но, сде­лать ваш сайт еще луч­ше и удоб­нее.