Mi a különbség Mobil weboldal és Responsive weboldal között?

Mivel az utóbbi időben egyre több ügyfelemnél merült fel a kérdés mi is a különbség egy mobil oldal és egy responsive oldal közt, úgy éreztem megérdemel egy postot a két fogalom tisztázása.

Mobil weboldal

Már a domain nevéről könnyen megismerhető, hiszen benne van az ‘m’ előtag,
például: http://m.weboldal.hu A mobil weboldal 5-6 évvel ezelőtt jött divatba, amikor hirtelen, és gyors válaszlépésre volt szükség az okostelefonok térhódítására: Ezeknek a kijelzőjén a legtöbb weboldal nem igazán volt élvezhető, hiszen állandóan be és ki zoomolni kell hogy el tudjuk olvasni, ekkor viszont az oldal csak töredékét látja a felhasználó. Ezért létrehozták az eredeti weboldalnak egy “lebutított verzióját” ahol csak a legfontosabb információk maradtak meg, mindehhez nagyjából passzoló a szín és formavilág.
A mobil weboldallal több probléma van: elsőként az, hogy mivel nem ugyanaz a felépítése és tartalma, mint az asztali gépről nézett weboldalnak, a felhasználónak újra meg kell ‘tanulnia’ mit hol talál. A felhasználó türelmére építeni pedig manapság ebben a felgyorsult világban igen bátor dolog…
A másik hátulütő a felhasználó élmény csökkenése. Míg az asztali weboldal designja és jól navigálhatósága pozitív élményt hagy a nézőben, ugyanezt mobilon nézve már nem éli át.
Harmadsorban pedig, táblagépen nézve egy “senkiföldjére” jutunk. Ezt vagy még nem érzékeli mobileszköznek, (viszont a weboldal lekicsinyítve már itt is nehezen élvezhető) vagy már  a mobil kinézetet hozza, ami viszont rágógumiként van erőszakkal széthúzva egy szélesebb felületre mint azt eredetileg tervezték.

Persze elsőre ez designer úrimurinak hangozhat, de gondolj bele: a való életben is egy olyan boltba jársz vissza szívesen vásárolni, ahol gusztán, logikusan vannak elrendezve a polcon levő termékek. Ez a virtuális térben sincs másképp.

Mobil responsive weboldal

A responsive web design az utóbbi pár évben indult terjedésnek. Jelenleg a világ weboldalainak körülbelül 8-10% responsive.

A responsive angol szó definíciója: gyorsan, és pozitívan reagálni. Tökéletes magyar fordítást nem találtam a szóra, a definíció azonban pontosan visszaadja amit csinál: a hátterében ellenőrzi milyen széles a felhasználó képernyője és ezek alapján újra alakítja-tördeli az eredeti weboldalt. Tehát mobilon a képek ugyan arányosan kisebbek lesznek, de a szöveg, a gombok nem kicsinyednek le, sőt lehet még nagyobbak lesznek mint PC-n nézve, a jobb olvashatóság érdekében. A hangsúly itt a koherens design összkép és a felhasználói élmény megtartásán van.

Emellett egy responsive oldal megkönnyíti a SEO-t is. Ahelyett, hogy több weboldal tartalmát kellene fejleszteni és frissíteni, a cégednek csak egy helyre kell koncentrálnia. Ugyanigy internetes marketing stratégiádban is egyszerűsíti a helyzetet, mert nem kell két oldal analytics grafikonjait nézni.

A responsive weboldal szintén jó alternatíva lehet ha egy webes szoftvert / appot tervezel. Ahhoz, hogy az Androidos és Apple felhasználókat is elérd, dupla fejlesztési költséggel kell számolni mivel appstoreba és play storeba is le kell fejleszteni az appot. Egy responsive weboldalon futó (html5 és css technológiát használó) szoftver viszont tökéletesen fut majd egy Androidos Samsungon vagy egy iOS-es iPaden is

Végezetül pár weboldal linkje amit responsive technológiával készítettünk. Érdemes vagy pc-n és mobilon is megnézni, vagy az asztali gépeden a böngésző ablakát jobb oldalról elkezdeni összehúzni, így látható hogyan alakul át az oldal egyre kisebb szélességű kijelzőn.

http://capacenter.hu/

http://ingatlan-addelmagad.hu/

http://fontanalimuzin.hu/

Ha szeretnéd hogy a Te weboldalad is responsive legyen, vedd fel velem a kapcsolatot ide kattintva.

Plakát!

