eDM

Az eDM ha tartalmában nem is, technikailag sokban más mint a nyomtatot, postázott társa. Tekintsetek rá úgy mint egy pici weboldalra, amit az e-mail kliens jelenít meg.

• Elektronikus felhasználásra készül, ezért ne CMYK-ban, ne inDesignban tervezzétek, hanem Photoshopban, RGB-ben, és legyen bekapcsolva a View/Proof setup/Monitor RGB, illetve bekapcsolva a Proof Colors opció.
• Csak a weben használatos betűkkel dolgozzatok mert minden más betüblokkot képpé kell alakítani. A képekkel az a baj hogy a levelezők gyakran csak akkor töltik be a képeket ha ezt a felhasználó külön engedélyezi, azaz ha egy eDM-et csak képpekel oldasz meg, jó esély van rá, hogy a címzett egy üres e-mailt fog látni, amit rögtön kukázik.
  
• A betűk csak egész pixelszámúak lehetnek, azaz 10, 11, 16 stb, törtpixelek nincsenek.

• Figyelj a levél méretére. A levelező ablaka jóval kissebb mint egy böngészőé. Ebbe kell beleférnie a kulcsképnek és a headline-nak, ezért a levél ne legyen szélesebb mint 700 pixel és tartsd észben, hogy ami 450 pixel alá esik, ahoz görgetni kell majd.
• Ahogy a weboldalakon, az eDM-en is lehetnek linkek. Ez nagy előny a nyomtatott verzióval szemben, de ha elmulasztod jelölni a linkeket, akkor a címzet elmulasztja használni őket.
• Kötelező szövegek . Az eDM könnyen bosszantó műfaj tud lenni. Meg kell adni a lehetőséget a címzettnek a hirlevélről / eDM listáról való leiratkozásra. Emellett az eDM elején is szokott lenni egy rövid szöveg linkkel, arra az esetre hogy ha a levelező nem tudná megjeleníteni a levelet.
• Mivel a levelező ablak mérete változhat, ezért necsak az oldalt tervezzétek meg, azt is ki kell találni mit lát mellette a címzett, ha szélesebbre húzza az ablakot. Szín? Minta? Középre van zárva az oldal, vagy balra?
• Ne tervezzetek semmi spéci technológiát (flash/rollover) mert a levelezők ezeket nem támogatják.
  

Berajzoltam egy eDM-re, az Apple hogyan készítette el a layoutot. Minden kép link a témába vágó weboldalhoz, és a szövegen belül is sok linket használnak. A szürke boxok az alján nem képek, hanem html elemek.

Érdemes megfigyelni azt is, hogy maga a levél lekerekített, egy szürke háttéren fekszik, ha nagyobbra húzom az ablakot, a szürke háttér tölti ki a helyet. Végül pár példa a postaládámból: EasyJet, Luxology, Starking, ToonBoom. Csináltam egy ilyen tag-et, mutatok jókat ha látok, meg persze küldjetek is.

⌘N

Azt hogy mekkorára tervezhetsz egy weboldalt, az szabja meg mekkora monitoron nézi a célközönséged. Félrevezető ha a saját monitorodra tervezel, mert ami kényelmesen elfér a te nagyfelbontású monitorodon, jobbra-ballra, fel-le szkrollozásra kényszerít másokat.

Az idő multával ahogy a képernyők fejlődtek, úgy nőtt a felbontásuk is. A kezdeti VGA (640x480) szabványt váltotta az SVGA (800x600), és most a leggyakoribb az XGA (1024x768). A legtöbb weboldalt ma ilyen felbontásra optimalizálják. Többnyire kevesebb mint 1000 pixel szélesek, és a leglényegesebb tartalmak beleférnek 590 pixel magasságba, hogy görgetés nélkül is látszanak. Hová lett az 1024x768 többi része? Elfoglalja a Browser kerete, a menü, a tabok, az URL mező. Ez persze Browser függő, a Safari helytakarékosabb mint az Internet Explorer.

Az utóbbi évek az okostelefonoknak és az ultrakompakt netbookoknak köszönhetően viszont „visszalépést” hoztak a felbontás tekintetében.
Érdemes utánnanézni hogy fest az oldal egy eee PC WSVGA (1024x600) képernyőjén, sőt lehet optimalizálni iPhone-ra is (480x320), ahogy a Google vagy a iwiw is teszi.

