2. Sikerének okai
• Laza műfaj, sok mindent elbír, posztolni bármiről lehet
• Nincsenek technikai korlátai, hogy valaki elkezdje
• Aggregáló oldalak (RSS), beszivárgott az internetes
újságírásba
3. Mit nevezünk blognak?
A blog egy olyan, periodikusan újabb
bejegyzésekkel bővülő weboldal, amely ezek
sorozatából áll, függetlenül attól, hogy mi az
oldal témája, formája és hogy nyilvánosan
elérhető-e. - Wikipedia
16. Címlap:
• A bejegyzés címe
• Időpontja
• Szerzője
• Bevezető (lead)
• Hozzászólások száma
• Címkék
• RSS feed
• Oldalsáv
17. Posztoldal:
A bejegyzés önálló oldala,
ahol a tartalom teljes
terjedelmében olvasható.
• Állandó URL-e (permalinkje van)
• Ajánló a további tartalmakra
• Social funkciók (like, share)
• Kommentek (olvasás, írás)
20. Web users spend 80% of their time looking
at information above the page fold.
Although users do scroll, they allocate only
20% of their attention below the fold. -
Jakob Nielsen
22. A fentiekből következik:
• 600px áll a rendelkezésünkre, hogy megragadjuk az
olvasók figyelmét
• Nem lehet túl vastag a fejléc, a hajtás felett tartalmat
is kell mutatnunk
• Itt helyezzük el a fő navigációs sávot is
• Jól tagolt címlapra van szükség
23. A Smashing Magazine kutatása szerint:
• A layout jellemzően középre igazított (94%)
• Fix szélességű blogok (92%)
• A szélesség 951 és 1000px között van (56%)
• CSS-layout a table ellenében (90%)
• Világos háttéren sötét szöveg (98%)
• 80 és 100 karakter közötti sorhossz
• Legtöbbet használt betűtípusok folyószövegre: Verdana,
Lucida Grande, Georgia (90%)
• Folyószöveg betűmérete 12 és 14px közötti (78%)
• Címek betűtípusa jellemzően Arial vagy Georgia (52%)
• Címek betűmérete jellemzően 17 és 25px közötti
Forrás: http://http://www.smashingmagazine.com/
2008/07/24/a-small-study-of-big-blogs/
25. Fix
body { font-size: 14px; }
div#wrapper { width: 960px; }
• Fix, pixelben megadott méretekkel dolgozunk
• Független a felbontástól
• Nagyobb felbontásokon túl nagy whitespace, kisebben
megjelenhet vízszintes scrollbar
• A designer kezében van a kontroll
26. Fluid
div#content_wrapper { width: 80%; }
div#content_sidebar { width: 20% }
• Jellemzően %-ban megadott értékekkel dolgozunk
• Igazodik a felhasználó böngészőjéhez
• Ha jól tervezik, kisebb felbontásokon is jól mutat, nem
jelenik meg vízszintes scrollbar
• A designer elveszti a kontroll egy részét a site felett
27. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
29. Responsive
.feature img { max-width: 100%; }
.nav-primary { padding: 1.2 em; }
• A pixeleket hírből sem ismeri
• Igazodik a felbontáshoz, az állított és fektetett nézethez
• Igazodik (PC, tablet, okostelefon) az eszközhöz a megjelenítés
• Megmarad a kontroll a designer kezében
37. Mire tervezünk?
1; Választunk egy szimpatikus
blogszolgáltatót
(Blog.hu, Blogger, Freeblog...)
2; CMS-t használunk
(WordPress, Joomla, Drupal)
3; Isten tudja, majd lesz
valahogy! (NE!)
41. 1024x768-ba még mindig be kell férjünk*
2007 2012
Tartalmi hasáb 450px 560-640px
Oldalhasáb 200-250px 200-310px
*Kivéve ha a responsive design irányelvei szerint tervezünk
42. 3. hasáb a blog designban
• Tartalmi értelemben szinte teljesen kikopott
• A bejegyzésektől veszi el a helyet
• Gyengíti a másik hasábot, zavart okoz az olvasóban
• Keskenyebb oldalhasábokat tesz lehetővé
• Erősíti, hogy haszontalan widgetekkel töltsük fel
• Megmaradt hirdetési felületnek
43.
44.
45. Tervezzük meg először a
bejegyzés oldalát
• Minden tartalmi egység megtalálható rajta
• Könnyű belőle más oldaltípust deriválni
48. A fejléc és az oldal kerete
Nincsenek kőbe vésett szabályok, de:
• Jól megválasztott font és tagline már félsiker
• A fejléc ne legyen magasabb 300px-nél
• Gondolkodj sitebuilder aggyal
60. Hozzászólások
• Látogató hsz-a (avatar, név, dátum, a szöveg)
• Szerző kommentje
• Reply (ikon, felirat)
• Komment form
• Ha regisztrálni kell a hsz-hoz, annak ki és
belépett állapota
• Facebook kommentelés esetén nagyon nincs
dolgunk...
• Lapozó
61.
62. Oldalhasáb
Jellemzően a jobb oldalon találjuk, a blog
egészével kapcsolatos infók szerepelnek rajta.
Minden oldalon látható.
63. Általában használt widgetek
• Kereső
• Blog rövid leírása
• Legfrissebb kommentek
• Legolvasottabb bejegyzések
• Ajánlott oldalak
• Archívum
• Social-dobozok
• Címkefelhő
• Feed
• Hirdetés
64. Hogy épüljenek fel?
• Kereső
• Blog rövid leírása, kontakt
• Social dobozok
• Kategóriák, _fontos_ tagek
• Legolvasottabb bejegyzések
• Legutóbbi hozzászólások
68. Lábléc
Lépjünk túl a nézeten, hogy a lábléc csak
azért kell, hogy valami legyen az oldal alján.
• Az olvasó figyelme csökken, ahogy az oldal aljára ér
• A háttérinformációkat (kontakt, rólunk...) itt keresi
• Nem az elsődleges navigációs felület
• A lábléc hozzásegíthet minket az olvasó figyelmének
fenntartásához (portfolió, legolvasottabb posztok,
legfrissebb kommentek, twitter, illusztráció... )
69.
70.
71.
72. Hogy lesz blog a psd-ből?
1. Regisztrálunk egy blogszolgáltatóhoz,
vagy telepítünk CMS-t (egyik sem több 5 percnél).
2. Keresünk egy szimpatikus sablont, ami illeszkedik a
tervezett designhoz.
3. Írunk teszt posztot, egy barátunkat megkérjük, hogy
kommenteljen párat.
4.Beállítunk néhány widgetet, teszünk bele tartalmat.
5. A sablonszerkesztővel és egy inspectorral (pl. Firebug)
felszerelkezve elkezdjük testreszabni a sablont.
(a sorrend többnyire felcserélhető)
73.
74.
75. Előnyei:
• Gyorsan telepíthető
• Minden a te kezedben van
• Végletekig testreszabható
• Remek adminfelület
• Ingyenes sablonok tömege
• Rengeteg widget
• Közösség, dokumentáció
76. Blogszolgáltatók:
• Nem kell törődnöd szerver
beállításokkal, tárhellyel
• Beépített statisztikai modul
• Beépített social funkciók
• Blog.hu esetében legendásan jó
support és Index címlapra kerülési
lehetőség
79. Definíció
Olyan szerkesztett kiadvány, ahol nem a gyors
hírfeldolgozás, up-to-date információk
szolgáltatása az elsődleges.
Hosszabb, mélyebben körüljárt, a napi
aktualitásokhoz nem feltétlenül kapcsolódó
tartalmakat olvashatunk rajta.
Blog Magazin Hírportál
