Корисници који Интернету приступају путем таблета и мобилних телефона се повећавају. То, као што већ знате, значи да више није довољно дизајнирати добру веб страницу која добро изгледа на нашем рачунару: она такође мора да се види на сваком мобилном уређају. Проблем? Различите величине и резолуције екрана. Због тога је толико тешко направити дизајн који се правилно прилагођава свим медијима (познати одговарају дизајн, преведено као адаптивни дизајн).
Ево неколико савета које морате имати на уму приликом израде дизајна са овим карактеристикама. Обратити пажњу!
Савети за адаптивни дизајн
- Направите једноставан образацПод једноставним не мислим на непристојно. Говорим о структура ХТМЛ ваше веб странице: што је јаснији, то је бољи. Имајте на уму да екран рачунара може да стане у три вертикална стуба; на екрану мобилног телефона стаћете само један. Размислите о томе и како ћете преместити елементе.
- Елиминишите све непотребноИзбегавајте јКуери ефекте, Фласх анимације и било који други код који успорава учитавање ваше странице. Што мање садржаја ове врсте имате, брже ће се веб учитати.
- Дефинишите стил цсс за сваку „величину“Направите тини.цсс, смалл.цсс и биг.цсс (на пример) који се покрећу на основу уређаја на којем се гледа. На пример:
@ УРЛ за увоз (тини.цсс) (минимална ширина: 300пк);
@ УРЛ за увоз (смалл.цсс) (минимална ширина: 600пк);
@ УРЛ за увоз (биг.цсс) (минимална ширина: 900пк);
- Најчешће коришћене резолуције320пк / 480пк / 720пк / 768пк / 900пк / 1024пк
- Нека ваш шаблон буде ФЛЕКСИБИЛАНКад год можете, радите са процентима уместо са фиксним износима. Ево неколико референтних еквивалената: 200пк = 15'38% / 300пк = 23'07% / 800пк = 61'5384615384%
- Типографија Важније је него икад. Екран уређаја може бити толико мали да је све што видите само текст. Због тога морамо врло пажљиво да одаберемо најбоље фонтове на нашој веб локацији, тако да када се смање, не изгубе читљивост. Поред тога, морамо знати како комбиновати неутралније фонтове са другима са личношћу која даје мрежи потребан карактер. Стога је први савет да време трошите на одабир фонтова које ћете користити.
- Коришћење слике високог квалитетаКако се простор смањује, слике ће га пратити. Изаберите оне који не губе квалитет кад се смање, а који раде исто када се скалирају. Слика лошег квалитета учиниће да ваша веб страница изгледа лоше.
- Да се ваше слике увек виде пунСпречите одсецање фотографија додавањем имг (ширина: 100%;) кода у свој цсс. На тај начин поручујете уређају да прерачуна висину коју ће слика добити тако да се њена ширина види сто посто.
- Све ниско исти УРЛЗаборавите на поддомене попут ввв.мисите.цом/мобиле, јер ће иста датотека индек.хтмл у основној фасцикли радити на свим уређајима (ако правилно прилагодите дизајн). Већ знате предност: што је мање поддомена, то ће страница бити бржа.
- Искористите носаче: Будите маштовити Није исто приступити веб локацији са стоног рачунара него са иПад-а или мобилног телефона. Са првом ћете се кретати мирно и смирено. Са последњим ћете то учинити у празним сатима и затворити прозор чим вам досади. Искористите ове услове да забавите корисника и забавите их у тих неколико минута које ће вам посветити. Можда се по повратку кући одлучи да вас поново посети на опуштенији начин.
- Добити инспирацију У дигиталним публикацијама запитаћете се зашто овај савет. Веома лако: дигитални часописи (добри) знају како да искористе подршку и њихов дизајн је врло интелигентан. Надахните се њима и направите веб страницу коју је тешко напустити.
Више информација - Дигитални часописи
Извор - Сплио, 960.гс, колумна
Постоје ствари са којима се не слажем превише.
У тачки 5 ... пошто је 200пк = 15,38% и следећих ... ово поређење референци не може се извршити без било какве родитељске мере, величина по пикселима није релативна мера попут процената!
Наведите слике са ширином: 100% погрешно, мислим да то не би требало да буде препорука. Слике их боље дефинишу ширином и висином, па серверу треба мање времена за обраду информација (не мора израчунати његову величину), а побољшавамо брзину учитавања странице (што је веома важно у адаптивном или прилагодљивом Вебу дизајн).
Већ бих укључио, иако је то додир носа ... слике за ретина екране. Ако желимо да направимо респонзивни веб дизајн, обавезно је користити слике за приказ мрежњаче, јер велики број приказа мобилних уређаја и таблета користи ове екране. Дакле, нема смисла улагати напор у њихов дизајн на пола гаса.
Добро за остало
У тачки 5 стављају вас у контекст и говоре вам о укупном распореду од 1300пк са 3 колоне, једном од 200, 300 и 1000.
Ако га пренесете на проценте, они су они како ви кажете, 15,38% ((200 * 100) / 1300) (децимално место доле, међународни систем: П)
Али ако говоримо о распореду од 500 пиксела и имамо 3 колоне, једну од 200, другу од 200 и другу од 100 пиксела, проценти више нису исти, у овом случају 200 пиксела = 40% ((200 * 100) / 500)
Они би били: 200пк = 40% и 100пк = 10%
Хајде, као што рекох, они нису референца оно што ви наводите, они су референца само на распореду од 1300пк.
поздрав
Какав неуспех, у праву си потпуно у свету! Хвала још једном ;)