Tegnap megnéztem az Iparművészeti Múzeum “Merészebb mint a festészet” – Magyar kereskedelmi plakát kiállítását. A vizuális élményt most nem ecsetelném, fantasztikus munkák, nézzétek meg Ti is…

Ami a plakátok mellett szintén megragadta a figyelmem, hogy az 1910-1940-es években léteztek a témával foglalkozó folyóíratok, amik nem csak a tervezőkhöz szóltak, hanem szem előtt tartották az köz-izlésnevelést, és a megrendelők felkészítését. A tervezés folyamata így a megrendelő és művész termékeny együttműködésévé válhatott.

Amikor ezt a kiállítást különböző cikkekben beharangozták, a szöveges körítés egyaránt az volt, hogy bezzeg a régi szép időkben nem voltak primitív, “Hülye azért nem vagyok” és hasonló reklámposzterek. A gyenge plakát-kreatívokra persze részben a szakma felhígulása is a magyarázat, de nem kizárólagosan. Véleményem szerint egy országban mindig olyan színvonalú reklámanyagok fognak születni, amennyire fejlett annak vizuális kultúrája – vagyis mire van kereslet.

Bízom benne, hogy az emberek vizualitásának fejlődésével újra egyre több szép plakátot fogunk látni az utcán. Hiszen kettőn áll a vásár, nem csak a grafikusoknak, a megrendelőknek is fejlődniük kell, folyamatosan.

 

1928-0125_Berény-760x1024

Inspiráció a világ 5 nagy luxusmárkájának logója mögött

A Maserati szigony

A Maserati testvérek Bologna egyik terén álló Neptun szoborból merítettek inspirációt új autómárkájuk logójának megalkotásakor. Az designt személyesen Mario Maserati tervezte.

maserati

A Louis Vuitton monogram minta

A mintát 1896-ban tervezte Louis fia, Georges Vuitton. Az inspirációt a japán stílusú virágos ismétlő-minták adták, a bonyolult mintázat célja pedig az volt hogy megnehezítse a hamisítók dolgát (hozzátenném, jóval a made in china megjelenése előtt!). Ez a minta volt az egyik legkorábbi divat-márkajelzés.

the-inspirations-behind-20-of-the-most-well-known-logos-in-high-fashion-08

 

A Ferrari ló

A fekete ágaskodó ló eredetileg Francesco Baracca gróf, I. Világháborús olasz pilóta vadászgépének oldalát díszítette. Ahogy Enzo Ferrari állítólag maga mesélte egyszer: “1923-ban találkoztam a háborús hős pilóta gróf édesanyjával Paulina grófnővel. Ő ajánlotta: ‘Ferrari, fesd a fekete lovat az autóidra! Hidd el, szerencsét fog hozni!” .
A fekete lovat aztán kiegészítették a kanári sárga háttérrel, amely Modena városának színe.

the-inspirations-behind-20-of-the-most-well-known-logos-in-high-fashion-09

A Versace Medúza (Gorgó) fej

A görög mitológiai lényt mint szimbólumot maga Gianni Versace választotta, mert végzetes és lenyűgöző vonzerőt sugall, amelyről nehéz levenni a szemet – akárcsak ruhái. Saját szavaival élve: “Aki egyszer szerelembe esik a medúzával, nem tud tőle szabadulni”

the-inspirations-behind-20-of-the-most-well-known-logos-in-high-fashion-01

 

Hermés lovashintó

A cég egy kis ló-hám gyártóként kezdte Párizsban, azzal a céllal, hogy luxus minőségű hámokat, kantárokat és egyéb hintó felszereléseket készítsenek európai nemesek számára. A logón ezért egy királyi hintó és ló szerepel, Dr. Rudolf Wolf által tervezett betűvel, 1929-ből.

hermes

forrás: highsnobiety.com

Mikor hanyagoltuk el a betűt és miért érdemes visszatalálnunk hozzá?

A múlt hétvégén Gödöllőn jártam, és a helyi múzeumban épp egy Szecesszió (19.sz vége, 20. eleje) korabeli tárgyakat és műveket lehetett megnézni. Voltak gyönyörű üvegfestések, grafikák, festmények, bútorok.

