[RWD] font-size, gebruik

[koekiemonster]

Hallo,

Ik ben momenteel bezig met het omzetten van een grote Nederlandse site van pixelperfect naar een responsive oplossing.
Nu is de basis font 100% 11px verdana, maar kan ik niet kiezen welke font-size ik moet nemen voor tablets en smartphones.

De gedachte voor deze omzetting is simpel; de klant wil een desktop design (huidige site), een site geschikt voor tablets (768 - 949 pixels) en een site voor smartphones (320 - 768 pixels). Ik heb nog mijn twijfels bij deze viewports.

Gedachte is om door middel van media-queries de font-size te veranderen:
Desktop: 100%
Tablets: 110%
Smartphone: 90%

Is dit een handige aanpak?

[Rekcor]

http://www.sitepoint.com/...sign-how-to-manage-fonts/

Overigens, gebruik je geen boilerplate? Bijv. http://html5boilerplate.com/?

[koekiemonster]

bedankt voor je reactie!

1em is 11px in bovenstaande situatie, maar dat levert misschien niet de meest optimale situatie op. De huidige homepage blijft ongewijzigd, maar voor mobiel en tablet staat alles nog vrij. Hiermee is het dus mogelijk om buiten de natuurlijke schaling (wat em doet) ook nog een schaling op te leggen (vergroting in percentages), maar de grote vraag is of dit slim is, of veel gebruikt wordt.

Ik gebruik geen boilerplate omdat we een bestaande site ombouwen. Boilerplate etc. zou ik gebruiken bij nieuwbouw, bestaande bouw houd ik liever de bestaande css aan en vul deze aan met media-queries en eventueel js om het gewenste resultaat te verkrijgen.
Misschien is dat ook een foute keuze, geen idee..

[R4gnax]

koekiemonster schreef op maandag 24 maart 2014 @ 14:15:
Ik gebruik geen boilerplate omdat we een bestaande site ombouwen.

Fout nummer één.

Een goed responsive design is namelijk meer dan enkel wat elementjes dynamisch herschalen.

Zeker als je ook de smartphone-factor mee wilt nemen ga je dat niet bereiken door een bestaande site 'om te bouwen'. Je zult na moeten denken over de flow van content en over de wijzes waarop je content wilt ontsluiten voor verschillende platformen. Daarbij spelen ook de interactiemogelijkheden van verschillende platformen (muis, fysiek toetsenbord, touch, onscreen keyboard, etc.) een grote rol en je zult, als je het goed wilt doen, ze ook allemaal tegelijk af moeten kunnen handelen. Windows 8 devices met touchscreens hebben bijv. ook muizen en toetsenborden waartussen on-the-fly gewisseld kan worden. De veelgebruikte if (window.ontouch !== undefined) en de legio varianten daarop zijn dus volledig ontoereikend. Menus met belangrijke functies of tooltips met uitleg onder een :hover verstoppen? Vergeet dat ook maar snel.

[ Voor 55% gewijzigd door R4gnax op 24-03-2014 20:19 ]

[koekiemonster]

De betreffende site heeft, gelukkig geen informatie onder tooltips (waarmerk dempelvrij is daar bijvoorbeeld niet zo blij mee) en :hover is voornamelijk gebruikt voor normale hyperlinks.

Kortom, het betreft een vrij basic 960px website die beter moet gaan performen op kleinere devices en geschikt gemaakt moet worden voor grotere schermen.

[Inspector]

R4gnax schreef op maandag 24 maart 2014 @ 20:11:
[...]


Fout nummer één.

Een goed responsive design is namelijk meer dan enkel wat elementjes dynamisch herschalen.

Zeker als je ook de smartphone-factor mee wilt nemen ga je dat niet bereiken door een bestaande site 'om te bouwen'. Je zult na moeten denken over de flow van content en over de wijzes waarop je content wilt ontsluiten voor verschillende platformen. Daarbij spelen ook de interactiemogelijkheden van verschillende platformen (muis, fysiek toetsenbord, touch, onscreen keyboard, etc.) een grote rol en je zult, als je het goed wilt doen, ze ook allemaal tegelijk af moeten kunnen handelen. Windows 8 devices met touchscreens hebben bijv. ook muizen en toetsenborden waartussen on-the-fly gewisseld kan worden. De veelgebruikte if (window.ontouch !== undefined) en de legio varianten daarop zijn dus volledig ontoereikend. Menus met belangrijke functies of tooltips met uitleg onder een :hover verstoppen? Vergeet dat ook maar snel.

Alhoewel ik het in veel opzichten met je eens ben vind ik dat je het ietwat kort door de bocht benaderd. Uitgaan van mobile first of het gebruik van een boiler plate is zeker een goede basis. Echter zit je met een grote bestaande code base en kun je simpelweg niet de complete front-end van je website opnieuw bouwen is retrofitting zeker mogelijk. Het is niet de makkelijkste weg, sterker nog het zal een flink karwei worden maar zeggen dat het niet gaat werken vind ik wat ver gaan. Soms is retrofitten geen keuze maar simpelweg de enige optie.

Zoals al wordt aangegeven zou werken met em ipv px makkelijker zijn. Is je huidige CSS al volledig in px zou ik dat echter niet gaan omschrijven. De font-size aanpassen op basis van een media query is in mijn optiek een prima oplossing bij retrofitting.

Je zegt nog twijfels te hebben bij je viewport definities, houd je al rekening met orientation? Wij gebruiken bv de volgende breakpoints:

code:

/* Device grade: A */
@import "responsive/devicegrade_a.css" 
(max-device-width: 1023px) and (orientation: landscape)  /* tablet 10" in landscape */;

/* Device grade: B */
@import "responsive/devicegrade_b.css"
    (max-device-width: 1023px) and (orientation: portrait), /* tablet 10" in portrait */
    (max-device-width: 767px) and (orientation: landscape); /* tablet 7" in landscape */

/* Device grade: C */
@import "responsive/devicegrade_c.css"
    (max-device-width: 767px) and (orientation: portrait), /* (small) tablets portrait */
    (max-device-width: 499px) and (orientation: landscape); /* phones landscape */

/* Device grade: D */
@import "responsive/devicegrade_d.css"
    (max-device-width: 499px) and (orientation: portrait);  /* phone in portrait */

Binnen die breakpoint is de layout fluid en schaalt alles dus tot een volgend breakpoint bereikt is.