Responsive design: waar moet ik rekening mee houden?

[Anoniem: 524115]

Hi allen!

Ik ben nu al een tijdje voor mezelf een beetje aan het prutsen met design/coding (wordpress).
Nu wil ik mijn eerste sprong wagen richting responsive design, maar heb even geen idee wat de beste start is. Zijn er dingen waar ik rekening mee moet houden?

Ik heb al wat rondgekeken en ik kwam een aantal boeiende links tegen.
Deze twee sprongen er voor mij een beetje uit, alleen vraag ik me af of het niet simpeler kan.

Links:
https://css-tricks.com/sn...ies-for-standard-devices/
http://responsivedesign.i...common-device-breakpoints

Met simpeler doel ik op CSS.
Zoals in beide links het geval is, houden ze rekenschap met tablets, ipads en verschillende telefoonmodellen: HTC, iPhone, Samsung etc.

Kan dit globaler/gemakkelijker?

Mijn responsive CSS is op dit moment als volgt, en heb eigenlijk geen idee of ik goed op weg ben betreft de media queries;

code:

/*-----------------------------------------------------
                1024 SCREENS
-----------------------------------------------------*/

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {

#header {
height: 550px;
width: 1000px;
}

#navigation {
line-height:20px;
}

#navigation i {
display:none;
}

.sideimgs {
display:none;
}

#wrapper {
margin:0 auto;
width: 100%;
margin-top:0px;
}

#container{
width:100%;
z-index:1;
background-repeat:repeat-y;
margin:0 auto;
}


#sidebar {
width:100%;
margin-left:2px;
margin-top:-5px;
}

#content {
width:100%;
}

.lijntje {
background-repeat:repeat;
background-image:url(../images/lijntje.png);
height:5px;
margin-top:5px;
margin-bottom:5px;
}

.ftrdimg img {
width:100%;
height:auto;    
}

.ftrdimg img:hover {
width:100%;
height:auto;    
}

#yourfeet { 
margin-top:-50px;
}

}

/*-----------------------------------------------------
                450 SCREENS
-----------------------------------------------------*/

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {


}

Zoals je ziet is het niet af omdat ik twijfel over de max-width.

Note: Ben een beginner betreft coding, heb er geen studie o.i.d in gevolgd dus het kan zijn dat ik een aantal dingen niet goed begrijp, maar hoop wel dat mijn vraag duidelijk genoeg is.
Alvast bedankt!

[aryan]

