Nya madr.se - en sammanfattning av allt nytt

Återkommande besökare eller personer som följer mig på Twitter vet att madr.se fått en ny design i dagarna. Jag pangade ut en halvfärdig version för ungefär en vecka sedan och har sedan dess kört finlir för att få de sista bitarna på plats.

Revansch

Jag var inte helt nöjd med den förra designen av flera anledningar.

• Upplägget kändes inte tillräckligt "klickigt": kändes inte lockande att gå vidare från ett inlägg och se annat innehåll.
• Känsla av grovrivet och klumpigt: för litet innehåll på för stor yta.
• Bloggnavigeringen kändes svårnavigerad och omodern.
  • Kalendernavigering har jag inte sett sedan 2005 eller så, en utdöd trend.
  • Taggmolnet smutsade ner HTML-koden och gjorde navigering med tangentbord hopplös.
• Mycket småbilder i CSS-filen. Jag visste om CSS-sprites men valde av någon anledning att skippa det.

Dessutom fattades det några enligt mig mycket viktiga egenskaper.

• Sidan hade ingen CSS för handhållna enheter.
• Utskriftsvyn var inte helt hundra.
• Inget visas av mina dagliga aktiviteter på Internet, vilket är litet märkligt, rentav opassande för den här typen av blogg.

Förändrad navigation och mer lull-lull

De största förändringarna är att den nya designen använder toppmeny och tre spalter för innehåll: en innehållsspalt, en spalt (precis som innan) tillägnad bloggnavigering och en spalt med innehåll från annat håll.

Målet med den nya spalten är att puffa för min aktivitet på nätet som är relevant för besökarna här. Därför visas min Delicious och min Twitter där jag gärna håller mig kring webbutveckling och liknande ämnen. Då jag också läser böcker visas även de jag läser av mina böcker hos Anobii.

Då madr.se gått och blivit JavaScript-berikat kände jag behov av ett bra bibliotek, och valde då min personliga favorit DOMAssistant som är såväl mycket snabbt som litet till storleken i jämförelse med de mer populära biblioteken jQuery eller Prototype.

Handheld & Print

Madr.se har historiskt sett inte haft någon CSS för handhållna enheter som mobiltelefoner, smartphones och handdatorer. I julas när jag blev med iPhone kände jag ett sting av irritation varje gång jag ville åt något av mitt eget innehåll från telefonen, och i och med det här krafttaget med sidan skapade jag en sk Mobile edition som strippar bort HTML vid PHP-exekveringen och sedan presenteras med en bättre lämpad CSS, som uppfyller de krav som handhållna enheter ställer.

• Hög kontrast för att kunna läsas utomhus eller på skärmar med begränsade färger.
• En spalt med fokus på artiklar och innehåll, nedstrippad ordentligt för att uppnå låg bandbredd som möjligt och ökad läsbarhet på liten skärm.

Vid utskrift visas en presentation som jag komponerade någon gång 2007 utifrån acceptabla riktlinjer för print-CSS, som i princip ändrar typografin och släcker alla spalter som inte är intressanta. Jag kände att det fattades litet på den och gjorde de korrigeringar som krävdes för att jag skulle bli nöjd, som bland annat innefattar Förbättrad visning av länkar vid utskrift.

Jag uppdaterade Tillgänglighetsförklaringen om de olika medierna för sakens skull.

Fördjupning

Ovan skrapar jag på ytan. Tanken är att i framtida bloggar berätta mer detaljerat om de steg och förbättringar jag nämnt. Det var en hel del anekdoter på vägen som jag valde att skippa här. Dessa blogginlägg kommer att referera tillbaka till detta.

Under huven: ny version av MWA

Jag deklarerade MWA som död för ett tag sedan. Inte desto mindre hade jag en version under utveckling, och istället för att utveckla den i eget spår är den nu inbäddad i den här bloggens utveckling och förvaltning.

Den nya versionen, MWA-0.5rc1, skeppas med den här redesignen och innehåller några grejor som jag är rätt så stolt över.

• Appar är numera helt modulbaserade: moduler läggs till och utvecklas fristående från varandra. Den här webappen har två moduler.
  • blog -- allt som är rena bloggsidor.
  • article -- vanliga sidor, de som inte är rena bloggsidor.
• En komplett, lättadministrerad lösning för URI routing. Nu är det precis som jag vill ha det.
• Ett enkelt readonly-API för modeller som kan ta vilken modell som helst och presentera den som Atomflöde eller JSON, där det senare är default.
• Ett fungerande autentiseringsverktyg, komplett med in- och utloggning, grupphantering och ett enkelt behörighetssystem.
• Sidkomposition, vilket förenklat innebär att en sida är möjlig att komponera via drag-n-drop. Det är möjligt tack vare klassen Page som sätts upp med ett flertal monteringspunkter där innehåll kan läggas på kö.

Om du är intresserad av koden till MWA, så kontakta mig gärna.