Efter mycket bollande fram och tillbaka med Php, css-layouter, stora CMS:er som Concrete5, Wordpress och Joomla kände jag en del frustration. En webbsida skall vara enkel, skalbar med alla enheter som finns på marknaden, pedagogisk, enkel att hantera och SNYGG. Jag gick tillbaka till skrivbordet och skapade en helt ny design i HTML5 där jag integrerade helt nya tekniker med beprövade knep som jag integrerat i flera år. Förhoppningsvis läser du detta i www.bergstromsservice.se , den sida jag tänkte beskriva layouten för i denna post. Om du inte tidigare pysslat med webblayout eller fortfarande kör ren HTML kan detta låta krångligt, men att göra en sida liknande denna är rätt enkelt i och med att HTML5 har kommit ut på marknaden.
Layout är otroligt viktigt och det som hjälper eller stjälper en hemsida! I och med att iPads, Blackberries, iPhones, Androids o.s.v. börjats användas med rasande fart är det verkligen dags att se till att din sida är lika snygg på en liten skärm som en stor. I skrivandets stund är inte HTML5 kompatibelt med alla webbläsare (du kanske har IE8 och tycker att sidan ser hemsk ut p.g.a. detta), och detta är något man får beakta. Skall man vänta ytterligare ett år eller? Ja, det beror mest på vilka besökare du tror att du kommer att få. Jag satsar min layout på en publik av hippa, uppdaterade människor som dig och chansar därför på detta 'nya' språk. Så, vill du skapa en sida liknande denna så ska jag försöka förklara uppbyggnaden:
- Bakgrunden är ett smidigt script som nyttjar 'canvas'-objektet som stöds i HTML5. Scriptet är skapat av RadicalFX. Ladda ner script HÄR.
- Ett CSS-formulär (css3) med stöd för bl.a. integrerade iFrames, mjuka kanter och div-class definiering. Ladda ner css HÄR
- Menyn har knappar definierade med den nya 'button'-taggen (html5) och intern CSS. Ladda ner meny med intern css HÄR
- Nedladdningslänkarna öppnar objekten. För att spara en sida, välj 'spara som webbsida' i din webbläsare. Spara alla filer i samma katalog!
iFrames körs för både meny och huvudobjekt så att hela systemet är skalbart i all oändlighet. Till exempel kan du skapa både ett oändligt antal undermenyer och sub-sidor utan att någonsin mer behöva skapa design för dessa (då dessa bör vara enkla, vita sidor som integreras i huvudsidan. Ladda ner huvudsidan HÄR .
Jag har valt att använda www.blogger.com som min objekthanterare (artiklar och liknande) för att jag senare kan uppdatera sidan via e-mail, via blogger eller via min gamla telefon (sms, mms och photo-blogging). Med denna enkla layout har jag därmed - på mindre än ett dygn - skapat en portal som är enkel, attraktiv och skalbar i all oändlighet! Jag hoppas att detta ger även dig inspiration. MVH/Daniel