Időrendi portfolió

Ezen a referencia oldalon időrendi sorrendben rendezte el a munkáit az szuperminimalista alkotó. A munkáknak csak az a része látszik, amire a kurzort mozhatod. Az is okos, hogy ha a menü keresőjéből kiválasztasz egy témát, az abba tartozó holnik láthatóvá válnak.

Érdemes körülnézni: ez a lemezborító gyártási koncept, a dalokról készült „ujjlenyomatkokkal” dekorálja a bookletet.

Egyébként meg kell egyáltalán portfólió ilyen referenciákkal?

Érdemes megfigyelni, hogy a popupok ellenére minden popup-nak más az url-je, ezért jól linkelhető bármi az oldalon.

Ikeáéknak elmentek hazurról

Teljesen zizi, zenével kontrolálható weboldaluk itt. Jó nagy sávszélesség kell hozzá a sok video miatt. Legjobb szám: A Place of our Own. Na megyek is, veszek kanapét :)

Tévét a nyájnak

Nehéz jó vírusfilmet csinálni, valahogy nagyon másképp kell hozzáállni. A Samsung nem félt kispórolni a LED LCD tévéket ebből a filmből, lemerem fogadni, működik is.

Ajax navigáció

A MacHeist oldala sajnos elég csiricsáré, de nagyon jó demonstrálja hogy Ajaxal milyen egyszerű, de látványos navigációt lehet tervezni.

A oldal felső részben invitáló nagy ikonok jelölik a cikkeket, végülis ez egy színes szagos menü. Az alsó felében a cikkek vannak egyetlen hosszú csíkra felszerelve, ami a választásunktól függően szalad jobbra-ballra.

Ajax animációk:

• Az ikonok rolloverre megnőnek, hasonlóan a Mac OS X dockjához.
  
• A tartalmi rész jobbra-balra csúszik. Az adott tartalomnak megfelelően az url is változik, tehát az egyes tartalmak linkelhetőek.
  
• A tartalmi részen a kisképkre kattintva az előtérbe fölugrik a teljes verzió. Ebben képek, de akár videók is lehetnek.
  

Az oldal felett van egy fix layer is. A készítők erre olyan elemeket helyeztek el, amik böngésző scrollbarjától függetlenül mindig ugyanott maradnak, alattuk görög az oldal fel és le.

1. A navigációra alternatívát kínálnak az oldal szélein elhelyezett fülek, a szomszédos oldal ikonjával.
2. Ugyanígy viselkedik a fej és lábléc is.
   
3. Van egy kis buborék is az oldal közepén, ennek nem sok funkciója van, a promóval kapcsolatos infó jelenik meg benne.
   
4. Jobb felső sarokban Digg számláló. Erről később írok.
   

Ezzel a lehetőséggel nem igazán számolunk, pedig bizonyos dolgokat nagyon praktikus ha kéznél tartunk.

Online TCR

Adakozni egy szimpla átutalással is jó érzés, hátmég így. Nagyon szellemes ahogy a gyerekek sorbaállnak hozzád, és technikailag sem őrületes kihívás. Mi is hasonlóan csináltuk a saját weboldalunkat.

Ha kidobnak az ajtón…

Mássz vissza az ablakon. Sok híroldal kelletlen adoptálta az RSS-t, mert ugye így anélkül beleolvashatsz a cikkekbe hogy látnád a sok bannert az oldalon. Na erre a HWSW tech portál az RSS feedjébe egy fizetett cikket rakott be, mégpedig jövőbeli keltezéssel. Mivel az RSS olvasó időrendi sorrendben listázza a cikkeket, ez a hirdetés napokon keresztül az első dolog amit olvasok. Ez nem is változik egészen Március 30-ig, amikor a többi cikk „utoléri” a hirdetést.

Falrahányt borsó

Ezen a drogellenes websiteon üzeneteket hagyhatsz a gyermekednek, pont mitha egy üzenetrögzítőre beszélnél. A hang rezgési mintájából készült karkötőt postázzák neki.

Infó grafika

Nem forradalmi, de ettől még szórakoztató adaptációja a régi mesének.

Rockband

A népszerű Rockband konzol-játék egyszerűsített verziója mint karácsonyi üdvözlő.

Vízszintes navigáció

