Bevezetés a responsive tervezésbe – Eszközök

-

Ismerkedjünk meg a responsive tervezés világával. A sorozatban átvesszük a tervezési szemlélethez kapcsolódó fogalmakat, területeket. 

rwd-cover-2

A responsive tervezés megjelenésével a tervezők számos új kihívás elé néznek, mivel ez a módszer egy új fajta szemléletet követel a tervezéskor. A mai open-source közösségeknek köszönhetően rengeteg eszköz áll a rendelkezésünkre, melyekkel megkönnyíthetjük a munkákat. A következőkben bemutatok jó pár ilyen eszközt!

Keretrendszerek

A HTML/CSS keretrendszerek segítségével meggyorsíthatjuk a fejlesztési időt. Napjainkban szinte minden héten jelenik meg egy-egy újabb megoldás a piacon. A számos “nagyobb” framework mellett találhatunk igen karcsú megoldásokat, melyek általában csak a rács rendszerre kínálnak megoldást. Ha komolyabb képet szeretnénk kapni a keretrendszerek népszerűségéről látogassunk el az alábbi oldalra, ahol egy kis összefoglalót találunk a piacon szereplő rendszerekről.

Figyelembe kell vennünk – ha úgy döntünk, hogy front-end keretrendszert használunk – hogy számos jó megoldás akad. Válasszuk azt, amelyik megfelel az igényeinknek!

Napjainkban elég megosztott a webes közösség a keretrendszer használatával kapcsolatban. Sokak szerint felesleges és csak tovább lassítja az oldalunkat. Természetesen, mindenkinek saját magának kell eldöntenie, hogy használja-e őket, vagy sem. Egy próbát mindenképp megér, azonban azt tartsuk szem előtt, hogy ezek használatát jól el kell sajátítanunk, ahhoz hogy használható oldalakat készítsünk!

frameworks

Bootstrap

A rendszer 2-es verziójával már foglalkoztunk az  oldalon. Jelenleg a legnépszerűbb projekt GitHub-on, nem véletlenül. Ez volt az első komolyabb keretrendszer. Szinte minden HTML elemre rendelkezik egyedi formázással, valamint számos JS bővítményt tartalmaz. A 3.0 nagyszerű előrelépésnek bizonyult, a rácsszerkezet rengeteget fejlődött. A hivatalos oldalon a customize menüpont alatt nagyon jól testre szabhatjuk a letölteni kívánt fájlt, így gond nélkül kikapcsolhatjuk azokat a részeket, amikre nem tartunk igényt.

A Bootstrap Less-t használ, de létezik egy Sass ág is, amit megtalálunk GitHub-on!

Foundation

A ZURB által fejlesztett rendszer méltán lett népszerű. A folyamatos fejlesztésnek köszönhetően a nagyok közül talán ez fejlődik a legdinamikusabban. Nem olyan rég jelent meg az ötös verzió, ami nagy előrelépést jelent az optimalizált kép kezelés területén. Nagyon hasonló a Bootstrap-hoz, mivel mind kettő hasonlóan épül fel és hasonló modulokkal is rendelkezik. A Foundation-ban találunk egy-két olyan modult (intercharge, egyenlő oszlop magasság), amit Bootstrap-ban nem!

Ha részletes összehasonlítást szeretnénk a Bootstrap-ról és a Foundation-ről, akkor látogassunk el az alábbi oldalra!

Gumby

A Gumby A legfiatalabb a 3 közül, azonban mindenképp említésre méltó a dinamikus fejlődése miatt. Ez is egy teljes értékű keretrendszer rengeteg előreformázott elemmel, valamint számos JavaScript kiegészítővel. Érdemes vetni rá egy pillantást, hátha pont ez az a rendszer, ami a legjobban kézre áll nekünk!

Tervező programok

A responsive tervező programok még gyerekcipőben járnak, de már így is akad jó pár használható, elég komoly megoldás a tervezési problémák áthidalására.

designer_programs

Adobe Edge Reflow

Egy nagyon fejlett, a kategóriájában az egyik első ilyen tervezőprogram. Az Adobe-nál egészen aktívan fejlesztik, így fokozatosan kerülnek bele az új funkciók.

Macaw

A Macaw szintén egy nagyon profi szerkesztő, ami felveszi a versenyt a Reflow-val. Az ára nem vészes, figyelembe véve, hogy komplett oldalakat készíthetünk vele!

