Zobrazit stránku Starší verze Zpětné odkazy Přejmenovat stránku ====== Document sizes ====== Mobile: 320 - 767px Tablet: 768 - 1023px Desktop: 1024px+ The designs should be always made for the lowest resolution in its category, e.g. 320px for mobile, 768px for tablet. Desktop can be made in any size above 1024px. Note that the main container, which holds all the content of the page, does not stretch past 1248px. Nevertheless backgrounds can stretch to the full size of the window and elements can be pushed outside of the main container as well. ====== Icons ====== All icons should be provided in vector SVGs. Ideally, all svgs should have square canvas in order to easily position them against other content. //TODO: List all the available icons on the website at the moment// ====== Fonts ====== The website uses Proxima Nova for all the text found on the website. Available font weights are: 300: Light 400: Regular 700: Bold 900: Black Base font size for the text is 16px. All the headlines are relative to the base font size Headline 1: 48px [3 x 16px] Headline 2: 28.8px [1.8 x 16px] Headline 3: 20px [1.25 x 16px] Headline 4: 18.4px [1.15 x 16px] Headline 5: 14px [0.875 x 16px] Headline 6: 12px [0.75 x 16px] ====== Buttons ====== There are two button variants Regular button Font size: 12px [base font size * 0.75] Line height: 14.4px [1.2 * button font size = 1.2 * 12px] Spacing: 16.8px [1.4 * button font size = 1.4 * 12] Total height: 48px [line height + top spacing + bottom spacing] Big button Font size: 20px [base font size * 1.25] Line height: 20px [1 * button font size = 1 * 20px] Spacing (sides): 28px [1.4 * button font size = 1.4 * 20] Spacing (top/bottom): 14px [0.7 * button font size = 0.7 * 20] Total height: 48px [line height + top spacing + bottom spacing] ====== Banners ====== Banners should be png or jpg images. You can decide based on its content, in most cases, if the banner contains a photo it should be a jpeg, if it's graphics only, then it should be png. Alternatively, if the png is smaller in data size, then png should be used. ===== Top of the page ===== {{ :skoda-ep:skoda-wlc-2016:technical_information:banner-top.png?200 |}} Mobile version: 700px (must be readable from 250px) Tablet version: 830px (must be readable from 576px) Desktop version: 1056px (must be readable from 832px) ===== Teaser banner (between articles) ===== {{ :skoda-ep:skoda-wlc-2016:technical_information:teaser-banner.png?100 |}} Teaser banner MUST have exact aspect ratio or it will be cropped on sides/top and bottom Mobile/Tablet: * landscape version * width: 740px * height: 416px * must be readable when scaled down to 292px width = much larger font Desktop: * portrait version * width: 384 px * height: 457 px * must be readable from 310px width ===== Sidebar ===== {{ :skoda-ep:skoda-wlc-2016:technical_information:banner-sidebar.png?200 |}} Mobile version: 740px (must be readable from 292px) Tablet version: 310px (must be readable from 224px) Desktop version: 384px (must be readable from 310px) ====== Featured image ====== There are several views of the featured image, each can have different dimensions so it is usually important to place the image focus in the center. When the image does not fit the container around it, it is cropped either on sides or on top and bottom. Moreover the featured image can have two layouts inside an article detail. Following are definitions of the featured image sizes in various contexts: ===== Listings (Homepage, category view and similiar) ===== Aspect ratio: 16/9 (width = 16 points, height = 9 points) Examples: * 160 x 90 * 1024x576 * 1920x1080 The first position in the grid has special behaviour for desktop and mobile: ==== Mobile ==== Aspect ratio: 1/1 (width = height) Examples: * 160 x 160 * 1024x1024 * 1920x1920 ==== Desktop ==== Due to the layout in the desktop view, the first article position must be slightly offset from the 16/9 aspect ratio, therefor the image has an extra few pixels at the bottom. Examples: * 1920x1080 would have extra 25 pixels at the bottom and would need to be 1920x1105.5 px * 1024x576 would result in 1024x590 * In the desktop view, the image has a size of 792x456 ===== Detail (Fixed layout) ===== Width: variable, scales with window width, limited to 1380px max Height: * Desktop: 600px * Mobile: 390px At the highest resolution, the image has size of 1380x600 pixels resulting in an aspect ratio of 23/10 At the lowest resolution, the image has a size of 320x390 pixels, resulting in an aspect ratio of 32/39, or approximately 11/13 ===== Detail (Fluid layout) =====