[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-design-checklist-i18n-slugs":-1,"language-blog-slug-en-design-checklist":134},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",{"page":135},{"slug":136,"i18nSlugs":137,"social":140,"title":144,"subtitle":79,"isArchived":145,"headerIllustration":143,"date":146,"authors":147,"introTitle":156,"items":157,"pivots":175,"relatedBlogPosts":186,"tags":187,"onMountedScript":150,"onUnmountedScript":150},"design-checklist",[138],{"locale":139,"value":136},"en",{"title":141,"description":142,"image":143},"Design Checklist | De Voorhoede","A checklist to ensure a smooth hand-over between design and development",null,"Design Checklist",true,"2019-02-14T13:09:58.218+01:00",[148],{"name":149,"lastName":150,"slug":151,"image":152},"Sanne","","sanne",{"url":153,"alt":143,"width":154,"height":155},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Ensure a smooth hand-over between design and development with the design checklist",[158,162,165,168,172],{"__typename":159,"id":160,"title":150,"body":161},"TextSectionRecord","458658","\u003Cp>This design checklist is meant as a basis for exchanging assets between the designer and developer. Especially in a non-agile setting, this list can help with a smooth hand-over between design and front-end development. The list contains the most important points that might otherwise be overlooked or deemed unimportant. It is in no way meant as a complete list and might be updated when browsers, devices or specifications, etc. change.\u003C\u002Fp>\n\u003Cdiv data-design-checklist=\"\">\n\u003Cp class=\"enhanced-content is-visible\" data-persistent-checkboxes=\"\">The checkboxes won't uncheck when you refresh or close the tab. This makes the list easy to use over a longer period of time.\u003C\u002Fp>\n\u003C\u002Fdiv>",{"__typename":159,"id":163,"title":150,"body":164},"563755","\u003Cp>\u003Cbutton class=\"app-button body clear-button enhanced-content\" data-clear-handle=\"\">clear checklist\u003C\u002Fbutton>\u003C\u002Fp>",{"__typename":159,"id":166,"title":150,"body":167},"563730","\u003Cul class=\"checklist\" data-checklist=\"\">\n\u003Cli data-checkbox-group=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"links\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"links\">Links\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cul class=\"nested-list\">\n\u003Cli>\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"default\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"default\"> ..have a default state \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"hover\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"hover\"> ..have a hover state \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">The hover state is activated when the link is targeted by the mouse cursor.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"focus\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"focus\"> ..have a focus state \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">The focus state is activated when the link is targeted by the keyboard. Most browsers have a default focus state, usually a blue outline. The default styling can be replaced with custom styling that matches the design. In general, the focus and hover state have the same styling.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"active\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"active\"> ..have an active state \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">The active state gives the user feedback that the activation has been detected by the browser. In other words, it lets the user know that the link was indeed clicked.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"visited\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"visited\"> ..have a visited state \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">A link is given a visited state if the user has already been on the page it's leading to. It's telling users the difference between the pages they have visited before and the ones they have not.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"external\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"external\"> Links to external pages are visually distinct \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">Links can have a target attribute which we can use to specify what should happen when the link is clicked. One of the possible values is blank, which tells the browser to open the link in a new window or tab (based on the user's preference). Opening a link in a new window or tab is a change in the default behaviour. To make sure the user knows what to expect there should be a clear visual distinction between internal and external links.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"download\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"download\"> Download links are visually distinct \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>If a link is used for downloading a resource, we can add the download attribute to it. This way, when the user clicks the link the resource will be downloaded directly (instead of navigating to it).\u003C\u002Fp>\n\u003Cp>It can be pretty annoying when a download starts without expecting it. Therefore, the behaviour should be clear to the user before the link is clicked, by making download links visually distinct. It is also recommended to add some download details, like the type and size of the download.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli data-checkbox-group=\"\" data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"fonts\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"fonts\">Fonts\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>When you choose a font for your design, you have two options:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>System fonts: the fonts already installed on our computer\n\u003Cul>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan>They are always available and you get them for free\u003C\u002Fli>\n\u003Cli>\u003Cspan class=\"con\">\u003C\u002Fspan>The number of system fonts installed on computers is limited\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>Custom fonts\n\u003Cul>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan>the font will match the visual design and branding\u003C\u002Fli>\n\u003Cli>\u003Cspan class=\"con\">\u003C\u002Fspan>font files can be very large and add extra requests to your site. Both are hurtful for performance.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>When you decide to use a custom font, be sure to include the correct format, a fallback system font and (if possible) a subsetted font.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cul class=\"nested-list\">\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"woff\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"woff\"> ..are in WOFF format \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>We used to include four file formats of our web font in order to get optimal browser support. Nowadays, the WOFF format will be sufficient in most cases, because it covers nearly all browsers (the only browsers not supporting WOFF are IE8, Opera Mini, and older versions of Android and iOS). Including only the WOFF format of the custom font has a couple of benefits:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>It saves HTTP requests, improving the performance of the site\u003C\u002Fli>\n\u003Cli>The WOFF format loads faster than other formats, because it uses a compressed version of the structure used by OpenType and TrueType fonts\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>With the \u003Ca href=\"http:\u002F\u002Fwww.fontsquirrel.com\u002Ftools\u002Fwebfont-generator\">Font Squirrel Webfont Generator\u003C\u002Fa>, you can add a font and it will generate the needed formats for you.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"subset\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"subset\"> ..are subsetted \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">When you know in advance which letters you'll need, for example when the font is used in a logo, you can only include those characters. Subsetting reduces the web font file size, which will increase the site's performance. This can be done with the \u003Ca href=\"http:\u002F\u002Fwww.fontsquirrel.com\u002Ftools\u002Fwebfont-generator\">Font Squirrel Webfont Generator\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"fallback\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"fallback\"> ..have a system fallback font \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">Always include a fallback system font that matches the custom font as close as possible. Browsers can select the fallback system font when it doesn't not support the WOFF format or the custom font can not be downloaded.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli class=\"top-list-item\" data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"icons\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"icons\">Icons\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>At De Voorhoede, we prefer to use SVG icons because:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan> they're vector graphics and thus are crisp on displays of all resolutions\u003C\u002Fli>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan> they are semantic\u003C\u002Fli>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan> they are fast and non-blocking\u003C\u002Fli>\n\u003Cli>\u003Cspan class=\"pro\">\u003C\u002Fspan> they support multiple colours and gradients, as opposed to icon fonts (which are monochrome)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>To provide an appropriate fallback solution, you can make use of several tools, like \u003Ca href=\"http:\u002F\u002Fgrunticon.com\">Grunticon\u003C\u002Fa> and \u003Ca href=\"http:\u002F\u002Ficonizr.com\u002F\">Iconizr\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>These tools take your SVG icons and processes them to a bunch of files, including SVG data URI's (for better performance), PNG data URI's (for browsers that don't \u003Ca href=\"http:\u002F\u002Fcaniuse.com\u002F#feat=svg\">support\u003C\u002Fa> SVG) and some fallback CSS files (for older browsers and for browsers with JavaScript disabled).\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-checkbox-group=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"forms\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"forms\">Forms\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cul class=\"nested-list\">\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"input-focus\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"input-focus\"> The focus state of input fields is defined \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>According to the \u003Cabbr title=\"Web Content Accessibility Guidelines\">WCAG\u003C\u002Fabbr>, 'any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible'. Just as links, browsers have a default state for focused form elements.\u003C\u002Fp>\n\u003Cp>The default browser styling for focused form element isn't always consistent with the visual design. For aesthetic reasons, it can be tempting to remove the focus indicator. However, this will make the form inaccessible to some users (e.g. those who rely on their keyboard). Fortunately, we can replace the default browser styling with custom styling that matches the visual design.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"disabled\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"disabled\"> The disabled state of input fields is defined \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>This state indicates that the user can not interact with the form element, e.g., a checkbox can not be selected or a button is not clickable.\u003C\u002Fp>\n\u003Cp>Since the default color of disabled form fields is grey in most browsers, you should be careful with making regular form fields grey. There should be sufficient contrast between regular and disabled form fields to make sure the user can easily see the difference.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"placeholder\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"placeholder\"> Placeholder design is included \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>A placeholder is an additional hint for users to help them with form completion (it's \u003Ci>additional\u003C\u002Fi> - it is \u003Ca href=\"http:\u002F\u002Fwww.456bereastreet.com\u002Farchive\u002F201204\u002Fthe_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element\u002F\">not a substitute\u003C\u002Fa> for a form label). A hint could be an example value or a brief description of the expected format.\u003C\u002Fp>\n\u003Cp>In most browsers, if \u003Ca href=\"http:\u002F\u002Fcaniuse.com\u002F#feat=input-placeholder\">supported\u003C\u002Fa>, the default color of placeholder text is light grey. You can alter this default color to suit the visual design (be sure to apply a style that has sufficient contrast with the background color!).\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"required\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"required\"> Indicators of required\u002Foptional fields are included \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>Most browsers supply additional information if the user tries to submit the form without filling in the required value. However, it is useful to include an indicator of required\u002Foptional fields in the visual design to make sure that:\u003C\u002Fp>\n\u003Cul class=\"bullet-list\">\n\u003Cli>users know which fields are required or optional \u003Ci>before\u003C\u002Fi> they try to submit the form\u003C\u002Fli>\n\u003Cli>they match the overall look and feel. The default browser tooltips can't be styled. However, we can add custom tooltips, \u003Ca href=\"http:\u002F\u002Fheydonworks.com\u002Fpractical_aria_examples\u002F#input-tooltip\">using only CSS\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"valid\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"valid\"> Indicators of valid\u002Finvalid fields are included \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">With the \u003Ccode>:valid\u003C\u002Fcode> and \u003Ccode>:invalid\u003C\u002Fcode> CSS pseudo-classes we can give users feedback about whether or not the entered input is valid, while they are interacting with the form. For example, we can make email fields red or green, based on whether or not the contents match a valid email address pattern.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"error\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"error\"> Error messages are included \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">The use of required\u002Foptional indicators and placeholders help the user to complete the form successfully. However, something always can go wrong. Be sure to include error messages in the visual design in case this happens.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli data-checkbox-group=\"\" data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"images\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"images\">Images\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>Images are often the main source of \u003Ca href=\"http:\u002F\u002Fhttparchive.org\u002Finteresting.php#bytesperpage\">page weight\u003C\u002Fa>. An overweight website results in a poor user experience and high bandwidth costs. There are a couple of ways to take control over image size and quality in order to deliver fast loading site.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cul class=\"nested-list\">\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"type\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"type\"> ..are in the right format \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>There are two types of images to consider:\u003C\u002Fp>\n\u003Cul class=\"bullet-list\">\n\u003Cli>\n\u003Cp>vector images: use lines, points, and polygons to represent an image. They are suited for images that consist of simple geometric shapes, like logos, icons etc.\u003C\u002Fp>\n\u003Cp>Although SVGs are already pretty small, there are still things we can do to optimize them. SVGs contain a lot of metadata, like XML namespaces and layer information. Tools like \u003Ca href=\"http:\u002F\u002Fpetercollingridge.appspot.com\u002Fsvg-editor\">SVG Editor\u003C\u002Fa> remove unnecessary attributes, whitespace etc., resulting in reduced file sizes.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>raster images: represent an image by encoding the individual values of each pixel within a rectangular grid. They are suitable for photographs and other images.\u003C\u002Fp>\n\u003Cp>Because JPG compresses the data to be much smaller, it is the preferred images type for photographic images. If the image has transparency, PNG is favorited.\u003C\u002Fp>\n\u003Cp>For SVG's and PNG's, make sure that the exported assets have the right fill colours and transparency where necessary (not the background color of the document in which they were made).\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"compressed\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"compressed\"> ..are compressed \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">You can reduce image file sizes with minimal image quality loss by using compression tools like \u003Ca href=\"https:\u002F\u002Ftinyjpg.com\u002F\">TinyJPG\u003C\u002Fa>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"progressive\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"progressive\"> ..are progressive \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>There are two kinds of JPGs: baseline and progressive. A baseline JPG is a full-resolution top-to-bottom scan of the image, and a progressive JPG is a series of scans of increasing quality. The progressive method has a positive effect on the perceived performance.\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\u003Cimg itemprop=\"image\" src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1545389361-baseline-jpg.gif\" alt=\"an example of a baseline jpg\" title=\"baseline jpg\" \u002F>\n\u003Cfigcaption>An example of a baseline JPG\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cfigure class=\"content-figure\">\u003Cimg itemprop=\"image\" src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1545389365-progressive-jpg.gif\" alt=\"an example of a progressive jpg\" title=\"progressive jpg\" \u002F>\n\u003Cfigcaption>An example of a progressive JPG\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Using the progressive method in your image is easy: Simply save your JPEG images with the 'progressive' option.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"high-resolution\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"high-resolution\"> ..are high resolution proof \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">To cater for high-resolution displays, you need two images: a normal resolution and a high-resolution image (@2x). The @2x images can have a high compression rate. High compression doesn't affect the final image that much: since that image is more than twice the resolution of the display size, it also looks sharp on retina screens. High compression will decrease the file size of the images.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"really\" data-individual-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"really\"> Is it really an image? \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cp class=\"expandible-content\" data-expandible-content=\"\">Often, static charts - like pie or bar charts - are represented by images. However, those images have some accessibility issues, since they provide very little information about the data to color blind people and users of screen readers. An ALT text generally doesn't do justice to the complexity of a chart. Luckily, in most cases, instead of using an image, we can construct graphs as HTML. So before deciding to create an image, think about whether or not the data can be visualized using HTML.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli class=\"top-list-item\" data-expandible=\"\">\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"video\" data-collective-input=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"video\">Video\u003C\u002Flabel>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" data-expandible-handle=\"\" class=\"expandible-handle\"> \u003Cspan class=\"expandible-handle-text\">Show more info\u003C\u002Fspan> \u003C\u002Fbutton>\n\u003Cdiv class=\"expandible-content\" data-expandible-content=\"\">\n\u003Cp>The best solution to have videos working, including fallbacks for older browsers, is the use of embeds. Youtube, Vimeo, etc. provide easy embedding of their videos. The control over these videos is a little limited but is enough in most cases.\u003C\u002Fp>\n\u003Cp>If videos can't be hosted on an external service which provides an embed link, the videos should be delivered in three different formats to make sure they will be visible on all common modern browsers\u002Fdevices. The different formats are:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>WebM\u003C\u002Fli>\n\u003Cli>Ogg Vorbis\u003C\u002Fli>\n\u003Cli>MP4 (H.264)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Ca href=\"http:\u002F\u002Fwww.mirovideoconverter.com\u002F\">Miro Converter\u003C\u002Fa> is a free application which can convert MP4 files to other formats on Mac.\u003C\u002Fp>\n\u003Cp>Older browsers which don't support these formats can fallback to Flash movies. This fallback provides limited control and usually doesn't give the best quality.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":159,"id":169,"title":170,"body":171},"458660","One more thing..","\u003Cp>\u003Cspan>If you have checked all the boxes in this list, you're good to go and you can hand you're assets over to development. However, there's one more thing you might want to pay attention to: naming your assets. Using naming conventions ensures consistency and makes sure that files are easy to find. Some things to keep in mind when naming your assets:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":159,"id":173,"title":150,"body":174},"563731","\u003Cul class=\"encore-list\">\n\u003Cli>\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"english\" data-individual-checkbox=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"english\"> Always use English names \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"slugify\" data-individual-checkbox=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"slugify\"> Always use lowercase and hyphenated file names, like a slug. You can use \u003Ca href=\"https:\u002F\u002Fcodeofaninja.com\u002Ftools\u002Fonline-slugify\">Online Slugify\u003C\u002Fa> for this. \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cdiv class=\"checkbox\" data-checkbox=\"\">\u003Cinput type=\"checkbox\" id=\"descriptive\" data-individual-checkbox=\"\" \u002F> \u003Clabel class=\"label-text\" for=\"descriptive\"> Choose descriptive names for your Photoshop, Fireworks or Sketch files (or whatever application you are using) and for the layers within that file. Never use version numbers in production assets. \u003C\u002Flabel>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003C\u002Ful>",[176],{"title":177,"body":178,"links":179,"mailchimpValue":150,"mailchimpName":150,"mailchimpId":150,"formType":150,"contactPerson":143},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[180],{"__typename":181,"id":182,"title":183,"link":184},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":185},"jobs",[],[],1776256175583]