Responsive design
advertisement
Responsive design - Bedrock to our site Responsive site templates included Think mobile first • As Fortum web sites are fully responsive, all old and new publishers and developers should start to think mobile first. This means that you should always think what your content will look like, if the available space on screen is only mobile phone screen size. • This document provides the general principles and guidelines for Fortum’s visual web appearance. These guidelines should be used as a foundation for all our digital services and communication. The look and feel should be user friendly in all devices, thus the guidelines for different devices may vary. You can keep this manual open whenever you do publishing, as we have provided you with template specific instructions for all content, images, banners, HTML5 content etc. • Note that all fonts, link styles etc. have been predefined and should not be changed. • The design has been verified by tests on our target groups and by treating these guidelines with respect, we treat our business and customers with respect. 2 The grid and content area widths • The grid is a layout system. It is the foundation for how elements should be applied and aligned on our web pages. This system is critical in helping us maintain a consistent design that is clear and easy to understand. Always respect the grid. • Note that with the responsive design, the grid will change according to the device used! • Responsive layout can be toggled on by adding "responsive" CSS class to the body element (example: <body class="responsive">). 3 Breakpoints, layouts and columns • The Fortum site contains four layouts and three breakpoints to separate them. The minimum proper expected width of layout is 320 px. – – – – Phone Tablet Desktop Wide desktop 320 px ≧ viewport-width < 768 px 768 px ≧ viewport-width < 961 px 961 px ≧ viewport-width < 1280 px 1280 px ≧ viewport-width • The Fortum site grid is based on 5 columns, each 170 px wide, with 20 px gutter in between. The page is centred to the viewport. • The wide desktop layout is identical to desktop layout, but the column sizes and text sizes bumped up a bit to 200 px wide column and 30 px wide margin. • The mobile is single column, 100 % wide with 10 px margin. • There is one exception: Target page, which contains 4 columns, is stretched to fill 5 columns wide (each of the four columns is 217/257 px wide). 4 Remember safety zones for touch screens! LINKS: • The minimum height for the clickable area of links is 24px • All links have 5px padding on top and bottom • In addition the links in the link list elements span over all available horizontal space • When possible, the links also have at least 5px margin around them (e.g. pagination links, link lists) • Example (clickable area surrounded by blue border, margins indicated with orange): 5 Remember safety zones for touch screens! RADIO BUTTONS AND CHECKBOXES: • All radio buttons and checkboxes have labels linked to them • Labels can be used to toggle radio buttons and checkboxes • Labels 10px padding on top and bottom, and 5px padding on left and right • Example (clickable area surrounded by blue line): 6 Supported browsers and devices • ALWAYS CHECK YOUR LOCAL SITE'S SNOOBI OR GOOGLE STATISTICS TO DEFINE THE LATEST DEVICES AND BROWSERS THAT YOU NEED TO TEST YOUR CONTENT WITH. NOTE THAT EVEN WITHOUT CHANGES, IT IS GOOD TO CHECK YOUR MOST USED SITES IN THE NEWEST DEVICES MINIMUM EVERY 6 MONTHS! 7 Supported browsers and devices End user browsing should support at least the following browsers, according to a scale A, and B. • The site is tested with A-grade browsers for: – – – – Functionality (functionality e.g. navigation, forms etc. work as they should) User interface (general UI layout is intact and everything is in its place) Visual details (visual details are implemented as designed, the look and feel is “pixel perfect”) Popular browser extension Firefox Adblock Plus • The site is tested with B-grade browsers for: – Functionality (functionality e.g. navigation, forms etc. work as they should) – User interface (general UI layout is intact and everything is in its place) • The number of supported browsers is limited for the following reasons: – Testing work grows quickly with the number of browsers to be supported, which increases costs and calendar time needed for testing. – Building testing environments for browsers on different platforms and versions is expensive and time consuming. – The number of end-users utilizing non-supported browsers is expected to be low. 8 Supported browsers and devices • A: – Chrome latest version – IE latest version (IE11) – Firefox latest version – Safari latest version • B: – Chrome the previous major version – Safari the previous major version – Firefox the previous major version – IE9 9 Supported browsers and devices • NOTE that device testing needs may vary by country alot!! • The responsive design has been tested with these devices: – – – – – – – – – – – 10 Nokia Lumia 930 Nokia Lumia 830 Samsung Galaxy S4 iPhone 5S iPad iPad mini Samsung Galaxy Tab 10.1 Samsung Galaxy Note 3 Samsung Galaxy Note 4 Samsung Galaxy Tab Laptop Target site Target page, which contains 4 columns, is stretched to fill 5 columns wide (each of the four columns is 217/257 px wide). Note that the space between the webzones is 31-30-31. It’s shown professional publishing skills to have manual liftups that look good with the other banner images. 11 Target site –grid on wide desktop layout 12 Target site DESKTOP is almost the same as wide desktop, only smaller 13 WIDE DESKTOP Target site TABLET VIEW 14 MOBILE VIEW, note the second row manual lift up images!! Target mobile site • As you may have noticed in the previous image, the manual lift-ups that are located on the second row, change shape. • Thus images that have their focus point on the right side of the image are recommended as the left side is overlapped with the links and their background image. • Note also that the description text under the image is not shown in mobile. 15 Target site in mobile 16 Normal content page on wide desktop layout • Here you can see the grid for the normal site in the wide desktop layout • On normal page 3 column content is centered to 4 page column area 17 Normal page WIDE DESKTOP DESKTOP is almost the same as wide desktop, only smaller 18 Normal page MOBILE VIEW TABLET VIEW 19 Wide content page on wide desktop layout • Here you can see the wide content site’s grid on wide desktop layout. • On the wide site 4 column content is centered to page. 20 Wide site • Markets in Finland has made really impressive and modern looking sites for their electricity products. See what you can do e.g. here: http://www.fortum.com/countries/f i/sahko/sahkosopimus/tarkkasopimus/pages/default.aspx • Or any site under this one: http://www.fortum.com/countries/f i/sahko/sahkosopimus/pages/def ault.aspx 21 Wide site WIDE DESKTOP DESKTOP is almost the same as wide desktop, only smaller 22 Wide site MOBILE VIEW TABLET VIEW 23 Start page 24 • We’ll try to budget money to modernise the start page template during 2016.
