DeveloperTutorials for Web Developers & DesignersOther

Website Design & Cutup

Recommended practices for preparing website designs for implementation on Oncord.

"Website cutup" is the practice of converting a website from an image format (such as a Photoshop or Illustrator file) to a collection of HTML files, CSS styles and images. It's essentially the practice of turning an image into a website prototype.

After cutup, a website can then be implemented on a website platform such as Oncord.

By following the guideline below you will make the cutup process easier.

1. Logo & Images

With the rise of modern screens and smartphones using Retina or HDPI displays, higher quality images are now required for use on the web.

Use JPG, PNG or SVG image formats with an RGB colour profile.

SVG images render nicely on the web, and are ideal for use with a logo, icons or other vectors.

PNG images work well for icons, graphics with fewer colours, or images that require transparency.

JPG images are ideal for use with photos, or images with more detail and a higher number of colours. 

If you supply a JPG or PNG file exactly twice the size of the required screen space, our platform will serve a crisp HDPI image for retina devices.

2. Dimension Restrictions

Canvas size: The background of the website needs to be visible in your mockup.

Fixed width websites: For websites with a centered, fixed width container, ensure that you are consistent about the size of the middle container (use rulers!).

Full width website: Consider what happens when the screen size expands. If an image background has been used, what will happen when the background area expands? 1920 pixels is the most common screen width, however it may be much larger (3200px) or smaller for mobile devices (320px).

Responsive frameworks: All modern websites should be responsive / mobile friendly. To accomplish this, your web developer will likely use a framework such as Bootstrap or Foundation.

You may provide mock-ups of how pages will appear on mobile devices, however not all web developers require this (we don't need one, but if you'd like to provide it, in most cases you only need to provide a mobile mock-up of the home page ).

3) Use a Grid System

Designing with a grid will help to ensure that your website translates to a web environment properly. The following templates are commonly used by our design team;

4) Use Consistent Margins and Spacing

Ensure that spacing and margins remain consistent throughout the designs. Keep in mind that a cutup team will be assigning style rules for margins and padding based on items such as Headings, paragraphs and layout sections. 

5) Use Layers (or Pages in Fireworks)

  1. Where appropriate, use a layer for home page designs and a different layer for content page designs. If your home page differs to your content page, separate these with layers.
  2. Distinguish elements from the background. This provides a way for background images to be separated out, so that during cut up, text and other HTML elements can be used to overlay.
  3. Name your layers. Give your layers meaningful names. Do not use "Object 7 (Clone)". But rather "Subscribe Box" and "Tag Cloud".
  4. Remove excess layers. Do not leave excess layers in your PSD files that are no longer used as it can be quite confusing for the cutup team.

6) Website Navigation

  • We recommend primary header navigation with pop-out, drop down menus only where necessary.
  • Where a drop-down menu will be used, include an example in your mockup of one menu item being hovered over and an example of the drop down box.
  • Use links which will be cohesive with the structure of the site, try to have every navigation item open an actual page (even when they have drop down items beneath them).
  • Include selected page and hover styling on navigation items where necessary.

7) Example Content

  • Headings
    • Any font can be used, provided a TTF or OTF is sent with the PSD and that you have the paid license to use and embed such fonts.
    • Google fonts are free, downloadable and render nicely on the web.
  • Bullet point list
    • If customizing the appearance of lists include an example.
  • Body text
    • Recommended to be restricted to 'web safe fonts' such as Tahoma, Arial, Verdana or Helvetica
    • Try to use websites actual copy rather than Lorem Ipsum
  • A hyperlink in the text
    • Show the difference in colour between the body and the link

8) Editable Content Region

  • Oncord allows each page to have a primary editable content region, and additional content regions where needed. Try to limit the number of additional content regions.
  • Try to simplify content in this area to allow easier editing.

9) Blog / News Posts

  • Keep the design of blog / news posts consistent. We recommend this practise becuase whenever an admin user creates a new post category page which automatically populates with posts, it uses a standard set layout.
  • Where the main function of a page is to display a list of posts, we recommend having each post consist of an image, title, short description, date and "read more" button, however you can add or leave any of these elements out.

10) Community Subscribe

  • Due to the Oncord default customer fields, it's recommended that a first name, last name and e-mail address be used as minimum when adding a customer to your database.
  • Add a compelling reason why someone would want to subscribe. Eg -"Stay up to date with the latest news in property investing".
  • Consider putting out an offer like a "Free Consultation" or "Download your free eBook".

11) Image Sliders

  • The display of the Oncord slider can be completely customized and can be any width and height. The slider is also responsive, meaning it can take up 100% of the screen width;
  • Next and previous slide controls can be images or text. They don't have to be included, however it's generally recommended.
  • You can have slide selectors as colored circles, squares or other images and place them anywhere.
  • All slides included in a single image slider need to have the same width and height.
  • You can have dynamic text in a slider, however it needs to be in the same location on each slide (advanced: you can get around this by creating a new post custom field for the text location).

12) Footer Links / Navigation

  • Useful for Search Engine Optimization.
  • Define your keywords and link to pages.

13) Other Design Elements

  • Privacy policy, terms and conditions and copyright details.
  • Define your keywords and link to pages.

14) Customizing The Cart / Order Process

  • The shopping cart can be customized by web developers, however it is generally not recommended. Overriding the shopping cart pages is quite advanced, and overridden shopping cart pages will not receive ongoing platform updates and new features.