Responsiiviset sivustot

etusivu aloitus linkitys kuvia sivuille taulukot tyylit bootstrap bootstrap esimerkkejä lomakkeet lomake-esimerkki

Mobiililaitteet ovat tuonneet uudet haasteet web-sivujen tuottamiselle. Ammoisina aikoina riitti, että tehtiin jonkinlaiset web-sivustot, joita sitten katseltiin työpöydällä olevalta näytöltä ja se oli siinä. Nykyisin nettiä katsellaan hyvin heterogeenisellä joukolla erilaisia laitteita.

Jokin aika sitten tätä ongelmaa lähestyttiin siten, että sivustosta rakennettiin erillinen mobiililaiteversio niitä varten. Yleensä tämä oli myöskin kevyempi kuin varsinainen sivusto johtuen hitaammista nettiyhteyksistä. Tätä käytetään edelleenkin jonkin verran. Haittana voisi nähdä kahden erillisen sivuston ylläpitämäinen.

Uusin trendi ovat kuitenkin ns. responsiiviset sivustot eli sivut, jotka reagoivat itse siihen, millaisella laitteella niitä katsellaan. Näin ei tarvita erilaisia sivustoja erilaisille alustoille.

Bootstrap - Mobile first

Pyörää ei aina kannata suunnitella uudestaan, useinmiten on järkevää käyttää valmiita suunnittelutyökaluja. Yksi yleisimmin käytetyistä työkaluista on nimeltään Bootstrap. Se on avoimeen koodin projekti, joka sisältää valmiita määrityksiä CSS-elementeille sekä lisäksi myös runsaasti JavaScript-palikoita asiaan liittyen. Bootstrapia voidaankin pitää myös eräänlaisena Frameworkinä, kehitysympäristönä, jonka avulla voidaan luoda responsiivisia sivustoja.

Bootstrapin ominaisuuksia:

Bootstrapin kohdalla mainitaan usein seuraavat ominaisuudet:

  1. Helppokäyttöinen: Jo perusteet HTML5:stä ja CSS:stä osaamalla pääsee alkuun
  2. Responsiiiviset ominaisuudet: sillä tehdyt sivustot toimivat niin pöytäkoneissa kuin mobiililaitteissakin
  3. Mobiili ensin -tavoite: (Mobile First) 3-versiossa (nykyinen versio) mobiiliominaisuudet ovat etusijalla ko. frameworkissa
  4. Yhteensopivuus selainten kanssa: Bootstrap toimii kaikilla nykyselaimilla.

Mistä Bootstrapin löytää?

Bootstrapin voi imuroida itselleen osoitteesta http://getbootstrap.com/. Tällöin siis noudetaan koko sisältö omalle koneelle. Toinen vaihtoehto on linkittää Bootstrap suoraan palvelimelta. Näin meillä on koko ajan ajantasalla oleva versio Bootstrapista. Linkitys tapahtuu näin:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Näiden lisäksi tämä voi olla myös hyödyllinen:

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Lisäksi koska Bootstrap on suunniteltu Mobile first -periaatetta noudattavaksi, pitää laittaa seuraava meta-tagi otsikkotietoihin, että renderöinti toimisi kunnolla:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nämä rivit lisätään sivun otsikkotietoihin ja Bootstrap on valmis käytettäväksi.

Hyödyllistä lisätietoa sekä linkkejä

Hieman esimerkkejä...
https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29 Bootstrap Wikipediassa
http://www.w3schools.com/bootstrap/ W3Schoolsin erinomainen Bootstrap-tutoriaali. Kannattaa lukea ja tutustua.

Sivun alkuun...