A(z) 'webdev' témához tartozó bejegyzések

Honlap ami szórólap ami honlap

2014.08.03. | kategória: design webdev zen

Mondjuk úgy (erős túlzással), hogy elkészült az új Wynerdy website. Igen, jól látjátok: 1, azaz egy darab JPEG kép alkotja ezt a csodát, és nem viccelek. Az elmúlt 5 évben sokat foglalkoztam azzal, hogy a szövegek szépen jelenjenek meg a különböző böngészők, és operációs rendszerek alatt, gyakorlatilag eredménytelenül. A Google webfonts rengeteg betűtípust hoz, de csak kevés, igazán szép betűcsalád van, amelyik a magyar ékezeteket támogatja (plusz, Windows böngészőn ratyin néz ki az is). Aztán ott a cufón, ami scripttel generál képeket a karakterekből, belassítva ezzel az oldal rendert, és több galibát is okoz, ezért vetettem el. Legvégül (mert a blogon is ez vált be eddig) a webfont beágyazás, ami valamelyest működik, de csak addig, amíg nem nézem meg a blogot egy Windows PC-n. Elmegy a kedvem az egésztől. Trükközés a font-shadow-val, rotation 0.1%-al, hogy az anti-aliasingről ne is beszéljek. NEM SZÉP, és nem is tökéletes megoldás egyik sem, úgyhogy ennyi.

Az ötlet onnan jött, hogy egyes Behance portfóliókban tonnaszám találni 5-8 képernyő magas képeket, komplett szövegtörzsekkel, magyarázatokkal. Ezek elég igényesek, és a célnak maximálisan megfelelnek. Miért ne lehetne a komplett website egy kép, nem? DE!

Amit láttok, az egy 1920×1920-as JPEG, 8-as tömörítéssel. Így nagyjából 300 kB, nálam ez volt a lélektani határ. A képet 960×960-as méretben jeleníti meg az oldal, így kicsit ránagyítva is élvezhető, illetve (nyílván már kitaláltátok) retina kijelzőkön is élesen látni.

A SEO-val sokat nem foglalkoztam, a kép címe és az alt tagek vannak kitöltve, illetve a website header, aztán kész. Ahol kell, ott úgyis el van helyezve a link, a találati lista első helyére nem hajtottam soha, munkám meg van elég. Ez egy landing page, ha pedig így nézzük, annak teljesen jó. Plusz, most készülnek a szórólapok is, ugyanezzel a layouttal, szóval kettőt egy csapásra…

 
bormarketing

 

Ha valaki lekódolja nekem ezt tökéletes, tűéles cross-browser és cross-OS fontokkal, azt megnézem.

 

Bloghegesztés 2. rész – Layout

2013.11.09. | kategória: blog webdev

A cikk első részében a WordPress-től eltávolodásról, és a visszatérésről írtam, ezúttal a felfrissített layoutról írok pár gondolatot.

Az előző layout kvázi ugyanígy nézett ki, annyi különbséggel, hogy a szélességeket anno az eredeti témában beállított értékeken hagytam, és a lábléc kihasználatlan volt. Most viszont egy kicsit továbbgondoltam a kérdést. Első körben még a reszponzív oldal is felmerült bennem, de rájöttem, hogy baromira nincs rá szükségem. Egyrészt kevés vagyok hozzá kódolás oldalról, másrészt az új méret reszponzivitás nélkül is teljes élményt nyújt iPaden, fekvő módban (álló módban ki a rák használja egyátalán a tabletjét?).

A blog tehát egy 960 px széles bodyban terül el: 700-as kontent, 30 px szünet, 200-as oldalsáv, kétoldalt pedig 15 px margó. Ez a méret pont jó az 1024×768-as felbontásra, ami a 2013-as felmérések szerint még mindig az egyik legnépszerűbb. Az iPad mini is ezzel operál, és valójában a retina iPad is erre van optimalizálva, csak dupla pixelsűrűséggel.

Aki okostelefonon nézi az oldalt, annak sincs túl nagy gondja az olvasással. iPhoneon például 1.) a sidebar mérete csökken, míg a kontent egész jól olvasható marad, 2.) jól célzott dupla pattintással gyönyörűen ki lehet nagyítani teljes kijelző szélességre a kontentet, vagy az oldalsávot. Na, emiatt nem kínlódok még 5 napig a reszponzív kódhegesztéssel. Lassabb is tőle az oldal, dizájn szempontjából nem látom sok értelmét, plusz én is csak őszülök. Jó, ha az olvasóim 1%-a nézi telefonról az oldalt, aki pedig ennél nagyobb eszközt használ, nem lesz problémája a tartalom böngészésével.