Mégis amik a legjobban elgondolkodtattak, és ezt a bejegyzést inspirálták, az apró dolgok voltak: névjegyek, receptek, rögtön jövök táblák. Az 1900-as évek eleji Magyarországon ezek a nyomtatott anyagok valami hihetetlen változatos, és szép betűtípus választékkal készültek, a Szecesszió majd Art Deco stílusában. Pedig abban az időben a szép tipográfia jóval több energia és anyagi ráfordítást igényelt: nem volt otthon mindenkinek nyomtatója, és nem állt rendelkezésre legalább 30 betűtípus (az internetről meg ingyen letölthető további 4000+ 🙂 Mégis igyekezett minden fogorvos, fodrász, vasöntöde, egyedi, szép feliratokkal feltüntetni minden információt magáról.

Itt van például egy gyönyörű Segédlevél kicsit későbbről, 1940-ből.

Segédlevél 1940

Egyetem vagy főiskola alatt manapság elmész gyakornoknak, kapsz egy fehér A4-es lapra kinyomott szerződést, és kész. Persze mondhatnánk, hogy ez egy banális dolog, minek ennyire kidíszíteni. Gondolj viszont bele, mekkora pozitív pszichológiai hatása van egy ilyen igényes nyomtatott levélnek a segédre! Valószínűleg megtiszteltetésnek érezte hogy ott dolgozhat, és már egy jobb munkamorállal indított, érezte, hogy megbecsülik!

Ugyanígy a vevőid-partnereid is ezt fogják érezni, hogy megbecsülöd, megtiszteled őket amikor átnyújtasz egy igényes névjegykártyát, katalógust, vagy csak veszed a fáradtságot és nyomtatsz egy szép nyitva tartás táblát, ahelyett, hogy filctollal firkantod ki egy kartonra “Rögtön Jövök”:) Remélem ezzel a rövid gondolatmenettel sikerült minél többeteket ösztönöznöm, és egyre több szép táblát, feliratot láthatunk majd!

U.i: ha úgy érzed betűkészleted bővítésre szorul, az alábbi oldalakon rengeteg ingyenes betűtípust találsz. Csak másold be a letöltött font filet a windows/fonts mappába és aktiválódik.
http://www.fontsquirrel.com/
http://www.dafont.com/
http://www.1001freefonts.com/

Milyen gyakran kell újra designolni egy weboldalt?

CWH

Ha tudatos marketinget folytatsz vállalkozásodnak, bizonyára felmerül benned a kérdés időről időre: rendben van a weboldalam? Mikor kell felújítani, újraterveztetni? Erre általános bölcsesség nincs, nem lehet azt mondani hogy 2, 3 vagy 5 évenként. Pár egyszerű szempont alapján azonban már felmérheted a helyzetet, ezeket szeretném megosztani most:

1. Elmaradoznak a látogatók, érdeklődök.
Fontos, hogy kövesd oldalad nézettségét a google analytics-en, és ha azt veszed észre egyre kevesebben látogatják, az máris egy intő jel.

2. Flash
Ha oldaladon Flash alapú animáció van, netán az egész oldal, vagy a menü Flash-es, van egy rossz hírem: senki nem fogja látni az oldalad akinek iPhone-ja vagy iPad-je van. Ugye nem akarod pont ezt az egyébként jó vásárlópotenciállal bíró célcsoportot kizárni?

3. Elavult design
Ahogy az öltözködésben, a weboldalak kinézetében is megvan a divat – formák, technikai megoldások, stb. Például, a 2000es évek elején még divat volt kitenni egy naptárat, névnapjelzőt az oldalra. Ha én mondjuk szakkönyveket szeretnék rendelni a webshopodból, nem fog túlzottan érdekelni Gerzson vagy Máté napja van-e. Fontos hogy a design ne tartalmazzon felesleges elemeket, amik elterelik a néző törékeny figyelmét a lényegről / ajánlatodról.

4. Konkurencia figyelés
Nézd meg a konkurens cégek oldalát. Könnyebb navigálni, átláthatóbb? Esztétikusabb? Összecseng a design a cég arculatával és márkájának mondanivalójával? Vannak kint különleges ajánlatok?

5. A mobil a barátod
Nagyon fontos hogy weboldalad mobil eszközökön is jól navigálható, átlátható legyen. Az internet forgalom egyre nagyobb része zajlik ilyen ezen platformokon. Jó eséllyel egy mobil kijelzőjén fognak először találkozni a márkáddal, márpedig ha ott nem olvasható jól az oldalad, biztosan elveszted a leendő ügyfél figyelmét – nem fog hazamenni és otthon is megnézni az oldalad PC-n.

6. Kérj egy weboldal elemzést!
A legbiztosabb ha egy szakértő segítségét kéred. Ha nem vagy biztos valamelyik pontban, szívesen segítek, és készítek neked egy ingyenes weboldal elemezést! A linkre kattintva küldd el nekem weboldalad címét és 3 napon belül megkapod ingyenes elemzésed, tanácsokkal min változtass.