A legtöbb weboldalt úgy olvassunk mint egy hosszú faxot, felülről lefelé, ameddig az oldal tart. Pedig a könyvhöz jobban hasonlít a leporelló-szerű vizszintes olvasás is. Ilyen navigációra kínál jó példát a Sursly. Az oldalon lévő jobbra nyilak a következő oldalra repítenek, de szellemes, hogy a szövegben lévő linkek gyakran átrepítenek egy távolabbi oldalra, úgy hogy a szomszédos felett átsuhanunk.

A Dunbar kör, és azon túl

Sarolta érdekes cikket talált: az Economist tanulmánya a social networking oldalakkal foglalkozik, mint amilyen az iwiw vagy a Facebook. Érdekes olvasmány egészében, álljon itt csak annyi, hogy nem feltétlenül kapcsolattartásra használjuk ezeket az oldalakat.

Krétapor

Egyszerű, de ötletes animáció, szép rajzok. Hangulatos kávé-ismertető a Starbucks oldalán. Nagyon jó hangefektek a tábla-rajzhoz, és az is vicces hogy a letörölt képek nem tűnnek el egészen.

Betöltés

Sokat kell várni amíg betölt egy Flash-oldal? Szórakoztató loader kell hozzá! Szenzációs példák itt.

5 oldal Reváról

Ennek a francia villanyautónak mindőssze öt oldalas weblapot készítettek, és a minimális infó mellett, akár mind az öt oldalon átszínezheted az autót. Szuper art, és hang design.

Mi képes erre?

A Tea. Ez a brandsite annyiban érdekes, hogy a nagyon egyszerű üzenetüket sulykolja türelmesen. Alig több mint egy reklámfilm. Ide biztos senki nem tér vissza, de egyszer oké.

Felülnézetből

Könnyen lehet arra építeni layoutot, hogy felülről ábrázoljuk a szöveg környezetét egy képzeletbeli íróasztalon. Ez működik printben (pl Erste diákszámla 2008), de működik online is.

A Nuevo kifőzdének az étlapja egy terített asztal. Végtelen egyszerű, mégis összefut a nyál a számban. Sajnos nagyon rossz az aránya a hangulati elemeknek és hasznos tartalomnak. Egy átlagos monitoron semmi nem látszik az illusztráción kívül, ami ráadásul sosem változik, előbb-utóbb unalmassá válik.

Az RX Monsters úgy szép, hogy nincs ilyen problémája. Egyszerű oldaltérképén ballról jobbra átlapozhatunk.

A Simple Art pár lépést hátrébb lépett, vagy ha úgy tetszik feljebb. Itt sincs szuperül kihasználva a képernyő.

A No Copycat oldalon vicces hogy interaktív a macska éppen csak belógó lába. Pont min egy igazi :)

Nézegessetek még íróasztalokat felülről itt.

Demonstráció

Nem csinál semmit, csak nagyon szép.
Ahogy mozgatod az egered, fordul a tér.
Sörös weboldalnak szinte kész :)

Átlagosnak tűnik…

De nem az. Amikor már azt hinnéd egy egyszerű portfolió oldalon vagy, bumm, jön a meglepetés. A forráskódbol az is kiderül, ez nem Flash!

Cseles Ajax menü-animáció a Parfois.com oldalon.

Orosz mese

A Melnitsa animációs stúdió filmjének projektoldala nagyon keveset csinál, de azt nagyon jól. Tényleg csak az unásig ismert wallpaper letöltés, előzetes, stb. van rajta, de az egy nagyon szépen megrajzolt, itgalmas animációkkal összekötött módon.
Még a hímzett gyorsmenüt is nagyon szépen oldották meg az oldal alján. Érdemes ellátogatni az erdőbe is, ott van a filmelőzetes.

Adidas website

Fullscreen, fullvideo. Igazán élmény barangolni rajta.
Kinehagyd az ÜBERCOOL extended house party videót.
Némi animáció és előzetes után az az eső dolog ami kattintható a kék Adidas logó mellett.

Anti website

Kíváncsi vagyok mekkora volt ennek az oldalnak a büdzséje

Interaktív YouTube

A YouTube több is lehet mint internet-TV.
A That's not Cool oldalon interaktív sztorikat lehet végigjátszani.

Egyébként a site is érdekes, látszólag laza, de iszonyú nehéz összehozni és kézben tartani egy ilyet.

BTW, Réka, szerintem ilyesmi oldalt várnak tőlünk a tudodkik :)

