67 днів назад 
Як зробити сайт ще зручнішим
Думаю, що ви, як і я часто відвідуєте сайти які не буде зручні для відвідувачів. Хоча за історію інтернету вже давно сформувалися деякі стандарти для сайтів, ми звикли що у всіх є шапка, меню, бокові панелі та футер. І це допомагає нам зорієнтуватися на будь якому новому сайті.
Оскільки маю уже немалий досвід розробки сайтів то я провожу трохи більше часу на сайтах, аналізую його структуру, дизайн та оптимізацію. І постійно потрапляю на одні і тій помилки, можна сказити “не доробки” навіть на популярних сайтах. Ось декілька порад які очевидні, але не завжди їх використовують розробники.
Ось вам для прикладу сайт – Стоматологія в Києві. Красивий дизайн і зручний функціонал. Відвідувач відразу отримує потрібну інформацію.
Я останнім часом став сильно цікавитися темою юзабіліті для сайтів. Матеріалу для вивчення дуже мало, приходиться читати англомовні статті з перекладом Google Translate, бо англійську я розумію тільки на початковому рівні.
Тема як цікава, так і перспективна, справжніх спеціалістів по юзабілаті що є у нас ( в Україні ), можна порахувати на пальцях однієї руки. Те що кожна веб студія пише в своїх навиках – юзабіліті, це не означаю що вони взагалі розуміють що це таке і з чим його їсти.
Юзабіліті дизайну
Ось деякі поради по юзабіліті самого дизайну. далі…
Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3.
Для початку задамо основу для нашої кнопки:
border: 1px solid #5d9046; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
Результат після першого кроку
Зріжемо гострі кути заокругливши їх:
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Результат після другого кроку
Для краси додамо нашій кнопці тінь:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
Результат після третього кроку
Ну і наостанок зробимо колір кнопки градієнтним.
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
Фінальна версія кнопки
Ось і готова наша кнопочка в ситі web 2.0. Якщо погратися ще із :hover, то можна придати їй ще більшої краси. далі…
Часто нам потрібно юридические услуги украина, але не завжди ми знаємо де їх знайти. Раджу скористатися сайтом legalaid.kiev.ua. Хороші спеціалісти завжди раді вам допомогти.
- Який сайт створювати: фіксований чи резиновий
Таке запитання часто виникає при створенні нового сайту. На рахунок цього хочу висловити свою думку.
Що таке “резинова верстка сайту” – сайт який змінює свою ширину залежно від дозволу екрану користувача. Як правило 100% гумових сайтів не буває c урахуванням існуючих моніторів приміром 1680 × 1050 або 1920 × 1200, як буде виглядати сайт? Хоча може ви й зустрічали. Тому беруть діапазон від ~ 980 px до 1280 px по ширині.
Переваги гумової верстки бачу тільки для промосайтів, коли потрібно рекламою товару забити всю область екрану, зробити це ефектно, великі зображення чи флеш.
Для інформаційних сайтів з текстовим контентом: блоги, магазини, форуми та інше – резинова верстка неприйнятна – контент плаває, дуже рідко який верстальщик може зробити якісну резинову верстку і тут звичайно потрібно робити відразу кілька макетів, що б показати як буде виглядати сайт при 2 -3 розширеннях монітора. Виходить що практичних переваг “резинової верстки” немає, але багато зайвої роботи і коду.
Що таке “фіксована верстка сайту” – сайт який незалежно від дозволу монітора користувача завжди по ширині однакового розміру.
Тут я бачу тільки плюси:
- Контент статичний і не бігає по сайту;
- Не потрібно турбуватися про те як виглядає сайт у відвідувачів з різними моніторами;
- Самого коду сайт менше і відповідно сторінка швидше завантажується.
Днями відеосервіс YouTube запустив експериментальний дизайн під назвою Project Panda.
Новий варіант дизайну сайту може активувати будь-який користувач на спеціальній сторінці youtube.com/cosmicpanda, а відключити його також можна в будь-який час на контрольній панелі youtube.com/testtube.
В новому дизайні багато елементів сайту змінили своє оформлення. Наприклад, відеоплеєр став темніший і розміщується тепер по середині екрану, розміри преєру тепер можна збільшувати. Фон при перегляді відеоролика також виконаний в темно-сірій гамі. Дизайн сторінок каналів і стиль відображення плей-листів на сайті теж змінився.
Новий дизайн YouTube - Project Panda
Загалом, аналітики вважають, що новий дизайн YouTube повинен припасти до смаку більшості користувачів і в цілому він вийшов досить вдалим.
Сам я уже декілька днів використовую новий дизайн. Мені він дуже сподобався, красивий та зручний.
Сьогоднішній день увійде в історію мого блогу як нове переродження. Мій блог постає перед вами тепер з новим облитчам, тобто із новим дизайном.
Ідея змін у мене виникла давно. тому що попередній дизайн мене не повністю влаштовував. Він був комфортним і затишним. Текст на ньому добре читався, і загалом він виглядав непогано. Але виглядав зовсім не професійним, хатки і поштові штампи не підходили для мого блогу, частина статтей у якому була про заробіток в інтернеті. Для того щоб нагадати який був мій блог до сьогодні і зняв скріншот.
Старий дизайн
Теперішній дизайн я не скріншотив, так як його ви ітак бачите. Шаблон знайшов в інтернеті у вільному доступі для скачування. Але багато деталів мені не сподобалося, тому прийшлося багато потратити часу для того щоб виправити ситуацію, і привести його до вигляду який ви бачите зараз. Велика частина верстки належить мені.
Версія пре бета, тому що в шаблоні ще багато багів, і багато чого не хватає із того що я задумав. Але над цим я буду працювати. Цікаво почитати думки читачів щодо нового дизайну. Як Вам? Можливо будуть якісь пропозиції чи зауваження?
Мені потрібна Ваша думка.
Скоро мому блогу виповниться 1 рік. От і вирішив я трошки обновити його. Для початку я змінив дизайн. Він світлий і радісний, мені деже подобається. Пізніше, як це “перетравлять” пошукові системи я трошки зміню структуру блогога. А саме, перепишу категорії, і поставлю написані статті у відповідні по темі.
Якщо хтось відвідував цей блог раніше, то напевне замутив, що разом із дизайном змінилась і його назва. Із “Блог про заробіток в інтернеті” він став “Життя і заробіток в інтернеті“. Тому що не всі мої статті прямо торкаються заробітку у всесвітній мережі.
Також від сьогодні трошки зміниться характер самих статтей. Буду писати більш цікавіші статті, які реально допоможуть новачку почати заробляти в інтернеті. Перестануть виходити “швидкі” статті, з масою граматичних помилок.
Планую почати вивчення PHP, тому можливо будуть статті і на таку, цікаву і корисну тему.
Новий дизайн мене надихає, тому робота буде продуктивна.
Раджу підписатися на RSS – буде жарко!
