Tutorials en Trends

Responsive webdesign: CSS en @media voor mobiele apparaten

Beschrijving: Kerfuffle:Users:ktimmers:Desktop:ipad_simulator.jpgMeer dan de helft van de gezinnen heeft een smartphone. Tegenwoordig wenst men dan ook een mobiele versie van zijn site. Een design voor Blackberry, voor iPhone, voor iPad, enz. Waar men vroeger enkel een design maakte voor de pc en een tweetal browsers, moet men nu rekening houden met diverse apparaten (pc, tablet, smartphone, ...), browsers (Internet Explorer, Firefox, Safari, Opera, ...) en schermweergaven. Hoe doe je dat? Via CSS!

In deze tutorial richten we onze aandacht op de specifieke CSS-codes voor mobiele apparaten.

Alles weten over Responsive Webdesign? Bezoek onze cursus.

Gerelateerde tutorials:

Algemeen

Wanneer je sites wil ontwikkelen voor smartphones en tablets, moet je ook weten hoe groot de schermweergaven zijn bij deze apparaten.

iPhone:

iPhone 4:

iPad:

Lees hoe je een site test op iPhone/iPad: lees tutorial

Afbeeldingen invoegen

Wanneer je grote afbeeldingen invoegt, dan krijg je een schuifbalk op de smartphone of tablet en dat willen we niet. De afbeelding moet zich mooi schikken naar het scherm. Dit wordt doorgaans gedaan via max-width: 100% in CSS te defini@euml;ren voor img. Internet Explorer begrijpt dit niet, vandaar dat we ook nog width: 100% toevoegen.

De afbeelding mag geen breedte krijgen in de (X)HTML.

We testen uit met 2 pagina’s:

Juiste versie:

http://zelfstudie.be/cursussen/responsive-test-juist.html (of ook http://zlfstd.be/v6lys4)

CSS:

img { border: 0; width: 100%; display: block; max-width: 100%; }

HTML:

<img src="responsive-test.jpg" />

Resultaat:

Foutieve versie: http://zelfstudie.be/cursussen/responsive-test-fout.html (of ook http://zlfstd.be/vfthcm)

HTML:

<img src="responsive-test.jpg" width="980" height="679" />


Resultaat:

Viewport

Een webpagina past zich automatisch aan aan het scherm van de smartphone/tablet. Een website kan overigens ook in 2 richtingen bekeken worden: portret of landschap. De gebruikers kan in- en uitzoomen via het scherm. Hiervoor werd speciaal een nieuwe meta uitgevonden: viewport.

Via onderstaande code zorg je ervoor dat het zoomen correct gebeurt en dat je ook schuifbalken krijgt, indien nodig.

Wil je het zoomen uitschakelen? Dat kan via deze code. Dit valt echter af te raden!

We sommen alle mogelijke waarden eventjes op.

Zie cursus HTML & CSS voor alle mogelijke waarden bij "Viewport".

Andere metatags

Alleen voor de iPhone en iPad van Apple zijn er al heel wat meta-tags.

Een overzicht:

Als je de waarde van apple-mobile-web-app-capable op "yes" zet, zal de pagina op fullscreen "draaien".

Met een stukje javascript kan je de full-screen-mode checken. Zie onderstaande code:

Met een apple-touch-icon kan je een icoon aangeven voor een snelkoppeling (op de iPad). Het icoon is een PNG van 72x72px. Apple voegt aan de icon een glossy effect toe.

href="/apple-touch-icon.png" />

Zie cursus HTML & CSS voor alle mogelijke metatags

Media Queries

In CSS2 was het reeds mogelijk om aparte CSS-opmaak te tonen voor het computerscherm, mobiel apparaat en een printversie.

In praktijk maak je 2 of 3 aparte stylesheets: scherm.css, print.css en mobile.css

href="scherm.css" rel="stylesheet" type="text/css" media="screen" />

href="print.css" rel="stylesheet" type="text/css" media="print" />

href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

Nu is handheld nogal algemeen. Je kan namelijk een tablet niet echt vergelijken met eender welke smartphone. Hierdoor is er in CSS3 heel wat nieuws. Zo zijn er nieuwe media queries mogelijk. Het probleem is dat CSS3 vrij nieuw is en het niet door elke browser ondersteund wordt. Heb je een eerder recente smartphone? Of doe je wel eens een update van de bijhorende browser? Dan gaat deze zeker CSS3 ”begrijpen”. Heb je nog een oudere browser? Dan negeert deze CSS3.