Je zou bootstrap (http://getbootstrap.com/) kunnen gebruiken als framework (er zijn veel Wordpress Themes op basis van bootstrap, of je kan er zelf mee aan de slag gaan en het als basis gebruiken), dat zal je veel tijd besparen met het uitdenken van allerlei basiselementen met betrekking tot responsive design.

[Anoniem: 524115]

^ Bootstrap lijkt mij juist ingewikkeld (op dit moment)
Hoe zou ik het op mijn huidige manier het beste aan kunnen pakken?

Zou ik dan het beste af zijn met CSS voor inderdaad al die verschillende modellen of kan het ook globaler?

[aryan]

Je kan een online Bootstrap cursus volgen hier https://www.edx.org/cours...orial-microsoft-dev203x-0 (zeker de moeite waard). Als je Bootstrap helemaal niet wilt gebruiken, dan is het toch nog wel nuttig om de gedachtegang te snappen (omdat de focus vooral op responsive ligt).

Ze gebruiken vier verschillende formaten:
xs - voor kleine schermen / telefoons
sm - tablets
md - desktops
lg - desktops met een hoge resolutie (1200px of meer)

Als je dat ook als een uitgangspunt neemt, dan is dat een goed startpunt.

[n8n]

Bootstrap zit volgetjokt met bad practice. Niet doen tenzij het niet anders kan.

http://bradfrost.com/blog...design-pitfalls-to-avoid/
Brad frost heeft goede informatie, net als ccstricks. Je website laten breken op vooraf gestelde pixelresoluties is exact 1 van de bad practices die je wilt voorkomen. Eigenlijk zijn pixelafmetingen op border-width na obsolete in alles webdesign

[ Voor 30% gewijzigd door n8n op 28-06-2015 23:10 ]

[Gooly]

Het is natuurlijk een kwestie van voorkeur, maar mij persoonlijk ligt de 'Mobile First' aanpak erg goed.
Dat houd in het kort in dat je start met je layout elementen prioriteiten te geven. Welke informatie is beslist noodzakelijk en dient direct in het zicht te staan, welke is minder belangrijk en mag eventueel naar onderen, en welke is 'nice to have' en kan eventueel weg.

Op die manier bouw je een mobiele weergave op. Daarna ga je het grotere geheel opbouwen voor grotere schermen, waarbij je het natuurlijk zo gek kunt maken waar je wilt, en voor elke mogelijk schermformaat iets anders kunt bouwen. Maar persoonlijk beperk ik me altijd tot drie breekpunten; alles kleiner dan 768 breed, 768 - 960 en alles breder dan 960. Waarbij die eerste dan de mobiele weergave is en waar ik rekening probeer te houden met wel retina of geen retina.

[Gooly]

aryan schreef op zondag 28 juni 2015 @ 21:18:
Je zou bootstrap (http://getbootstrap.com/) kunnen gebruiken als framework...

Ik gebruik Bootstrap ook regelmatig voor mij WordPress themes. Hoewel ik ook steeds per project bekijk of het inderdaad wel nodig is. Ik heb ook nog een eigen 'mini-bootstrapje' gemaakt, met alleen de mediaqueries/breekpunten en enkele standaard klassen voor b.v. responsive images er in en verder geen javascript.

[ViNyL]

Je kunt het beste met een grid only framework beginnen als je wat over responsive wil leren.

Download er een en kijk wat de css doet. Zoals gezegd is een "mobile first" aanpak een mooie manier.

Bootstrap en consorten zitten vol met meuk die niets met responsive te maken heeft en alleen maar laadtijd toevoegen.

[Anoniem: 524115]

Ik ga alles in overweging nemen en even kijken wat mij dan het beste ligt gezien het inderdaad een voorkeur is. Ben een hoop tegengekomen in de reacties waarbij ik een 'wtf, waar heb je het over' gevoel heb, haha! Zeker omdat ik RWD pas aan het uitproberen ben, maar aldoende leert men.

Ik ga ook zeker de link van Aryan eens bekijken. Ben wel benieuwd hoe Bootstrap eigenlijk in elkaar zit zonder gelijk te schreeuwen: 'impossible!'

Ik betwijfel op het moment alleen even of ik antwoord heb op mijn vraag betreft de verschillende resoluties. Stel, ik zou op mijn manier verder gaan (1024width en 450width) welke zal ik dan nog meer toe moeten voegen? Zal ik dan echt te werk moeten gaan en dus ook de iphone, ipad e.d bij moeten voegen of kan het globaler?

[ViNyL]

Je kunt van een device nakijken wat de resolutie is en dan testen hoe je site daar in werkt. Met bv Google Chrome heb je een "responsive design view" waarmee je een device en bandbreedte kan simuleren. Hoewel een device zelf het beste is om te testen is dat iig een mooi alternatief.

Welke jij precies moet toevoegen hangt maar helemaal af van je ontwerp en waar jij een breekpunt wil toevoegen. Vaste breekpunten zitten wel in zaken als bootstrap maar zijn een bad practice. Gewoon kijken waar jij ze wil toevoegen en niet laten afhangen van vooraf bepaalde plekken.

[Gooly]

Anoniem: 524115 schreef op maandag 29 juni 2015 @ 11:36:
Ben een hoop tegengekomen in de reacties waarbij ik een 'wtf, waar heb je het over' gevoel heb, haha! Zeker omdat ik RWD pas aan het uitproberen ben, maar aldoende leert men....

Haha, dat had ik ook. Ik ben er ook nog niet zo heel lang mee bezig. Gewoon aan beginnen, het komt vanzelf heb ik gemerkt.
Wat me het meeste opviel is dat responsive design eigenlijk veel meer een manier van benaderen en denken is, dan een verzameling technieken. En een term als 'Mobile first' helpt daar erg bij.

Zoals ik aangaf heb ik wat dingetjes uit Bootstrap gehaald om met een minimaal startpunt te beginnen.
De mobile first media queries van bootstrap zijn

code:

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Zoals je ziet is alles smaller dan 320px de default, en de rest wordt toegevoegd. Maar wat je niet gebruikt laat je natuurlijk gewoon weg. Bij mij is meestal alles onder de 768 breed default

P.s. Wat ik ook vaak doe (uiteraard niet zelf verzonnen) is speciaal voor mobiel gerichte classes aanmaken.

Dan doe ik bijvorrbeeld:

code:

.mobile-display {
    display: block;
}

@media only screen and (min-width : 768px) {
    .mobile-display {
        display: none;
}
    }

En in de HTML doe je

code:

<div class="mobile-display">
    Lorem Ipsum
</div>

En dan krijg je dus dat die div alleen op mobiele weergave wordt getoond. En andersom kan het natuurlijk ook.: display-large-screen of zoets

[ Voor 14% gewijzigd door Gooly op 29-06-2015 14:20 . Reden: Extra toevoeging en correctie ]

[Anoniem: 524115]

ViNyL schreef op maandag 29 juni 2015 @ 11:41:
Je kunt van een device nakijken wat de resolutie is en dan testen hoe je site daar in werkt. Met bv Google Chrome heb je een "responsive design view" waarmee je een device en bandbreedte kan simuleren. Hoewel een device zelf het beste is om te testen is dat iig een mooi alternatief.

Welke jij precies moet toevoegen hangt maar helemaal af van je ontwerp en waar jij een breekpunt wil toevoegen. Vaste breekpunten zitten wel in zaken als bootstrap maar zijn een bad practice. Gewoon kijken waar jij ze wil toevoegen en niet laten afhangen van vooraf bepaalde plekken.

Klopt, ik gebruik dan Firefox aangezien ik niet wist dat Chrome die optie ook heeft.
Werkt ideaal, maar begrijp maar niet waarom mijn header of op zijn minst m'n navigatie in de header zich niet zet naar de gegeven resolutie instellingen;



(359px, 734px, en 959px zullen mijn breekpunten gaan worden, maar moet mijn CSS daar nog op aanpassen, als ik maar een beetje weet hoe het werkt)

Dus óf ik vergeet iets, óf ik begrijp het gewoon niet goed (genoeg)...

Gooly schreef op maandag 29 juni 2015 @ 14:08:
[...]

Haha, dat had ik ook. Ik ben er ook nog niet zo heel lang mee bezig. Gewoon aan beginnen, het komt vanzelf heb ik gemerkt.
Wat me het meeste opviel is dat responsive design eigenlijk veel meer een manier van benaderen en denken is, dan een verzameling technieken. En een term als 'Mobile first' helpt daar erg bij.

Zoals ik aangaf heb ik wat dingetjes uit Bootstrap gehaald om met een minimaal startpunt te beginnen.
De mobile first media queries van bootstrap zijn

code:

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Zoals je ziet is alles smaller dan 320px de default, en de rest wordt toegevoegd. Maar wat je niet gebruikt laat je natuurlijk gewoon weg. Bij mij is meestal alles onder de 768 breed default

P.s. Wat ik ook vaak doe (uiteraard niet zelf verzonnen) is speciaal voor mobiel gerichte classes aanmaken.

Dan doe ik bijvorrbeeld:

code:

.mobile-display {
    display: block;
}

@media only screen and (min-width : 768px) {
    .mobile-display {
        display: none;
}
    }

En in de HTML doe je

code:

<div class="mobile-display">
    Lorem Ipsum
</div>

En dan krijg je dus dat die div alleen op mobiele weergave wordt getoond. En andersom kan het natuurlijk ook.: display-large-screen of zoets

Ah, kijk... dat helpt (hopelijk)
Ik wacht de reacties nog even af en probeer het later deze week o.i.d nog wel weer... momenteel is het alleen maar frusterend en dus sla ik de informatie niet goed op.

[ViNyL]

In feite begin je met opmaak voor het kleinste device en daar gebruik je dus geen media query voor.

Vervolgens begin je met je media queries om voor grotere schermen de boel aan te passen:

code:

@media all and (min-width: xxem) {
// css styles
}

of

code:

@media screen and (min-width: xxem) {
// css styles
}

[Spinal]

Heb je een viewport opgegeven in je <head> ?
Bijvoorbeeld:

HTML:

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

[n8n]

ViNyL schreef op maandag 29 juni 2015 @ 16:13:
In feite begin je met opmaak voor het kleinste device en daar gebruik je dus geen media query voor.

Vervolgens begin je met je media queries om voor grotere schermen de boel aan te passen:

code:

@media all and (min-width: xxem) {
// css styles
}

of

code:

@media screen and (min-width: xxem) {
// css styles
}

Eindelijk iemand die het begrepen heeft: em als eenheid, ook voor de viewport

[BCC]

Mijn vriendin heeft het geleerd middels Zurb Foundation http://foundation.zurb.com/ - erg eenvoudig om mee te beginnen, en natuurlijk altijd Mobile first designen Bootstrap is handig om een basis design te heben voor een site, voor het responsive stuk is hij juist niet zo sterk IMHO,

[ Voor 26% gewijzigd door BCC op 29-06-2015 16:47 ]

[ViNyL]

Bootstrap gebruikt ook nog steeds px als eenheid in hun media queries. Dan is Foundation naar mijn idee al een betere keuze.

[Gooly]

n8n schreef op maandag 29 juni 2015 @ 16:38:
Eindelijk iemand die het begrepen heeft: em als eenheid, ook voor de viewport

Puur uit interesse, want zoals ik al schreef ben ik ook nog niet zo heel lang met responsive design bezig; maar wat is het voordeel van de media queries definieren met een em eenheid ipv pixels?
Ik gebruik zelf voornamelijk em in mijn CSS, maar juist bij het definieren van media queries gebruik ik heel bewust pixels omdat ik redeneer: "Het device zelf gebruikt ook alleen maar absolute eenheden als pixels, en aangezien ik het hier over een display heb met vaststaande afmetingen, moet ik me daar maar naar voegen".

[BCC]

Sinds de introductie van retina en dingen als het inzoomen met je telefoon of tables zorgt er steeds meer voor dat een px niet meer relevant is. em of rem is een formaat uitgedruk in punten, zodat er bijvoorbeeld op een retina display meer pixels gebruikt kunnen worden voor een mooier resultaat. Of mooier inzoomen.

De trend is nu trouwens om rems te gebruiken, maar dat verschilt niet veel met ems.

[ Voor 12% gewijzigd door BCC op 29-06-2015 20:57 ]

[n8n]

Gooly schreef op maandag 29 juni 2015 @ 19:32:
[...]

Puur uit interesse, want zoals ik al schreef ben ik ook nog niet zo heel lang met responsive design bezig; maar wat is het voordeel van de media queries definieren met een em eenheid ipv pixels?
Ik gebruik zelf voornamelijk em in mijn CSS, maar juist bij het definieren van media queries gebruik ik heel bewust pixels omdat ik redeneer: "Het device zelf gebruikt ook alleen maar absolute eenheden als pixels, en aangezien ik het hier over een display heb met vaststaande afmetingen, moet ik me daar maar naar voegen".

Voorbeeld: je scherm is 1200px breed en je werkt met em, laten we uitgaan dat 1 em de standaard 16px is. Je viewport is 75em, nu zoomt de bezoeker 125% want slechtziend, 1em is nu 20 px en je viewport is nu als gevolg daarvan opeens 60em.

Met pixel-viewports krijgt de bezoeker een website die voor 1200px (75em) is geoptimaliseerd op een '960px' (60em) scherm: past niet. Dan heb je een dat elementen moeilijk gaan doen, want de website is er niet op gemaakt.

Op deze manier kan je ook per device inspelen op de pixeldichtheid, de bezoeker kan een standaard van 14px voor 1em instellen of 18, 20 of op bijvoorbeeld een tv zelfs 30, en het blijft werken.

[Gooly]

Bedankt BCC en n8n. Duidelijk verhaal. Ik moest het even laten doordringen, maar ik denk dat mijn denkfout ligt in het feit dat ik viewport met display verwarde. (Omdat ik dacht; "een display is een display, dat zit hard op een device geschroefd, dat schikt zich niet naar een opgegeven afmeting")
Weer wat geleerd

[R4gnax]

n8n schreef op maandag 29 juni 2015 @ 21:47:
[...]

Voorbeeld: je scherm is 1200px breed en je werkt met em, laten we uitgaan dat 1 em de standaard 16px is. Je viewport is 75em, nu zoomt de bezoeker 125% want slechtziend, 1em is nu 20 px en je viewport is nu als gevolg daarvan opeens 60em.

Met pixel-viewports krijgt de bezoeker een website die voor 1200px (75em) is geoptimaliseerd op een '960px' (60em) scherm: past niet. Dan heb je een dat elementen moeilijk gaan doen, want de website is er niet op gemaakt.

Op deze manier kan je ook per device inspelen op de pixeldichtheid, de bezoeker kan een standaard van 14px voor 1em instellen of 18, 20 of op bijvoorbeeld een tv zelfs 30, en het blijft werken.

Kanttekening; er zijn nog diverse bugs in huidig actieve webkit builds waardoor em-based media queries niet naar behoren werken. Bijv. niet reageren wanneer een device tussen landscape of portrait orientatie wissel; of wijziging in de toepassing van een media query pas doorvoeren wanneer de pagina door de gebruiker ververst wordt, ipv op het moment dat er eigenlijk al omgeschakeld zou moeten worden.

Deze bugs zijn een groot deel van de reden dat frameworks als Bootstrap nog steeds media queries op basis van pixels gebruiken.

[ViNyL]

Dat probleem met de em based media queries is al weer even opgelost, dus dat mag geen reden meer zijn. De problemen met landscape en portrait ook toch? Daar kon ik zo geen tickets meer over vinden die nog open staan.

Volgens mij, als ik de discussies er bij Bootstrap zo over lees, is de reden dat er nog PX in versie 3 gebruikt worden is dat dit makkelijker werken is voor mensen die nieuw zijn met een framework als Bootstrap en nog wat support voor bv IE8. Om geen dubbel werk te doen gaan ze dit in versie 3 ook niet meer doen. Dat zal pas op zijn vroegst in versie 4 zijn van het framework.

[Guillome]

Interessant. En werkt rem net zo goed als em momenteel?

[n8n]

Guillome schreef op dinsdag 30 juni 2015 @ 11:30:
Interessant. En werkt rem net zo goed als em momenteel?

http://caniuse.com/#feat=rem

[R4gnax]

ViNyL schreef op dinsdag 30 juni 2015 @ 10:23:
Dat probleem met de em based media queries is al weer even opgelost, dus dat mag geen reden meer zijn.

Jammer genoeg draait niet iedereen de allerlaatste versie van een browser, heh? Zeker op mobile, waar deze bugs zich het makkelijkst openbaren.

[ Voor 13% gewijzigd door R4gnax op 30-06-2015 20:23 ]

[Gooly]

R4gnax schreef op dinsdag 30 juni 2015 @ 20:22:
[...]

Jammer genoeg draait niet iedereen de allerlaatste versie van een browser...

Dat klopt, hoewel in de praktijk de problemen meestal vooral bij IE en Opera mini liggen.
Al moet ik wel zeggen dat ik bewust geen oude browsers ondersteun. Het is onbegonnen werk, zeker met al die mobiele browsers er bij.
Mijn standpunt is dat alle opties van een website ook op versie '-1' en '-2' moeten kunnen functioneren, al dan niet met een workaround of fallback. In de versie daarvoor ('-3') moet e.e.a. ondervangen worden zodat de rest van de werking niet wordt verstoord en er in het geval van een belangrijke functie een alternatief voorhanden is. En alle versies daarvoor hebben simpelweg pech gehad.

Vroeger probeerde ik dat wel, om websites te laten werken tot zes browserversies terug, maar het was alleen maar frustratie. Nu denk ik: "Als je 4G op je telefoon wilt, dan zul je een 4G capabale telefoon aan moeten schaffen en als je de laatste nieuwe webdev functies wilt dan zul je een moderne browser moeten gebruiken"

[Scrummie]

Hierboven zie ik de discussie over em's en rem's, maar gebruiken jullie ook voor paddings en margins, breedtes van elementen, etc, ook em's? Heb het een tijdje geprobeerd maar ik geloof dat ik mijn hoofd er niet omheen kan krijgen dat het voor mij net zo natuurlijk werkt als padding-top: 20px;.

[n8n]

Scrummie schreef op donderdag 02 juli 2015 @ 09:27:
Hierboven zie ik de discussie over em's en rem's, maar gebruiken jullie ook voor paddings en margins, breedtes van elementen, etc, ook em's? Heb het een tijdje geprobeerd maar ik geloof dat ik mijn hoofd er niet omheen kan krijgen dat het voor mij net zo natuurlijk werkt als padding-top: 20px;.

Verschilt per element. Bij lay-out (section, article, ...) percentages, bij kleine elementen em‘s.

Mocht je SCSS gebruiken, hieronder de inhoud van mijn size.scss met de variabelen die ik standaard gebruik. Comments zijn wat summer maar in de regel:
'type' voor alle font-size,
'containers' voor grote content-elementen,
'targets' voor kleine (klikbare) elementen,
'ornaments' voor border en shadow-achtigen (enige met px) en als laatste;
'span' voor padding/margin op content-blokken.

Werkt voor mij heel goed, veel qua design is patronen dus het herhaalt zich toch, de variabel-namen werken volgens dezelfde principes.

SCSS:

// type                 pixel dimensions based on 16px (browser default)
$tiny: 62.5%;               // 10px
$compact: 80%;          // 12px
$small: 87.5%;          // 14px
$smaller: 92.5%;            // 15px

$larger: 112.5%;            // 18px
$large: 120%;               // 36px
$huge: 300%;                // 58px
$massive: 450%;                 // 72px

$golden: 160%;          // 26px, golden ratio increment
$platinum: 262.5%;              // 42px, golden ratio exponential


// containers
$box: 46em;                     // 640px

$box-tiny: 17.5em;              // 192px
$box-compact: 20em;     // 280px
$box-small: 32em;               // 320px

$box-large: 64em;               // 960px
$box-huge: 80em;                // 1280px
$box-massive: 120em;        // 1920px


// targets
$target: 2em;                   // 32px

$target-tiny: .625em;       // 10px
$target-compact: .75em;     // 12px
$target-small: 1em;             // 16px
$target-smaller: 1.5em;     // 24px

$target-larger: 2.5em;      // 50px
$target-large: 3em;             // 56px
$target-huge: 4.5em;        // 96px
$target-massive: 6em;       // 128px


// ornaments
$edge: 1px;

$edge-tiny: .125em;     // 2px
$edge-compact: .1875em; // 3px
$edge-small: .3125em;       // 5px
$edge-smaller: .375em;      // 6px

$edge-larger: .4375em;      // 7px
$edge-large: .5em;              // 8px
$edge-huge: .625em;     // 10px
$edge-massive: .75em;       // 12px
    
                                // based on parent width
// span                     // 320px    1280px  1920px
$span: 5%;                  // 16px 64px    96px

$span-tiny: 1.25%;              // 4px  16px    24px
$span-compact: 2.5%;        // 8px  32px    48px
$span-small: 3.75%;     // 12px 48px    72px

$span-large: 7.5%;              // 24px 96px    144px
$span-huge: 10%;                // 32px 128px   192px
$span-massive: 15%;     // 48px 192px   288px