Cowshed

Nagyon helyes ügynökségi weboldal itt

• Szellemes loader
  
• Nagyon jól megoldott perspektíva (a táj layerei különböző sebességgel mozognak)
  
• Kicsit inkonzisztens back linkek
  
• Vicces hűtőszekrény link
  
• Nagyon jól működő QuickNav az oldal alján
  
• Valahogy nehezen derül ki mit csinálnak

RSS feed

Az RSS vagy teljes nevén Really Simple Syndication egy hasznos ezköz ahoz, hogy szemmel tarthasd a kedvenc weboldalaidat. Rendszerint híroldalak, blogok alkalmazzák, ahol gyakran jelenik meg új tartalom. Konkrét példával:

Az index.hu-hoz rendelt RSS tájékoztatja a feliratkozott index-olvasókat, ha új tartalom kerül fel az híroldalra.

Ha sok oldalt látogatsz, nem kell egymás után betölteni az indexet, homárt, addictot stb. hogy képben legyél hol van új cikk, elég ha mindre feliratkozol, és csak akkor mész oda, ha az RSS értesít egy új cikkről.

Az RSS nem csak jelzi hol van olvasnivaló: megjeleníti a cikk címét, és többé-kevésbé a tartalmát is. A Safari böngészőben így fest az index.hu RSS-e.

Oké. Hogy tudsz feliratkozni egyre?

Safari böngésző mellett pofonegyszerű:
1. Az URL mező jobb szélén kék RSS logó jelenik meg, ha elérhető RSS tartalom.

2. Rákattintva meglekenik az RSS feed, ezt kell bookmarkolni.
Legegyszerűbb ha behúzod a Bookmarkbar sávjába.

Internet Explorer 7. (vagy jobb) böngészővel sem lehet sokkal bonyolultabb:
1. Keresd meg az adott oldalon az RSS logóját. Vagy a fej, vagy a láblécben szokott lenni és így néz ki:

Vagy a Weboszaurusz esetében a láblécben így:

2. Kattints rá, és kövesd a böngésző utasításait

Ha már elég sok RSS feedre vagy feliratkozva, érdemes lehet használni az iGoogle szolgáltatást, amiről itt ír Laci.

Dvein

Izgalmas Flash navigációt próbálhattok ki a dvein.com-on. A betöltés is érdekes, a várakozás alatt megtanít hogyan használjuk a tárcsát.

Adforum film letöltés 7 lépésben

A Safari böngészőnek nagy előnye, hogy szinte mindent le lehet vele szedni a netről, még azt is, amit nem annyira akarnak leszedhetővé tenni.

Az AdForum Top5 oldalt nyilván ismeritek, leírom hogy lehet viszonylag egyszerűen kinyerni a tartalmát.

A művelethez szükséges, hogy a Safari mellett Quicktime PRO is legyen a gépeden.

1. Nyisd meg az oldalt:

2. Vedd elő az Activity ablakot

A Safari menüsorában találod, a Window menüpont alatt.

3. Nyisd meg az iFrame-et

Az AdForum egy iFrame layeren futtatja a mozit, ezt a layert tudod külön ablakban megnyitni, ha a a megkeresed az ad_iframe.asp sort és kettőt kattintasz rá.
Cserébe megjelenik az iFrame tartalma:

4. Vedd elő az Source Code ablakot

A View menüpont alatt találod.

5. Keresd ki a Mozi URL-jét

http:-al kezdődik és MPG-vel végződik. Kopizd le.

6. Nyiss egy új böngészőablakot

És másold be az URL-t. A Quicktime mozi jobb alsó sarkában ki tudod választani az elmentést.

A Blogozás rejtelmei

Blogot írni nem egyszerű dolog. Fenntartani végképp nem. Az ember elhatározza hogy blogot ír, megszületik 2-3 bejegyzés, a lelkesedés a kezdeti időben töretlen. Aztán rájön lassan, hogy kezd kifutni témákból, generálni kell folyamatosan újakat ahhoz, hogy az érdeklődés fennmaradjon. Mint tapasztalt blogozó és a híres neves foodpolice szerzője én is gazdagítani fogom a tartalmat saját kis színeseimmel az internet világából.