Webflow

A Webflow segítségével HTML/CSS tudás nélkül rakhatjuk össze a responsive oldalunkat (akárcsak az előző kettővel). A Reflow-hoz hasonlóan ehhez is csak havidíjas formában juthatunk hozzá!

Tesztelés

A tervezés során a tesztelés fontossága hatványozottan fontos, mivel az általunk készített oldalt több kijelzőméretre kell optimalizálnunk!

test

Hardware-es tesztelés

A legalapvetőbb teszt eszköz a tényleges hardware. Ezt sajnos nem tudjuk elkerülni, legalább kell egy telefon és egy tablet. A legnépszerűbb böngészőknek mind van mobilra optimalizált verziója. Általánosságban elmondható, hogy a régi Android böngészőt leváltják a modern böngészők, az újabb Android operációs rendszereken már előre telepítve megtaláljuk a Chrome-ot. A Chrome mellett a Firefox és a Safari a legnépszerűbb mobil eszközön!

Chrome DevTools

A Chrome fejlesztői eszköze rohamosan fejlődik. A 4.0-ás Android-tól már könnyen összekapcsolhatjuk asztali Chrome böngészőnket a telefonéval. Ezzel a megoldással a szokott módon használhatjuk a fejlesztői eszközöket mobilon is!

iPhone remote debug

Természetesen iOS-en is elérhető a távoli debug funkció böngészőből. Ehhez az asztali gépre Safari böngészőt kell telepítenünk, amit aztán össze kell kötni a mobil eszközzel. Leírást itt találsz!

Opera Mobile Classic Emulator

Opera Mobile böngészőt tudunk emulálni Linux-on, Mac-en, vagy Windows-on. Remek kis alkalmazás, számos eltérő felbontású kijelzőt szimulálhatunk vele. Ezzel az eszközzel sikeresen tesztelhetünk a mobil eszközökön igen népszerű böngészőre!

BrowserStack

A BrowserStack egy online alkalmazás, mellyel számtalan eszközön tudjuk tesztelni az oldalunkat. A program lényege, hogy a tesztelt oldalakat valós eszközökön futtatja le, majd azok képernyőképét küldi vissza, tehát nem aktív módban tesztelünk. A szolgáltatás havi 39 dolláros ára miatt valószínű, hogy csak a rendszeres fejlesztés során megengedhető, azonban ezért a pénzért a piacon lévő legjobb eszközt kapjuk a kategóriájában.

Remote preview

A Remote Preview egy JavaScript kód, mellyel egyszerre frissíthetjük a különböző eszközök böngészőjét. Ingyenesen elérhető, részletes információ itt.

Adobe Edge Inspect CC

program sajnos csak a teszt szakaszban volt elérhető ingyenesen, most havi 25 euróért juthatunk hozzá. Segítségével összeköthetjük a böngészőnket a mobil eszközeinket és frissíthetjük őket egyidejűleg, a böngészőnkből debugolhatunk, valamint készíthetünk képernyőképet.

Egyéb, hasznos eszközök

misc_res

SCREEN SIZE.ES

Ez az oldal egy nagyon hasznos gyűjtemény a különböző telefonokról és azok adatairól (szélesség, magasság, fizikai szélesség, pixelsűrűség, népszerűség).

IcoMoon

A responsive tervezés egyik legnagyobb kihívása a képkezelés. A ikon betűkészletekkel ezen segíthetünk. A módszer lényege, hogy az ikonjainkat (Facebook, Twitter, egyéb), betűkészletté alakítjuk, majd egyszerre betöltjük. Előnye: kevesebb HTTP lekérés és méretezhetőség, hiszen innentől a böngésző vektroként kezeli, azaz jó lesz retina kijelzőn is! Az IcoMoon egy ilyen tervezőprogram, ahol pluszban még válogathatunk a már az oldalon meglévő ikonok közül.

MQTest.io

A MQTest egy nagyon egyszerű alkalmazás, ami épp az aktuális eszköz, tervezéshez szükséges adatait kérdezi le, majd jeleníti meg!

Összefoglalás

A fenti lista korán sem teljes! A responsive tervezés nem egy trend! Rengeteg módszer, megoldás és eszköz között válogathatunk, ha úgy gondoljuk, hogy mindezt lehet hatékonyabban is csinálni!

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.