Responzívnosť - ako navrhnúť webové stránky, ktoré vyzerajú dobre na akomkoľvek zariadení?
Projekt „Inovácie vo vzdelávaní VET “ dotovaný Európskou úniou
Úvod do témy WQ
Dnešný internet je miestom, kde používatelia používajú rôzne zariadenia, ako sú stolové počítače, prenosné počítače, smartfóny, tablety a televízory. Každé z týchto zariadení má inú veľkosť obrazovky, rozlíšenie a pomer strán. V dôsledku toho sa navrhovanie webových stránok, ktoré vyzerajú dobre na každom z týchto zariadení, stalo nevyhnutnou súčasťou moderného webového dizajnu. V tejto súvislosti sa objavil pojem responzívny dizajn, ktorý označuje navrhovanie webových stránok tak, aby sa automaticky prispôsobovali rôznym veľkostiam obrazovky a poskytovali optimálny používateľský zážitok bez ohľadu na používané zariadenie.
S rastúcou popularitou mobilných zariadení sa reakcie webových stránok stali kľúčovými. Podľa údajov viac ako polovica používateľov internetu na celom svete používa na prehliadanie webových stránok mobilné zariadenia. To znamená, že ak webová lokalita nie je responzívna, používatelia môžu mať problémy s jej čítaním a navigáciou, čo vedie k zvýšeniu miery odchodov a nižším výsledkom vo vyhľadávačoch.
Responzívny dizajn je prístup, ktorý využíva responzívne rozvrhnutie, obrázky a CSS na zabezpečenie toho, aby sa webová stránka zobrazovala a fungovala čo najlepšie na všetkých zariadeniach. Pomocou správnych techník môžu dizajnéri vytvoriť stránky, ktoré sa prispôsobia rozlíšeniu obrazovky a zachovajú si plnú funkčnosť a čitateľnosť na rôznych zariadeniach. To znamená, že webová lokalita sa bude vhodne prezentovať na stolových počítačoch, ako aj na smartfónoch, tabletoch a dokonca aj na televízoroch.
Responzívny dizajn nielen zlepšuje používateľský zážitok, ale ovplyvňuje aj SEO (optimalizáciu pre vyhľadávače). Google podporuje stránky, ktoré ponúkajú dobrý používateľský zážitok na rôznych zariadeniach, a responzívnosť je jedným z kľúčových faktorov, ktoré ovplyvňujú umiestnenie stránky vo výsledkoch vyhľadávania. Stránky, ktoré sú dobre navrhnuté pre mobilné zariadenia, sú navštevované častejšie a ich používatelia na nich trávia viac času, čo má priamy vplyv na ich úspešnosť online.
V dnešnom procese vývoja webových stránok umožňujú správne nástroje a techniky dizajnérom rýchlo vytvárať stránky, ktoré automaticky prispôsobujú svoje rozloženie rôznym zariadeniam.
Medzi najdôležitejšie techniky používané v responzívnom dizajne patria:
• Flexibilné mriežky a rozvrhnutie - používanie relatívnych jednotiek (napr. percent, rem) namiesto pevných jednotiek (napr. pixelov), čo umožňuje automatické prispôsobenie prvkov stránky veľkosti obrazovky.
• Mediálne dopyty - dopyty CSS, ktoré umožňujú zmenu štýlov podľa rozlíšenia obrazovky, čo umožňuje rôzne rozvrhnutie pre stolové počítače, tablety a telefóny.
• Optimalizácia obrázkov - techniky komprimácie a úpravy rozlíšenia obrázkov, aby boli vhodné na zobrazenie na zariadeniach s rôznym rozlíšením obrazovky.
• Mobile First design - prístup, ktorý spočíva v tom, že sa stránka najprv navrhne pre mobilné zariadenia a potom sa prispôsobí väčším obrazovkám.
• Reakcia nie je len otázkou estetiky, ale aj použiteľnosti. Správne navrhnutá webová lokalita nielenže vyzerá dobre na akomkoľvek zariadení, ale sa aj ľahko používa, má rýchle načítanie a poskytuje používateľovi optimálny zážitok bez ohľadu na jeho platformu.
Informácie pre učiteľov
Web quest je určený pre študentov odborných škôl, ktorí sa pripravujú na povolania ako IT technik, technik počítačovej grafiky alebo programátor. Jeho cieľom je oboznámiť študentov so základmi responzívneho webového dizajnu a naučiť ich navrhovať webové stránky, ktoré dobre vyzerajú a správne fungujú na rôznych zariadeniach.
Študenti budú pracovať v tímoch a každá skupina pripraví prezentáciu o vybranom prístupe k responzívnemu webovému dizajnu, pričom opíše jeho dizajn, vlastnosti, výhody a nevýhody a porovná ho s inými technológiami webového dizajnu.
Prostredníctvom realizácie Web Questu žiaci:
• Naučia sa, čo je to schopnosť reagovať v kontexte webového dizajnu.
• Naučia sa, ako prispôsobiť rozloženie webovej stránky rôznym rozlíšeniam obrazovky.
• Pochopenie princípov navrhovania pre mobilné zariadenia
• Naučia sa nástroje a techniky na vytváranie responzívnych webových stránok
Študenti budú pracovať samostatne - zhromažďovať informácie - a v skupinách vytvárať prezentácie o vybraných aspektoch responzívneho webového dizajnu. Práca bude prebiehať pod časovým tlakom.
Odporúčaný čas na dokončenie webovej úlohy:
Študenti budú pracovať na realizácii procesu počas 12 vyučovacích hodín.
Kritériá hodnotenia, budú hodnotené:
• stupeň vyčerpania predmetu (maximálny počet bodov: 5, prekročenie tejto znalosti: počet bodov 6),
• estetiku prezentácie a spôsob prezentácie informácií,
• angažovanosť a schopnosť žiakov spolupracovať.
Hodnotenie:
• Učiteľ pomôže žiakom analyzovať obsah, kým ho žiaci nepochopia. Bude im poskytovať pomoc, rady, vysvetlenia, a nie hotové riešenia. Takáto metóda bude dobrým spôsobom realizácie samostatnej činnosti a tvorivého myslenia.
• Učiteľ by mal so žiakmi pozorne preberať obsah, kým ho žiaci nepochopia. Mal by im však poskytovať skôr pomoc, rady, vysvetlenia než hotové riešenia. Takáto metóda bude dobrým spôsobom realizácie samostatnej činnosti a tvorivého myslenia.
• Rozdelenie do skupín sa môže uskutočniť podľa rôznych kritérií, napr. podľa kognitívnych schopností, zručností, záujmov žiakov, aby sa "rovnomerne" rozložili silné stránky v každej skupine.
• Učiteľ môže žiakom pri práci v skupinách pomôcť tým, že im kladie usmerňujúce otázky. Je dôležité, aby si uvedomili, že sa učia nový spôsob práce (proces).
• Učiteľ by mal žiakom poskytnúť konkrétne informácie o hodnotení ich výkonu, a to počas skupinovej práce aj pri sumarizácii výsledkov.
• Čas na projekt by mal byť prispôsobený schopnostiam študentov. Nie je vopred stanovený. Časové rámce uvedené pre jednotlivé fázy procesu by sa mali považovať za orientačné.
