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.
HTML5 hasznos segédletek 5
A HTML5 a HTML következő jelentősen átdolgozott változata. Ha nem vagy képben mik a változások újdonságok a HTML5-ben, akkor jó helyen jársz. Fáradságos munkával összegyüjtöttem az interneten fellelhető leghasznosabb HTML5 forrásokat.
Szivesen fogadok minden olyan linket, ami hasznos lehet, de én nem tettem be a listába.
Kellemes mazsolázást!
Magyar HTML5 linkek
- HTML5 referencia
Hasznos magyarra fordított HTML5 referencia.
- Devportal HTML5 linkek
Hasznos magyar HTML5 cikkek.
- 2014-re készül el a HTML5-specifikáció
A W3C szerint a szabványoknak való megfelelés csak úgy biztosítható, ha készül végleges, lezárt specifikáció.
HTML5 segédletek
- Mobilbarát HTML5
Hogyan készítsük el mobilbarát HTML5 honlapot.
- Böngésző független HTML5 formok
Böngésző független HTML5 formok készítése
- HTML5 Audio
Audio lejátszása a HTML5-ben
- HTML5 demók és minták
Hasznos Html 5 demók
- HTML5 and Css3 technikák
HTML5 and Css3 trükkök, amiket hamarosan használni fogsz!
- HTML5 kódolás a 0-ról
Hasznos segédlet, hogyan kódoljunk HTML5-öt a 0-ról.
- Html 5 formok
Bővebben a Html 5 formokról.
- Egy blog dizájnolása HTML5-el
Hogyan dizájnoljunk blogot HTML5-ben
- Css kód struktúra HTML5-höz
Hogyan használjunk Css kódot a HTML5-höz
- Sitepoint HTML5 segédlet
Hasznos segédlet a Sitepoint-tól
- Steve Smith és a HTML5
HTML5 és CSS3 bemutatása Steven Smiths által.
- HTML5: Az alapok (1 rész)
A HTML5 megfogja változtatni az internetet!
- HTML5: Új elemek (2 rész)
A cikkben felsorolt ötleteket, hamarosan látni fogod több weblapon is.
- HTML5: Szemantikus változások (3 rész)
Szemantikus változások a HTML5-ben
- HTML5: Befejező rész (4 rész)
A 4 részes sorozat záró része további tartalmas, lényegretörő tippekkel.
A webdesign 20 legnagyobb buktatója 1
Egy jó weblap megtervezéséhez sok idő kell. Fontos hogy mindig készítsünk előbb tervrajzokat (wireframe) kézzel papírra, vagy valamilyen hasznos szoftver segítségével (Visio, Illustrator, Omnigraffle), hogy lássuk elképzeléseink során előjön-e bármilyen tervezési probléma.
Miután ezeket a problémákat kiküszöböltük, kezdődhet a tervezési fázis. Sajnos a mai rohanó világban az ügyfelek azonnal akarnak mindent a lehető leggyorsabb időn belül a legolcsóbb áron. Ilyenkor születnek meg a buktatók. Nézzünk meg párat:
- A weblap célja nem egyértelmű
- Az ügyfél igényei homályosak
- Nincsennek tervrajzok csak rögtönzött megoldások
- A tervező inkompetens
- A határidő túl kevés a weblap befejezéséhez
- A költségvetés alul lett kalkulálva
- A weblap struktúráját a design határozza meg
- A navigáció zavaros és következetlen
- A menü szerkezete elavult
- Túl sok a menüpont
- A keresési opció hiányzik
- A keresési opció nem hatékonyan müködik
- A weblap szerkezete elavult
- A weblap iframe elemeket tartalmaz
- A weblapon található információ rendezetlen
- A flash túlzott használata miatt átláthatatlan az oldal
- Túl sok szín van használva a weblapon
- Szöveges elemek képként vannak megjelenítve a weblapon
- Olvashatatlan kicsik betük
Az új DBN weblap 7
Régóta várom már ezt a pillanatot, hiszen végre bejelenthetem, hogy elkészült a megújult weblapom. Hatalmas lelki erőt kellett felvennem az elmúlt 2 hónapban, hiszen gyakorlatilag minden szabadidőmet felemésztette az új oldal elkészítése, feltöltése, kicsiszolása.
Az első és legfontosabb változás hogy mostantól a weblapom két nyelvű. Az angol nyelvű verziót átköltöztettem a newconcept.eu domainra, a .hu végződésű pedig maradt a magyaroknak. Az oldalak letisztultabbak és lényegretörőbbek lettek. Minden fehér! :) A barna színt szerettem, de ideje volt lecserélni. A következő heteket az oldal további csiszolásával, hiányosságok javításával fogom eltölteni, rengeteg javítanivaló van még hátra, illetve a mobil változatok sem készültek még el.
Remélem nektek is tetszik a megújult weblapom és az új stílus. Hamarosan jelentkezem.
Minőségi Sitebuilder szolgáltatás 0
Html és Css programozás ügynökségek és szabadúszók számára, akár 8 órán belül. Profi sitebuilder csapatot keresel? Megtaláltad!
Több mint 15 év tapasztalat, több mint 100 sikeres projekt, több mint 100 000 beírt kódsor. A Sitebuilder 24 Team számára nincs lehetetlen.
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.