Ime egy első ötlet egy bizonyos téma fanatikusainak. Nomármost ugye mindenki tudja hogy szeretek kajákat nézegetni és kaja-blogokat olvasgatni. De van odakünn kb 600 ezer blog ami érdekel engem és ezeket nap mint nap végigkattingatni rettentő fárasztó, még akkor is, ha a favourites közt szerepel. Épp ezért használom az igoogle bejelentkezést, hogy összegyújtse nekem az RSS feed-ek segítségével az összes olyan site-ot ami érdekelhet engem. Jelenleg 18 site-ot követek folyamatosan és mindig látom ha új bejegyzés van. Időhatékony és praktikus.

Szoba-navigáció

Ritkán sikerül megoldani, hogy beszippantson egy „Flash szoba”, de jó példavál szolgál a Patagonia.

• Gyors loadingpage;
  
• Izgalmas váltás az egyes nézőpontok közt, ami jól elkendőzi a fordulással járó kivitelezési nehézségeket;
  
• lendületes link-animációk az egyes oldalakon;
  
• Ötletes, kommentárral ellátott slide-show-k;
  
• Következetes loading-kukacok;
• Szépen megoldott oldaltérkép a „view all stories” alatt.

Sajnos nem sikerült ilyen jól a Futurama weboldala, habár kétségkívül itt is megoldottak mindent.

• Nehézkesek a nézetek közti váltások;
  
• Nem nyilvánvalóak a linkek;
  
• Túl statikus az egész.

Ajax the Great

Nem minden Flash ami mozog.

Az Ajax egy olyan webfejlesztő ezköz, amivel interaktív oldalakat, programokat lehet készíteni.

Nagy előnye, hogy

• A Flash-el szemben nem szükséges hozzá böngésző plug-in, azaz még a legszigorúbb IT policy mellett is működik, és nem igényel nagyteljesítményű számítógépet sem,
• minden kütyün működik ami amúgy támogatja a JavaScriptet,
  
• Az első töltésre betölti az összes tartalmat, nincs szükség újabb szerver-kapcsolatra.

Remek példa az Ajax alkalmazására a

Howarts.nl

Érdemes kipróbálni a jobb oldalról kicsúsztatható oldalakat.

10 Tipográfiai tipp (nem csak) webdizájnhoz

1. Olvasd át a szöveget.Nem elég a Copy/Paste. A szöveg átolvasása során fogalmad lesz arról hogyan integrálható az a website szerkezetébe (vagy bármilyen layout szerkezetébe)
Kerüld el, hogy a szöveg és a dizájn külön életet éljen.

2. Cseréld ki a vakszöveget…
amint lehet. A Lorem ipsum egyszerűen nem működik olyan jól mint egy valódi szöveg.

3. Építs egyértelmű hierarhiát.
Az segíteni fog abban a látogatónak honnan kezdjen olvasni.

4. Ügyelj mind a Makro, mind a Mikro-tipográfiára.
Már ha tudod mifán teremnek :)

5. Színes betüknél ügyelj a kontrasztra.
A kis kontrasztok más beállítású monitorokon egészen egybeolvadhatnak.

6. Polírozd fényesre a CSS-t.
A CSS a weboldalak SyleSheet-je. Ha jól kitalálod nem esel olyan hibába, hogy minden oldalon picit más a tipód. Plusz változtatni is drámaibban egyszerűbb.

7. Éljen a ballrazárt szövegblokk.
Az összes többit sokkal nehezebb olvasni, vagy ügyetlenül megoldott.

8. Ügyelj a speciális karakterekre.
Nem mindet szeretik a böngészők.

9. Tartsd észben, hogy megnőhet a szöveged…
Ha úgy van beállítva valaki böngészője.

10. Válaszd meg jól a kenyérszöveg betűtipusát.
A képernyőn jobban olvashatóak a talpatlan betűk, a verdánát egyenesen arra tervezték.

A Webdesingner Depot nyomán

Weboszaurusz

Nem álltathatjuk tovább magunkat azzal, hogy egy ATL kreatívnak nem kell érteni a webhez. Se idő, se pénz nem áll rendelkezésre a kampányok során ahoz, hogy online szakembereket, cégeket vonjunk be a tervezésbe.

A jövő az univerzális szakembereké: míg a könnyen alkalmazkodó, apró online ügynökségek egyre nagyobb szeletet hasítanak a klasszikus médiából, addig mi, hidegvérű behemót ügynökségek szép lassan madarakká válunk.

Tanuljunk a dinók hibájából.
Ideje felzárkózni.