Responsive webdesign: 2013-ra Retina felbontású kijelzők érkeznek 2
Úgy tünik érdemes lesz csiszolni a reszponszív webdizájn (responsive webdesign) tudást, ugyanis hatalmas resolution növekedés várható az elkövetkezendő pár évben. A legfrissebb hírek szerint az Intel 2013-ra Retina felbontású IOS eszközöket és PC-ket vizionál. Ha pedig az intel mond valamit, akkor az általában úgy is szokott lenni.
A jövő érdekes, ugyanis ha bejönnek ez az új felbontások, az összes mostani website megy a levesbe a 960px-es standard szélességével és hirtelen nagyobb szerepe lesz a reszponszív webdizájn-nak (responsive webdesign) mint azt ma sokan gondolnák.
Lássuk a jóslatokat:
- Az 5 inches telefonok és média lejátszók 1280 x 800 képernyővel fognak rendelkezni (ez már meg is történt)
- A 10 inches tabletek 2560 x 1440 felbontással fognak rendelkezni ( ez is megvalósult az új Ipad-el)
- A 11 inches ultrakönnyű laptopok 2560x1440 felbontással jönnek
- A 13 inches ultrakönnyű laptopok 2800x1800 felbontással jönnek
- A 15 inches laptopok felbontása 3840 x 2160 lesz ( ez hamarosan megvalósulhat az új Macbook Pro szériával)
- Az "All-in-one" desktopok (Imac és társai) szintén 3840 x 2160 felbontással érkezhetnek
A responsive webdesign: Még mindig kevesen váltottak! 2
Divatos téma mostanában a reszponzív webdizájn-ról (responsive webdesign) beszélni. Mint írom "beszélni", ugyanis rengetegen beszélnek róla, de még mindig nagyon kevesen váltottak át rá.
Hogy miért? Mert macerás a dolog és a tervezése, megvalósítása szinte 3-szor annyi időbe kerül, hiszen terveznünk kell mobil, tablet, notebook, screen nézetet egyszerre.
Persze lehet csalni, hogy elemeket elrejtünk és nem foglalkozunk a különböző eszközökre való konkrét tervezéssel, de ezzel a megoldással közel sem lesz tökéletesen kihegyezve a reszponzív weblap (responsive weblap) és fél munkát is végzünk. Pedig előbb-utóbb muszáj lesz, hiszen az okostelefonok, tabletek drasztikusan terjednek, ráadásul a felbontások is növekednek, lásd: az új Ipad retina képernyője (2048 x 1536 képpont), hogy még jobban megkeveredjen a dolog. Mindenesetre az tény, hogy látogatókat veszíthetünk, ha a weblapunk nem megfelelően használható mondjuk a mobiltelefonokon.
Hatalmas lelki energiát vettem és elkezdtem a weblapom reszponzív-ba (responsive) való tervezését, egy megújult megjelenéssel. Tökéletes pilot project lesz, és lefogom írni, hogy milyen buktatókba, ötletekbe akadtam a kivitelezés során.
Az Év Honlapja 2011 nyertes 4
Díjnyertes webdesign, díjnyertes webdesigner. Örömteli hír, hogy a 2011-es "Az Év Honlapja" díjon a személyes kategóriában nyertem a weblapommal. A díjátadóra sajnos nem tudtam elmenni, mert dolgoznom kellett, majd jövőre! ;-)
Responsive webdesign pár mondatban 4
Reszponzív webdizájn (Responsive webdesign). Mostanában a csapból is ez folyik a nyugati design szférában. Miről is van szó? Mi is ez pontosan? Lássuk hát.
A webdesign eddig arról szólt, hogy van a weblapoknak egy optimális mérete, az adott monitorok optimális felbontásához méretezve, ami az évek során a monitorok felbontásának növekedésével szinkronban nőt.
Igen ám, de közben megjelentek az okostelefonok (Iphone és társai) a táblagépek (Ipad és társai), és az internet böngészővel rendelkező kütyük (MP3 lejátszók, multimédiás TV-k, stb). Természetesen az összes felsorolt eszköznek más a felbontása.
Mi tesz jelenleg aki szeretné hogy mobileszközökön is böngészhető legyen értelmesen a weboldala? Csináltat külön weboldalt mobilra optimalizálva, ha sok pénze van akkor csináltat tabletre is egyet. Egyszerű ki kalkulálni, hogy ez semmiképpen sem hatékony, sem anyagilag sem a belefektetett munka szempontjából. Mit lehet akkor tenni?
Itt jön a képbe ez az új megoldás a reszponzív webdizájn (responsive webdesign), ami gyakorlatilag arról szól, hogy egy weblapunk van ami minden eszközön megfelelően jelenik meg, megfelelően olvasható. Gyakorlatilag a webdesigner-nek 3 vagy több nézetet kell terveznie a weblapon található elemek csökkentésével, növelésével, eltüntetésével trükközve, a különböző képernyő méretekre optimalizálva.
Technikailag négy kulcs eleme van a reszponzív webdizájn-nak (responsive webdesign):
- Rugalmas layout (liquid):
A weblap kulcsfontosságú struktúrális elemeinek mindenképpen rugalmas méretezésüeknek kell lenniük, hogy a különböző képernyő méreteken tudjon csökkeni , vagy nőni a méretük
- Rugalmas méretarányos képek:
Természetesen a képeknek is rugalmasnak kell lenniük a különböző képernyő méretek miatt
- CCS media query:
Gyakorlatilag az új technológia lényege. A CCS media query segítségével tudhatjuk meg a weblap látogatója által használt készülék képernyőjének méretét (és még egy csomó minden mást is), amik alapján módosíthatjuk a weblapunk megjelenését, mindezt javascript használata nélkül
- Javascript:
Amennyiben a régebbi böngészőkben is akarjuk a reszponzív webdizájn (responsive webdesign) előnyeit használni, akkor szükség lesz a javascriptre, tehát végülis nem tudjuk megkerülni
Nagy vonalakban ennyi. Én már elkezdtem a technológia tanulmányozását, melyben nagy segítségemre van Ethan Marcotte: Responsive Web design című könyve. Akit érdekel a téma az alábbi linkeken megrendelheti a könyvet, illetve a második linkre kattintva tanulmányozhatja a legmenőbb responsive webdesign-al készült weblapokat is.
Hálóterv készítés a Google Docs-al 0
Elég gyakran szoktam webes felületeket tervezni, hiszen ezzel foglalkozom a nap 24 órájában :) Véleményem szerint a hálóterv készítés (wireframing) a legjobb megoldás, bármilyen webes felületet is szeretnénk tervezni.
Hálóterveket készíthetünk szinte bármivel: Word, Excel, Photoshop, Illustrator, Visio, Omnigraffle, Axure, a lényeg, hogy átlátható legyen a terv. Nemrég találtam egy új megoldást, ha egyszerüen és gyorsan akarunk hálótervet készíteni. Ez nem más mint a Google Drawings.
Összehasonlítva a Google Docs-ot a professzionális hálóterv készítőkell (Omnigragffle, Visio), a következő előnyök jöttek elő:
- Folyamtosan elérhető és frissíthető a dokumentum, akár teljes csapatok tudnak egyszerre dolgozni rajta, köszönhetően a Google erejének
- A hálótervek a cloud-ban helyezkednek el, ezért bárhonnan bármikor elérhetőek, nincsennek lejárt dokumentumok
- Az adatvesztés lehetősége 0, hiszen folyamtosan mentés történik minden egyes módosításkor
- A legtöbb ember rendelkezik Google accountal, ezért nem kell regisztrálniuk, megismerni a szoftvert
- Ingyenes!
Helló
Ez Bakos Szabolcs szabadúszó webdesigner porfólió blogja. Ha kiváncsi vagy rá itt többet megtudhatsz róla vagy akár a portfóliójába is belenézhetsz. Amennyiben design, webdesign munkád lenne számára, vagy tanácsadásra van szükséged, nyugodtan vedd fel vele a kapcsolatot.