3e Project Preparation - Our-Company-Ltd/our-workflow GitHub Wiki

Responsive Breakpoints

The responsive breakpoints define at which screen width/height and orientation the layout of your website will change. It's not the platform or device which is relevant here but the size of the browser window in pixels.

Example:

   Layout A
   0px → 768px

   Layout B
   769px → 1024px

   Layout C
   1025px → 1200px

   Layout D
   above 1200px

PageType Layouts

The Files you deliver can be in .indd, .sketch, .html .jpg or .pdf format and should contain all PageTypes for each one of your defined layout steps.

  • Layout for each step

Sitemap

The sitemap shows the complete structure and hierarchy of all PagesTypes in relation to eachother. This can also be a simple drawing.

  • Sitemap

Image Containers

Images on the web are shown inside containers. So we need to define how they will be shown inside the container.

Options: 

   COVER 
   the image is cropped to fill the whole container while keeping its aspect ratio

   CONTAIN 
   the image will resize to fit inside the container either by width or height keeping its aspect ratio

   FILL
   the image will be stretched to fit and fill the whole container loosing its aspect ratio
  • Image containers

Web Fonts

Any Font can be used on the web but it needs to be prepared for web. Please provide us with the following webfont files.

  • .woff
  • .woff2
  • .tff (Windows)

Base FontSizes

Each layout step will have one Base FontSize from which all other FontSizes will be multiplied.

Example: 

   768 → 1024px
   Base FontSize = 8px

   1025 → 1280px
   Base FontSize = 12px

   1281 → 1600px
   Base FontSize = 22px

Font Styles

The FontStyles include attributes such as size, color, italic, bold, underlined, UPPERCASE etc.

  • all FontStyles
Example: 

   TITLES
   Size = Base FontSize x 1.2
   Style = italic
   Color = #13E5FF
   Align = left

   TEXT
   FontSize = Base FontSize
   Color = #13E5FF
   Style = Upper Case
   Align = left

   CREDITS
   Size = Base FontSize x 0.6
   Style = bold
   Color = black

IconFonts

All vector based monochrome icons such as logos, social media icons, arrows, close or menu buttons in the website can be embedded in an own font. In order to create this font the icons need to be saved size relative to eachother as sepparate .svg files. The icons also need to be converted to 'compound paths' in Illustrator. From these .svg files the custom icon font files can be generated. We usually do it here: www.fontello.com

  • IconFont.woff
  • IconFont.woff2
  • IconFont.tff (Windows)

Cursors

The cursor can be replaced by an image (arrow etc.) and can have a maximum size of 32 x 32px format can be .png .gif .jpg or .svg (depending on browser compatability)

Favicon

Favicons are images associated with your website and can be generated here: www.favicon-generator.org

  • .ico Favicon

Image Quality

In general images should be prepared as big as possible in pixel size but as light as possible in terms of memory size (KB's). The format can be .png, .jpg, .gif or .svg

Touch Screens

How will rollover styles react on touch devices? buttons, links, images etc.

User experience

Example:
   login button on screen => layout for the login form, forgot password, error messages....

   What if the screen is touch (no rollovers)

Forms

For Forms (Contact, Application etc.) we need all fields and buttons to be specified. In addition we need to know what happens after click on 'send' including recepients email address, success and error messages. Also a valid SMTP server with username and password is required.

Browser compatability

Our standard service ensures compatibility with all major browsers across all major operating systems covering 96% of all browsers in use worldwide. Get more information about browser usage here & here. Further backward compatibility specifically needs to be asked for by the client.