Що стосується дизайну односторінкових веб-сайтів?

Я бачив наплив веб-сайтів, які розміщують весь їхній вміст на одній сторінці, аля цей сайт . Навіть сайти в деяких зі списків, які я бачу в журналі Smashing, роблять це (на кшталт цього, із схожим на сто сайтів, більшість з яких використовують його).

Як програміст, цей стиль клопоче мене (з ряду причин, здебільшого технічних, з останніх причин, включаючи обслуговування, SEO, час завантаження тощо), але що ще важливіше, мені цікаво, чому він став популярним серед дизайнери для початку?

Задіяні дві окремі тенденції.

Перша - це тенденція до створення простого сайту. Якщо це брошура, то, ймовірно, не потрібно чотирьох окремих сторінок. Одну сторінку прокрутки простіше у використанні, навігації та обслуговуванні. Багато моделей iPhone-додатків використовують цю модель. Як і багато малого бізнесу. Від цього може отримати багато сайтів.

Інша тенденція - це розробники Flash нарешті виявити HTML, jQuery та AJAX і все ще розмірковують у старій моделі Flash 'один файл = один сайт'. Це відрізняється від першої тенденції тим, що це великий сайт з великим вмістом, стисненим на одній сторінці даних / взаємодії. Як ви заявляєте, у цього методу є всілякі недоліки, хоча вони є переборними за допомогою правильного коду (переконайтеся, що URL-адреси змінюються / є закладками, Google може орієнтуватися по вмісту, керувати часом завантаження через AJAX тощо).

Я думаю, що одна з найкращих ідей односторінкового сайту полягає в тому, що в ньому є більше розповідного аспекту . Найкращий приклад, про який я можу придумати, - це сторінка : Сайт із запрошенням на весілля / весілля. Це неймовірний сайт, і він працює з багатьох причин, одна з них полягає в тому, що все так красиво протікає разом. Це не матиме однакового впливу на набір сторінок.

Ця демонстрація, яка спочатку була створена для демонстрації IE9 , стосується розповідей . Майже як книжка з картинками, але з прокруткою замість перегортання сторінок. І тому це справді безшовно і круто. Не дуже практично для створення ділового сайту, але він висвітлює одну з причин того, що віброзйомка на одній сторінці корисна.

Він також працює з меншими сторінками з не великим вмістом . Коли я одружився, я мав всю нашу інформацію на одному веб-сайті, оскільки просто не вистачало вмісту, щоб гарантувати перехід від сторінки до сторінки. Було простіше створити та підтримувати сайт з однією сторінкою, а час завантаження насправді не турбує.

Що стосується бізнесу, я думаю, що це важчий випадок. Я подумав, що запам’ятався приклад, коли Google запустив свій Nexus телефон - вони зробили це на одній сторінці сайту. З тих пір, як вони запустили свій планшет і оголосили, що Q це вже не так, тому я не можу зв’язати, але було дійсно охайно бачити все в одному місці. Ви зменшуєте кількість кліків і створюєте більш занурений досвід .

Я думаю, ви побачите безліч прикладів того, як люди роблять це просто для розгинання кодуючої мускулатури або намагаються використати тенденцію. Але це відбувається постійно у світі дизайну. Тримайте це на столі, коли ви враховуєте призначення свого сайту та використовуйте його, коли це доречно!

Існує перевага в цьому (лише я можу придумати!), Який полягає в тому, що якщо ви хочете здійснювати пошук за допомогою Ctrl+ F, весь вміст знаходиться на одній сторінці, щоб ви могли одночасно шукати весь веб-сайт (якщо вважати, що вміст можна шукати) .

Я думаю, що це частково випливає з концепції "Не змушуйте користувача просити більше вмісту - просто надайте їм їх". Як і Google, Twitter тощо, автоматично даючи більше результатів, чим далі ви прокручуєте.

Варто дивитись розмову GoogleTech від Ази Раскін з 2008 року "Не змушуй мене натискати" .

Весь розмова дуже цікавий, але пов'язаний біт тут починається з 29 хвилин. Тут він зламав Firefox, так що ви отримуєте всі вкладки свого браузера на одній постійній вертикально прокручуваній сторінці.

Цікаво, чи це було попередником того, що ви зараз бачите.

Два слова: досвід користувачів.

Основні портфоліо не повинні вимагати, щоб користувач переходив на кілька сторінок, щоб побачити, що вони можуть запропонувати, якщо вміст простий і прямолінійний.

