Responsive Web Design Dr. Nyéki Lajos 2019
Bevezetés A responsive web design tervezési technika által létrehozott web oldalak skálázhatók, a web oldalt mobil telefon, táblagép és asztali számítógép böngészőjével is megtekinthetjük. A skálázható web oldalak felépítése speciális, a skálázhatóságot média lekérdezések és töréspontok biztosítják. Ezek teszik lehetővé a felhasználó képernyőjéhez és böngészőjéhez való alkalmazkodást.
A leggyakoribb képernyő felbontások Alacsony felbontás 4,4% 1024 768 3% 1280 800 4% 1280 1024 5% 1366 768 35% 1920 1080 17% Egyéb magas felbontás 31,6% (Screen Resolution Statistics, January 2017, https://www.w3schools.com/browsers/browsers_display.asp)
A média lekérdezés A média lekérdezés olyan CSS szabály, amely megadja a böngésző számára a média típusát és tulajdonságait. A média típusa lehet screen (digitális képernyő), print (nyomtatott oldal), speech (szövegfelolvasó program) és all (minden média típus esetén). A média tulajdonságai: a viewport mérete (szélessége, magassága), orientációja (álló, fekvő), skálázhatósága, színmélysége, felbontása, méretaránya, stb.
A média lekérdezés típusai Link megadásával: <link rel= stylesheet media= screen href= pelda.css > Import szabály megadásával: @import url(pelda.css) screen; Media szabály megadásával: @media (min-width: 500px) { };
A töréspont A töréspont azt adja meg, hogy különböző médiumok esetén (pl. notebook, tablet, mobil) hogyan változzon a tartalom megjelenítése.
A töréspontok használata A tervezők egy része a szabványos töréspontokat szereti használni, ezek a mobil telefon, a táblagép és az asztali számítógép változatok. Egy másik megközelítés a mobil telefonra először, és a fokozatos bővítés a többi médiumra. Ha a fokozatos bővítés során már kevés a hely vagy sok a hely a széleken, akkor célszerű töréspontot beszúrni, és elkészíteni a következő változatot.
A gyors prototípus készítés néhány eszköze Bootstrap Foundation Zurb W3.CSS
A tervezés Stílus útmutató készítése a terv vizuális megjelenítése érdekében. Ez az útmutató lesz a közvetítő kapocs a tervező és a fejlesztő között. Responsive design pattern -ek használata a felhasználói navigáció megtervezésekor. A toggle navigation pattern és a select menu pattern használata az egyszintű és a többszintű navigáció megtervezésekor. Reszponzív oldaltervek készítése százalékok és dobozok használatával. Tartalom és tipográfia hozzáadása.
Fluid elrendezések százalékok használatával
Fluid elrendezések rácsok használatával
A terv megvalósítása kódolással Grafika hozzáadása stíluslapok használatával. Fokozatos bővítés a különböző böngészők figyelembe vételével és elegáns csiszolás a hibák kiküszöbölésére. A Modernizr JavaScript könyvtár használata a böngésző jellemzőinek feltárására. A tesztelés és az optimalizálás elvégzése.
Freeware szoftverek CoffeeCup Free HTML Editor 16.1 http://www.coffeecup.com/free-editor/ Lauyan ToWeb Responsive Website Creation Software V7.1 https://www.lauyan.com/en/download-toweb.html Mobirise Website Builder https://mobirise.com/ RocketCake Responsive Website Editor 2.2 http://www.ambiera.com/rocketcake/
Kereskedelmi szoftverek CoffeeCup HTML Editor 16.1 http://www.coffeecup.com/html-editor/ CoffeCup Responsive Site Designer 3.0 http://www.coffeecup.com/designer/ Humane Technologies Pinegrow Web Editor 5.2 http://pinegrow.com/ WYSIWYG.Web.Builder.14 http://www.wysiwygwebbuilder.com/