2010-ben kezdtem el a "Disco-story", majd új névvel a "Diszkó-történelem" blogot (weblapot) ebben a formátumban.
Azóta az olvasási szokások (is) megváltoztak: az asztali -nagyobb képernyős- PC helyett a telefon használata vált általánossá.
Ezért -jobb később, mint soha- a blogot "telefonbaráttá" fogom korszerűsíteni.
Ezt a változtatást már nagyából elvégeztem a másik weblapomon: "Zenei érdekességek".
Nagy segítséget jelentene, ha megnéznétek a Zenei érdekességek-et és véleményeznétek: jó lesz-e hasonló módosítás a jelenleg átalakítás alatt lévő "Diszkó-történelem" blogon.
A javaslatokat, véleményeket előre is nagyon köszönöm!!!
--------------------------------------------------
Egy 10 éves (vagy régebbi) blog mobilbaráttá (reszponzívvá) alakítása sokszor felér egy teljes felújítással. Ennek fő oka, hogy egy évtizeddel ezelőtt a weboldalakat még szinte kizárólag fekvő, asztali monitorokra tervezték, az okostelefonos böngészés pedig gyerekcipőben járt.
Ha valaki egy ilyen régi blogot szeretne modernizálni – ahogy a szövegben szereplő Diszkó-történelem blog szerzője is –, a következő komoly kihívásokkal szembesül a dizájn és a tartalom terén:
1. Képek és beágyazott videók rugalmatlansága
- Fix méretek: Régebben a képeket és a YouTube videókat fix képpontmérettel (pl.
width="640" height="480") ágyazták be a cikkekbe. Egy mai mobiltelefon képernyője ennél sokszor keskenyebb, így ezek az elemek egyszerűen „kilógnak” a képernyőről, és oldalirányú görgetésre kényszerítik az olvasót (ami óriási hiba mobilnézetben). - Megoldás: Visszamenőleg kell módosítani a kódokat vagy a sablon CSS-ét úgy, hogy a médiaelemek maximális szélessége 100% legyen (
max-width: 100%), így automatikusan a képernyőhöz igazodnak.
2. Táblázatok és elavult szövegformázások
- Táblázatos elrendezés: A 2010-es évek elején még gyakori volt, hogy a szöveget és a képeket táblázatokba (
<table>) rendezve tették egymás mellé. A táblázatok mobilon nem tudnak egymás alá törni, így az egész tartalom összenyomódik és olvashatatlanná válik. - Kényszerített sortörések: A régi posztokban a szerzők gyakran rengeteg "Enterrel" (sortöréssel) vagy szóközökkel próbálták középre igazítani a szöveget. Ez mobilon teljesen széteső, darabos bekezdéseket eredményez.
3. Az érintőképernyős navigáció (a „vastag ujj” probléma)
- Apró linkek: Asztali gépen az egérrel könnyű apró, sűrűn egymás mellé tett linkekre kattintani (pl. egy sűrű címkefelhőben). Mobilon viszont az ujjunkkal navigálunk. Ha a hivatkozások túl közel vannak egymáshoz, a felhasználó folyamatosan félrenyom.
- Hover-effektek hiánya: Régen nagyon népszerűek voltak azok a menük, amelyek csak akkor nyíltak le, ha az olvasó rávitte az egeret (hover). Érintőképernyőn nincs egérmutató, így ezek a menük mobilon egyszerűen kinyithatatlanná válnak.
4. Elavult kütyük (widgetek) és harmadik féltől származó kódok
- Egy 10 éves blog tele lehet olyan külső modulokkal, amelyek ma már nem támogatottak. Pontosan ilyen az általad is tapasztalt AddThis hibajelenség, de ilyenek a régi Flash-alapú zenelejátszók, a villogó látogatószámlálók vagy az elavult közösségi dobozok is. Ezek mobilon nemcsak hibásan jelennek meg, de drasztikusan le is lassítják az oldal betöltését.
5. Tipográfia és olvashatóság
- Ami egy nagy monitoron kényelmes, 12-es vagy 14-es betűméretnek tűnt hosszú sorokkal, az egy telefonon apró, hunyorgásra késztető "hangyaszöveg" lesz. A mobilbarát dizájn megköveteli a nagyobb alap betűméretet (általában 16px felett), a szellősebb sorközöket és a bekezdések közötti nagyobb szüneteket.
6. Az "Oldalsáv-szindróma"
- A régi blogok szinte kivétel nélkül oldalsávval (sidebar) épültek fel, telepakolva blogajánlókkal, naptárral, archívummal. Amikor egy ilyen blogot reszponzívvá tesznek, a rendszer ezeket a mobilon a tartalom alá tolja. A kihívás az, hogy a cikk elolvasása után a látogató hirtelen egy végtelenül hosszú, érdektelen modulokból álló oszlopot kénytelen görgetni a telefonján. Emiatt a mobilbaráttá alakítás során kíméletlenül szelektálni kell a kütyük között.
Összegezve: Egy évtizedes blog mobilbaráttá tétele ritkán oldható meg pusztán egy gombnyomással. Általában egy teljesen új, reszponzív sablon (téma) feltelepítésével jár, majd a legnépszerűbb korábbi cikkek kézi újraformázásával (a fix méretek és táblázatok eltávolításával), hogy a tartalom minden eszközön élvezhető maradjon.
