Támogatás, előfizetés...

 

Ezt a Diszkó-történelem blogot is tervezem felújítani!
(Mobil telefonon is olvashatóbbá tenni.)

A Diszkó-történelem blog átalakítása

 

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.