Nieuw in CSS3 zijn nieuwe media-verschijnselen als max-width, device-width, orientation en color.

Opmerking: orientation kan je beter negeren. Een betere oplossing is het gebruik van device-width.


Een media query:

href="iphone.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" />

Indien de browser getoond wordt op apparaat met schermbreedte van minder dan 480 pixels, dan wordt iphone.css geladen.

Je kan ook meerdere media queries in één stylesheet plaatsen.

Tussen /*    */ plaatsen we commentaar om de code te verduidelijken

Style.css

/*  smartphone: portret en landschap */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px) {

/opmaakstijlen */

}

/*  smartphone: landschap */

@media only screen

and (min-width: 321px) {

/opmaakstijlen */

}

/*  smartphone: portret */

@media only screen

and (max-width: 320) {

/opmaakstijlen */

}

Een doeltreffend voorbeeld dat reeds klaar is:

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portret) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portret en landschap) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

/* iPads (landschap) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portret) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops en laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Grote schermen ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

Download op Hardboiled CSS Media Queries.

Als link:

<link rel="stylesheet" href="smartphone.css"

media="only screen and (min-device-width : 320px)

and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css"

media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css"

media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css"

media="only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css"

media="only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css"

media="only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css"

media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css"

media="only screen

and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)">

Veel werk? Teveel onderverdelingen? Dit kan een goede consensus zijn:

<link rel="stylesheet" href="klein.css"

media="screen and (max-width: 600px)” />

<link rel="stylesheet" href="groot.css"

media="screen and (min-width: 600px)” />

<link rel=”stylesheethref=”print.css” media=”print” />

Via de eigenschap min-width kan je de breedte instellen die het browserscherm minimum moet hebben. Indien het scherm kleiner is, dan worden de opmaakstijlen genegeerd. De max-width eigenschap doet net het omgekeerde. Opmaak, die boven de maximum breedte van het browserscherm valt, wordt genegeerd.

TIP: test eens via algemene opmaak zoals een opvallend andere tekstopmaak of achtergrondkleur voor de pagina, of de mediaquery werkt.

Opmerking: een goede referentie is ook het skeleton, een responsive CSS framework dat je gratis kan downloaden en gebruiken. Bestudeer skeleton.css. Lees onze tutorial.


JavaScript

Een andere methode is het gebruik van Javascript. Dit kan een oplossing zijn voor oudere apparaten met browsers die CSS3 nog niet begrijpen. Gelukkig is ere en voorgemaakt Javascript bibliotheek, die oudere browsers (IE 5+, FF 1+, Safari 2) CSS3 doet ondersteunen.

Download het script: css3-mediaqueries.js.

Je kan dit script nog uitbreiden met onderstaand jQuery-script, dat de browser detecteert en overeenkomstige CSS-sheets koppelt.

Plaats deze code in je webpagina:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

 

<script type="text/javascript">

    $(document).ready(function(){

        $(window).bind("resize", resizeWindow);

        function resizeWindow(e){

            var newWindowWidth = $(window).width();

 

            // If width width is below 600px, switch to the mobile stylesheet

            if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});              }           // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){

                $("link[rel=stylesheet]").attr({href : "style.css"});

            }

        }

    });


Inhoud tonen, verplaatsen of verbergen

Het kan soms interessant zijn om bepaalde inhoud niet te tonen op smartphone. Of ergens anders te tonen.

Zo zijn bepaalde aspecten voor een smartphone soms minder interessant: een tagcloud, advertenties, enz. Je kan de div waarin ze getoond worden dan best verbergen via de css-code

     visibility: hidden;

Tevens kan het interessant zijn wegens het plaatsgebrek (de schermbreedte is smaller), om divs te verplaatsen. In onderstaand voorbeeld, worden ze onder mekaar gezet.


OEFENING

Bij wijze van conclusive, maken we in deze oefening een responsive webpagina die geschikt is voor smartphone én het scherm. Om het verschil duidelijk te maken, wordt de schermversie in het wit getoond en de smartphoneversie in het zwart.

Bekijk het resultaat op het scherm én smartphone: http://zelfstudie.be/cursussen/responsive-test-kolommen.html

 

Zie cursus HTML & CSS voor de werkwijze bij het maken van deze oefening


Leer werken met...

Interessante TOOLS: