My how times have changed.
I remember only a few years ago screens (namely websites) were optimised at 800 x 600 pixels; that then grew to a standard of 960 pixels. Gone are the days where digital was designed for a single screen size. Today we find ourselves in a resolution explosion. With thousands of different size screens in our hand, on our desk and in the living room.
With different screen size options continuing to expand and new mobile, computer and TV gadgets making their way to store shelves every day, digital designers have their jobs cut out for them. A few points to take into consideration when planning out a screen strategy (based on open standards design using HTML/CSS/Javascript) for your next website or app, follow below:
• Creating flexible/responsive designs by using CSS media queries
• Use pixel ratio media queries to assist in designing for different pixel densities (eg: The Retina display iPhone packs 329 ppi compared to the Samsung Galaxy S3 with 306 ppi)
• Use the design tags in CSS as much as you can to generate such things as Gradients, Shadows etc. as these will be pixel density independent
• The ‘text-rendering’ CSS options, specifically ‘optimizeLegibility’ are worth enabling on high pixel density screens.
• Utilising Javascript serve up optimsed images to smaller screens to save on bandwidth
• Try picking a ‘base’ starting point and look at scaling the design and content up and down
This ‘evolution in resolution’, really helps illustrate a point I am quite passionate about, and that is bringing the technical teams and creative teams closer together in collaboration. This will aid in optimising the design to change it’s layout and content depending on what screen it is being viewed on.
Taking the above points into consideration and having the tech and creative teams collaborate closer will surely save costs, prevent grey hair and produce better results.
This post was written by Chris Ongarello, Managing Director of Digital Whiteboard.
Digital Whiteboard was established to help businesses and brands understand and leverage the power of the digital landscape. Focusing on concept and strategy to deliver measurable (ROI). Digital Whiteboard achieve this by working with enthusiastic people who share a common goal to create amazing innovative solutions to challenges.
Like Truly Deeply, Digital Whiteboard are part of E3, the global network of independent branding, marketing and digital agencies. As the official E3 agency for Liechtenstein, Digital Whiteboard has direct access to over 500 international specialists. They get unique know-how and global insights from different markets, sectors and disciplines. Depending on need they integrate E3 international specialists into their projects.