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.