Päivitin juuri näiden Bisnes & IT -sivujen ulkoasua hieman, minkä taustalla on ollut pyrkimys saada sivut toimimaan edes kohtuullisen hyvin isojen kuvaruutujen lisäksi uusilla mobiililaitteilla.
Käytännössä tällainen sivuston toteutustapa määritellään ‘responsiiviseksi’ eli sivujen leveys muuttuu, kun selaimessa näkyvä pikselimäärä pienenee sivusuunnassa. Tätä voit itsekin kokeilla pienentämällä selaimesi kokoa tai katsomalla näitä sivuja esimerkiksi älypuhelimella. Responsiivisia (vasteellisia?) sivustoja voidaan toteuttaa lähinnä kahdella tavalla:
1) Sivujen leveys on tietty prosenttimäärä koko selaimen katseluikkunasta (engl. viewport), jolloin näytettävä sivu muuttuu täysin dynaamisesti selaimen katselualueen mukaan. Tällainen sivujen design edellyttää, että myös näkyvissä olevien kuvien ja vaikkapa valikkojen koko muuttuu dynaamisesti, mikä ei kaikilla alustana käytettävillä sovelluksilla oikein onnistu.
TAI
2) Sivujen leveys muuttuu etukäteen päätettyjen pikselipohjaisten leveyksien mukaiseksi esimerkiksi siten, että isoille ruuduille sivuston sisältöosuuden maksimileveys on 960 pikseliä, pienemmille laitteille (esim. tablettikoneille) 720 pikseliä ja älypuhelimia varten esimerkiksi 600 pikseliä. Viimemainittu voi olla vielä toteuttu siten, että sivustossa ei enää näy sivupalkkeja. Tällainen toteutustapa antaa mahdollisuuden virittää sivuston kuvat, taulukot ja valikot sellaisiin kokoihin, että ne näkyvät mukavasti myös erikokoisilla näytöillä. Näiden sivujen layoutissa olen käyttänyt tämän kakkostavan mukaista toteutusta siten, että kiinteästi astetut sivupalkin näyttävät leveydet ovat 1080, 960, 780 ja 600 pikseliä; tätä pienemmillä näytöillä sivupalkki työnnetään varsinaisen sisällön perään ja sivuston leveys muuttuu laitteen mahdollisuuksien mukaan dynaamisesti.
Teknisesti olen toteuttanut ulkoasun käyttäen ilmaista WordPress-ohjelmistoa (WP) ja sen ulkoasun muokkaukseen sovellettavien teemojen luomiseen ilman ohjelmointia toimivaa ThemeFrame-ohjelmistoa. Näiden lisäksi olen käyttänyt pariakymmentä lisäosa (plugin) mm. sivuston suojaamiseen, kontaktilomakkeisiin, kuvien hallintaan, sosiaalisten linkkien kuten LinkedInin ja Facebookin kytkemiseksi juttuihin, juttuotsikoiden tai lyhenteiden näyttämiseen sivupalkissa sekä monikielisyyden hallintaan. Ainoa maksullinen näistä on ThemeFrame, jonka sain muutamalla kymmenellä eurolla ikuisesti käytettäväksi ja päivitettäväksi. Samoin maksan noin 80 euroa vuodessa Louhi.netille sivuston ja tarvittavan MySQL-tietokannan pyörittämiseksi heidän palveluissaan – käytännössä pilvessä, koska kaikki hallinnointi toimii pelkällä selaimella.
Pistäpä kommenttia, jos vastaava sivuston toteutus kiinnostaa!
Vesa