Або, конкретніше, заклик до дії є сингулярним. Якщо метою сайту є: «найміть мене», сайт може бути контрпродуктивним, коли його мапа сайту непотрібна.

EDIT: кілька прикладів нижче ...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/

З точки зору SEO, дизайн сторінки на одній сторінці - це привид.

Це щось, що, ймовірно, погіршить вашу SEO-роботу, особливо коли ви працюєте в умовах конкурентоспроможного бізнесу. Я знаю, що графічні дизайнери рідко беруть це до уваги, а з іншого боку, клієнти не мають достатньо знань щодо SEO, але якщо ви запитаєте будь-якого спеціаліста з SEO, вони скажуть те саме.

Моя порада? Попросіть вашого фахівця з SEO зробити ключове слово та дати вам структуру вашого веб-сайту.

Ви можете прочитати більше про пошукову землю, ці хлопці дуже добре знають SEO;) https://searchengineland.com/single-page-websites-seo-182506

Схоже, це спроба дістати все "вище згину" - дорогоцінну, дорогоцінну зону, де перебуває середній глядач із короткою увагою. Різні дослідження корисної експлуатації показали це, тому люди намагаються помістити туди "важливі" речі. Схоже, цей дизайнер відчув, що "все так важливо".

Я не думаю, що це щось більше, ніж хтось використовує найновіший видовищний трюк, щоб змусити людей читати веб-сайт.

Візьмемо, наприклад, сайт Nike у пов’язаній статті @ Shauna. Чесно кажучи, чи багато інновацій залишилось у дизайні кросівок та рекламі тих самих кросівок? Цей вміст можна було б так само легко розмістити в брошурі або у Flash, якщо вони хочуть паралаксу. Натомість вони можуть додати чудовий паралакс ефект у результаті нової навігаційної схеми без тягаря Flash.

Я навіть пішов би так далеко, щоб здогадатися, що на веб-сайті Smashing Magazine є підручник HTML5 / CSS, який показує, як це зробити, що породило показані сайти.

Насправді я думаю, що перший предмет (дрифт-бар), який ви пов’язали, має класний фактор: він добре виглядає в русі.

Для мене це не мало сенсу, поки я фактично не натиснув одне з посилань на меню, і тепер я бачу, що анімація була єдиною рушійною силою для всієї ідеї. Це такий собі ефект старої школи з 3-х площин-камер, як старий мультфільм Попає чи Діснея.

Я думаю, що прокрутка на цій сторінці є або помилкою, або особливістю, від якої вони не могли позбутися.

Одна проблема полягає в тому, що це може бути популярним серед клієнтів! Ці сайти відносяться до часів флеш-мікросайтів для нещодавно випущеного продукту, схоже, паралакс зараз виконує цю роботу. Що стосується мікросайту продукту, я думаю, що вони прекрасні, а для веб-сайту, який насправді має вміст, вони точно не підходять. Я думаю, що інша річ полягає в тому, що дизайнери люблять демонструвати, що вони в курсі сучасності та «в тренді», а веб-сайт у популярній новій техніці примха може виглядати вигідно. Все вищезазначене висвітлює Інтернет на подібних сайтах.

Думаю, ви досить сильно відповіли на своє запитання у назві - тобто це примха.

Так само, як тоді, коли Javascript (а потім AJAX) з’явився роки тому, і люди займалися цим всілякими химерними речами, краща підтримка Jquery та CSS 2/3 та краща швидкість візуалізації в браузерах викликали цілий новий раунд експериментів з новими способами розміщення сайтів, які, можливо, раніше не були настільки практичними через деякі старі браузери.

Але так само, як і у CSS, Javascript та AJAX, модниця дозріває і зліпне, а з часом стане більш відточеною, приємною та корисною. Ваш перший приклад - це головний біль, що викликає головний біль, з божевільним роз'єднаним прокручуванням (якщо ви, скажімо, на початку та натискаєте "Галерея"). На мою скромну думку, це зайшло занадто далеко, і це недостатньо гладкий досвід, щоб виправдати розставання з нормальним. Це не означає, що всі сайти, що використовують подібні методики, будуть поганими.

Важливо, щоб дизайнери експериментували з новими способами роботи з новими технологіями. Я б ні на хвилину не припускав, що цього ніколи не слід було робити. Але це те, що воно є - експериментальне.