BOU­WEN:

BE­LANG­RIJ­KE OVERWEGINGEN, TIPS EN VOORBEELDCODE

Web Designer Magazine - - Bouw Voor Mobiel - CROSS BROW­SER EN MULTI PLAT­FORM CODE DIE HELPT BIJ MO­BIE­LE ONTWERPBESLISSINGEN

MO­BI­LE FIRST CSS (FLEX­BOX & MULTI COLUMNS) Flex­box is een nieu­we tool­kit op ba­sis van CSS3 waar­mee ont­wik­ke­laars een op­ti­ma­le con­tro­le over de po­si­ti­o­ne­ring van block-elementen op een pa­gi­na hou­den, met meer mo­ge­lijk­he­den dan stan­daard CSS. Een Flex­box-lay-out de ini­eert een re­la­tie tus­sen een hoofd-wrap­ping-ele­ment en de items waar die con­tai­ner om­heen wrapt. Sim­pel ge­zegd: Flex­box schikt de items op een lijn in een be­paal­de lo­gi­sche rich­ting zon­der dat de HTML ge­re­fac­tord hoeft te wor­den. | asi­de { | back­ground-co­lor: blue; | or­der: 4; | flex: 1 ; | } | .main­con­tent { | back­ground-co­lor: whi­te; | or­der: 3; | flex: 2; } | .ex­tra­div { | back­ground-co­lor: red; | or­der: 2; | flex: 1; }

TEKST RENDERING (LINE BREAKS & WORD WRAPS) Een pro­bleem dat bij res­pon­si­ve web­de­sign al­tijd speelt, is tekst­po­si­ti­o­ne­ring en wrap­ping. Con­tent moet dy­na­misch zijn en ont­wor­pen lay-outs moe­ten zich aan­pas­sen aan klei­ne viewports. Web­brow­sers heb­ben vaak niet de au­to­ma­ti­sche woor­da bre­king en tekstop­maak die de­sign­soft­wa­re heeft. Als de tekst­blok­ken smal­ler wor­den, loop je het ri­si­co dat som­mi­ge woor­den lan­ger wor­den dan de ko­lom breed is, ze­ker bij meer­ta­li­ge con­tent. Als dat ge­beurt, loopt de tekst bui­ten het blok door. Dit kan re­sul­te­ren in e ec­ten als on­ge­wens­te wit­ruim­te tot com­pleet on­lees­ba­re tekst.

CSS biedt een paar mo­ge­lijk­he­den om dit pro­bleem op te los­sen: word-wrap en hy­phens. Door de twee te com­bi­ne­ren, kun je bij de mees­te brow­sers en ap­pa­ra­ten voor­ko­men dat tekst bui­ten de con­tai­ner be­landt. | .text-con­tent { | -moz-hy­phens:au­to; | -ms-hy­phens:au­to; | -web­kit-hy­phens:au­to; | hy­phens:au­to; | Word-wrap:break-word; }

EMBED 16:9 VIDEO Met een com­bi­na­tie van CSS, wat re­ken­werk en over low-re­gels kun je ie­de­re em­bed­ded video (of ifra­me-con­tent) ont­he­ly com­pleet res­pon­si­ve ma­ken. Dat doe je door een wrap­ping-di­vi­der te ma- ken en te sty­len en daar spe­ci ie­ke pad- ding-re­gels voor de ifra­me-con­tent aan toe te voe­gen, zo­dat het met al­le breed­tes werkt. | .video-con­tai­ner { | po­si­ti­on: re­la­ti­ve; | pad­ding-bottom: 56.25%; /*16:9*/ | pad­ding-top: 30px; | height: 0; | over­flow: hi­d­den; | } | .video-con­tai­ner ifra­me, | .video-con­tai­ner ob­ject, | .video-con­tai­ner embed { | po­si­ti­on: ab­so­lu­te; | top: 0; | left: 0; | width: 100%; | height: 100%; } De Html-struc­tuur is dan als volgt: | <div class=”video-con­tai­ner”> | <ifra­me width=”640” height=”360” | src=”//www.you­tu­be.com/embed/uk­k­d8w3b­vo0” | fra­me­bor­der=”0” al­low­fulls­creen></ifra­me> | </div>

ME­DIA QUERY’S Nu CSS3 door het gros van de brow­sers breed wordt on­der­steund, kun je ein­de­lijk nieu­we me­dia­fea­tu­res zo­als max-width, de­vi­ce-width, orien­ta­ti­on en co­lor ge­brui­ken. Het is nu mo­ge­lijk meer­de­re sty­les­heets te ma­ken voor ver­schil­len­de doel­ein­den en ba­sa­le lay-out-aan­pas­sin­gen voor ver­schil­len­de breed­teran­ges – han­dig om lig­gen­de for­mats te sty­len!

Meer­de­re me­diaquery’s kun­nen al­tijd bin­nen de­zelf­de Css-sty­les­heet ge­bruikt wor­den. | /* Smartpho­nes (port­rait and lands­ca­pe) | ----------- */ | @me­dia on­ly screen and (min-de­vi­ce-width : | 320px) and (max-de­vi­ce-width : 480px) { |

/* Sty­les */ | } | /* Smartpho­nes (lands­ca­pe) ----------- */ | @me­dia on­ly screen and (min-width : 321px) | { |

/* Sty­les */ | } | /* Smartpho­nes (port­rait) ----------- */ | @me­dia on­ly screen and (max-width : 320px) | { |

/* Sty­les */ | }

ME­TA TAGS De me­ta-tag vie­w­port is es­sen­ti­eel om res­pon­si­ve lay­outs goed te la­ten wer­ken. Die stelt de view op al­le scher­men op een 1x1-ra­tio in en over­ru­let de pinch- en zoom­func­ti­o­na­li­teit van ap­pa­ra­ten. Dit for­ce­ren kan wor­den ge­zien als iets ne­ga­tief, maar het helpt om een ne­ga­tie­ve zoo­m­er­va­ring te voor­ko­men bij web­for­mu­lie­ren en dy­na­mi­sche web­si­te-as­sets. | <me­ta na­me=”vie­w­port” con­tent=”width=100%, | ini­ti­al-sca­le=1, | mi­ni­mum-sca­le=1, | user-sca­la­ble=no, | maxi­mum-sca­le=1”>

RE­GELS VOOR HOOG­TE EN BREED­TE A beel­din­gen ma­ken een web­si­te mooi­er. De af­me­tin­gen van a beel­din­gen kun­nen lexi­bel zijn, met CSS is het heel mak­ke­lijk om ze te scha­len.

MO­BIE­LE SCHERM GROOTTES Er gaat niets bo­ven tes­ten met ech­te hard­wa­re. Maar op htt­ps://my­de­vi­ce.io/de­vi­ces/ krijg je een goe­de in­druk van de ve­le ver­schil­len­de re­so­lu­ties en groottes.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.