Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

CSS og Javascript:

Dine bedste venner

CSS:

        @media ( max-width: 30em ) {
            .section {display: hidden}  
        }
        @media ( min-width: 30.1em ) {
            .section {display: block}
        }
      

Javascript (jQuery):

        if ( $(window).width() > 480 ) {
            $( '#conatinerA .section' )
                .detach()
                .appendTo( '#containerB' );
        };
      

Responsive webdesign:

Hvad skal du være særligt opmærksom på?

#1: Indhold og navigation

Ex: Ombudsmanden.dk

* Minimér eller tilpas navigation

Ex: Ombudsmanden.dk

Ex: barackobama.com

#2: Tekniske faldgruber

* Billeder

Ex: Picturefill

demo

* Video

Flash

Youtube

HTML5

Ex: Videojs.com

demo

* Størrelser angivet i pixel

Angiv str. med em og %

Korrekt!

#3: Oceaner af devices

* Repræsentative devices


* Progressive enhancement


* Test!
(Emulator er ikke godt nok)

#4: Responsivt indhold

Ex. designbureauer

Opsummering:

Mere information

Tanker om:

Intranet


App(likation)

VS

Mobil version

VS

Responsive design

Flows fremfor Features


>

>

Tap/click er bedre end scroll

>

Indholdsredigering: Flere felter, færre layoutmuligheder


>

To be continued ...

Use a spacebar or arrow keys to navigate