Olvashatósági szempontból a jobb oldalsávos elrendezést találom megfelelőnek. Az emberi szem genetikai okokból F alakban pásztázza a kijelzőt, így az oldal megnyitásakor a bal oldalán fut végig először, majd nézi a jobb oldala felé az bekezdéseket. Ezért fontos, hogy minden lényeges infó az oldal, illetve az első két bekezdés bal szélén helyezkedjen el.

Határozottan meg akartam tartani a distraction-free dizájnt, ezért továbrra sem erőltettem a fejlécet, és a háttérképet. Nagy fejléckép használata esetén minden alkalommal lejjebb kell görgetni az oldalt, ha két bekezdésnél hosszabbak a bejegyzések, így viszont kényelmesen el lehet olvasni 3-4 bekezdésnyi szöveget, görgetés nélkül. Persze, jól néz ki, ha valami hiperfantasztikus fejléce van az embernek, én viszont akkor sem gondolnék többre magamnak egy flat, egyszínű fejlécnél, ha ütnének.

A distraction-free dizájnhoz hozzá tartozik, hogy a kevésbé fontos, mégis említésre méltó infók a láblécbe kerültek, az oldalsávra csak linkek, a keresés, a kategóriák, és a hónapok szerinti archívum került. Az archívumot és a kategóriákat tervezem áttenni egy dedikált oldalra, mert pár hónap múlva már elég hosszú lista kerekedik az oldalsávon, így kezd zavaróvá válni. Egyelőre marad, pár hónap, és bejegyzés múlva több értelmét látom, mint most.

Kommentálni nem lehet, mert nincs sok kedvem néhány értelmes hozzászóló mellett köcsög trollokkal küzdeni, így a layout felépítésénél ilyesmire nem is kellett gondolnom. Nem úgy, mint a színekre, és a tipográfiára, amiről a sorozat következő részében fogok írni.

Bloghegesztés 1. rész – Markdown zsákutca

2013.10.30. | kategória: blog webdev

Kb. két hónappal ezelőtt megint rájöttem, hogy azért nem szeretek blogolni, mert egyrészt nem tetszik a saját blogom, másrészt utálom a WordPresst. Elkezdtem hát kutatni új lehetőségek után, és baromi hamar felfedeztem a Markdown alapú blogolást, mint lehetséges alternatívát. Néhány álmatlan éjszaka után rá is találtam a dizájnban és működésben is szimpatikus dropplets-re. Marha jól néz ki. Azonnal tudtam, hogy ez kell nekem, de rögtön a telepítés után sorra jöttek elő a problémák. Nem lehet a twitter profilképet becsatolni, nem jelennek meg a 3rd party témák a menüben, össze-vissza rendezi a posztokat, ékezetek helyett hülye karaktereket jelenít meg az RSS csatornában, ésatöbbi, ésatöbbi.

GitHub-on nagyon szerettek, mert mindjárt az első két nap alatt 4-5 témát indítottam. Minden kérdésem betalált, mert eddig nem feszegetett problémákat is sikerült feltárnom. A fejlesztő srác is felvette velem a kapcsolatot emailen, mert pár kérdésemre másnap este én magam adtam választ. Addig bogarásztam, amíg rájöttem, mi lett elkúrva. Sikerült olyan javaslatokat is tennem, amik alapján átalakítják a motor egyes funkcióit, és a következő verzió talán már aszerint jön ki. Összességében élveztem azt a pár hetet, amíg ezzel foglalkoztam.

A lényeg viszont annyi, hogy mivel a dropplets felület nem alkalmas a Markdown fájlok szerkesztésére, csak a feltöltésére, iPaden meg lettem lőve. Akkor utaztam épp Brüsszelbe a Label Expo-ra, ahol szerettem volna esténként összefoglalni néhány rövid posztban az érdekességeket. Csakhogy nem volt iPadre megfelelő app, amivel nem csak megírni, de feltölteni is lehetne a Markdown fájlokat. Olyan szépséghibája is volt a dolognak, hogy csak hátulról, FTP-n keresztül, közvetlenül a dropplets könyvtárába lehetett feltölteni az md fájlokat, mivel böngészőből csak a fotók érhetők el feltöltésre. Egyetlen kipróbálható appot találtam erre, egy FTP managert, ami képes volt szöveges fájlokat md kiterjesztéssel is elmenteni, de amikor kiértem, kiderült, hogy Belgiumból az itthoni szerveremre nem enged fel… Na bumm.

Ennyit a kiállítás “közvetítéséről”, a Markdownról, és a droppletsről. Hazajöttem, legyaktam a szerverről, és visszaállítottam a WordPress motort témástól, mindenestől.

Ekkor döntöttem el, hogy áthegesztem a blog megjelenését az ízlésemnek megfelelően.

Folyt. köv.

Webes eszköztáram

2013.01.17. | kategória: webdev

Amióta kóstolgatom a website építés hogyan-miértjét, elég sok szoftvert, segédprogramot, plugint próbálgattam. Amik mára maradtak, egy az egyben a legalapvetőbbek ezen a piacon.

HTML és CSS szerkesztésre, illetve a wordpress sablonok testreszabására egyaránt a TextWranglert használom. Semmi sallang, semmi fölösleg, a célnak viszont tökéletesen megfelel. A színkódok miatt nehéz vele téveszteni. Ha elfelejtek lezárni egy sort, teljesen más színe lesz a szövegnek, mint amikor helyesen meg van írva a parancs, vagy ha CSS-ben pl. rossz, vagy nem létező kapcsolót próbálok beállítani, addig nem lesz kék színű, amíg le nem írom helyesen. Vannak letölthető kiegészítők, amivel lehet csicsázni, de ezekre egyrészt időm nem volt még kipróbálni, másrészt nem is hiányzik semmi több, mint amit a program alapból nyújtani tud.

A másik amit kénytelen az ember használni, az Illustrator és a Photoshop. Nem használom őket layoutok összeállítására, mivel az egész websiteot először ceruzával papírra rajzolom, majd CSS-ből próbálom felépíteni. Maradnak a logók, és egyéb, CSS-el nem megoldható dizájnelemek, amik szerkesztésére muszáj ezeket a szoftvereket használni. Érdekes, hogy én pl. Photoshopban szerkesztett layoutokat szerintem ha ütnének sem tudnék felépíteni CSS-el. Egyelőre jobb szeretem on the fly felépíteni az oldalakat. Aztán ki tudja, ez is változhat még.

Van egy marha jó segédprogram, amit a böngésző kiegészítőnek lehet letölteni. Szerintem mindenkinek ki kell próbálnia a Firebug-ot. A böngészőben megnyitott oldalt lehet real-time módosítani. Ettől az eszköztől kvázi egy wysiwyg szerkesztővé válik úgy a Chrome, mint a Firefox. (Safarira még nem vadásztam ilyen kiegészítőt, de Chrome-ra és Firefox-ra egyaránt elérhető – gondolom Safarira is…) Ezt imádom, annál is inkább, mert egy érdekes websiteon azonnal vissza tudom nézni, ki hogyan oldott meg egy dizájnelemet CSS-ben, illetve módosítani is tudok vadidegen oldalak kinézetén, ami meg baromi érdekes, és jó játék tud lenni, ha épp unatkozok.

Nagyjából ennyi az eszköztár, legtöbbet természetesen a TextWrangler van nyitva, de ha már béta verziós az oldal, felkerül egy eldugott könyvtárba a tárhelyre, onnantól a Firebugnak is nagy a szerepe.

A változás szele – tanulom a CSS-t

2013.01.17. | kategória: webdev

Az elmúlt néhány hónapban visszaestek a nyomdai előkészítési megbízások, ellenben úgy szaporodtak meg az arculattervezésekhez kapcsolódóan a website megrendelések. Az elmúlt fél évben annyi weboldalt készítettem, amennyit az előző 4 évben összesen. Ami igazi változás az előző időszakhoz képest, hogy egyre inkább saját fejlesztésű weboldalakat adok ki a kezeim közül.

Kezdetben a legegyszerűbb megoldással, prémium témák vásárlásával és átalakításával oldottam meg ezeket a feladatokat. Aztán egyre többet foglalkoztam a témával, rengeteget gyakoroltam saját oldalaimon, és egyre inkább megtanultam úgy a wordpress, mint a hagyományos HTML alapú szerkesztést. A wordpress még mindig bajos, de rengeteg ingyenes layoutot találni a neten, aminek a motorja már adott, csak ki kell pucolni a forráskódokat, a fölösleget ki kell dobni, és saját ízlés szerint testreszabni. Jelenleg ez a fő vonal wordpress témák esetén.

Hagyományos HTML + CSS kódolással más a helyzet. Itt is használok a neten tutorialként elérhető, és díjmentesen közzétett layoutokat, de csak egy részüket emelem át egy saját keretbe. Az elmúlt 3-4 hónap rengeteg kódfejtése, egyszerűsítése, kódolása rögzített jópár megoldást a fejemben, így tegnap éppenséggel azt vettem észre, hogy gyönyörűen, egy apró hibával kompletten megírtam egymás után 3 div stílusát CSS-ben, amik tökéletesen működnek is. Nem súgott senki, nem néztem más CSS fájlokat a megoldást keresve, egyszerűen magától jött minden.

Jó érzés ráeszmélni arra, hogy kvázi felfogtam a CSS működését. Imádom a minimalizmust, a websiteoknál pedig különösen arra törekszem, hogy a lehető legtöbb dizájnelemet CSS-ben oldjak meg. Egyrészt a letisztultság, másrészt a retina kijelzők miatt. A reszponzív dizájn egyelőre várat magára, bár vannak félretéve reszponzív layoutok is arra az esetre, ha lenne néhány szabad éjszakám belemélyedni… :)