Technische specificaties voor online campagnes

  •  

    Webvertising: Delivery of material and deadlines

    • Bannering material must be delivered three days before publication.
    • Material must be delivered to support@jobat.be 

    Back  

     

    Webvertising: Formats and file sizes

    For all formats and file sizes and technical guidelines we'd like to refer you to these tech specs
    The formats we are able to provide are listed below:

    Medium Rectangle

    • 300x250 pixels
    • Max. 70 kb

    XL Leaderboard

    • 995x123 pixels
    • Max. 70 kb

    Back 

     

    Back 

     

    Company page

    A bussiness page is an .html template which shows up on your company page. Some examples of these can be found here.

    T-Office
     

    Nike 

     

    Company page templates should be responsive. Below you can find a couple of tips.

    What you should do:

    • deliver 1 html-page that is responsive!
    • use div-tags to build structure
    • use embedded css in style tags above your main div (do not use inline css or a separate stylesheet)
    • include a target=”_blank” in all links
    • Company page extension .html

    What you should particularly not do:

    Do not include fixed values, for example: width 600px
    Fixed values do not readjust to smartphone and tablet sizes, etc.
    Solution: use a width percentage value and include a max-width value in pixels.

    Do not use tables for the layout/structure of your page.
    Tables do not adjust to smartphone and tablet sizes, etc. Only use tables for table data.
    For example, for a price list, lists, etc.
    Solution: 

    • use divs to build structure
    • use media queries

    Preferably do not use flash anymore if you want to get the same result on all media.
    Flash is not supported and thus will not be visible on smartphones and tablets and even some modern browsers are dropping support for flash.
    Solution: use media queries.

    Do not use images in the layout of your html For example, rounded corners. Images do not scale up or down
    Solution: Either use no images or use css3 for the modern browsers Images, whatever you choose to use, please include a width with a percentage value and include a max-width value in pixels

    Do not use inline css
    Solution: use embedded css

     

    Back  

    Layouts

    • You can make different layouts to display your jobs. You can choose a layout of your choice when you publish a job. How to create a new layout: Click on the page Settings on Layout for jobs.

      layout-settings 
    • Click on the button “Add Layout”.
    • First you fill in the Name of the layout; ex. “Marketing jobs”.
    • Then change the settings of your Layout. You immediately notice your changes in the preview.

      layout-preview 
    • You can choose a layout when you post a new job on Jobat.be

      layout-select 

    Back 

     

    Mailings

    General

    • Deliver 1 HTML document
    • Please include a title for the mailing
    • Please provide e-mail addresses for the test mails
    • The mailing may not consist of 1 large image

    Tips and Tricks

    Design 

    1. Width of mail
    Keep the width of the mail under 650 pixels.

    2. Design above the fold
    It’s okay for an email to horizontally scroll. It’s not okay for a recipient to need to vertically scroll. Make sure your key elements are at the top (logo, call-to-action, navigation, primary subject matter, sharing functionality, etc.) and by top we mean, the first 400 pixels.

    HTML 

    1. XHTML compliant
    Every tag should be well-formed.
    This means:

    • Elements should be closed
      Example:
      <p>text</p>
      <br />
    • Attribute values must be enclosed in quotation marks
      Example:
      <td width="10">text</td>

    2. Design with tables
    Tables are the only way to assure a correct rendering of an html mail in most mail-clients today.
    Here are some basic rules:

    • If you don’t need spaces between rows and columns, set cellpadding=”0” cellspacing=”0”.
    • Set a width in pixels (no %) to each td and also on the table.
    • Make sure that the sum of all columns (td) of the table is exactly the same as the width of the table. This to avoid that the table size is different in different mail clients.
    • Don’t create complex colspans and rowspans. It might work great the first time you send the template. It can also make content revisions a nightmare for the next edition. Use them sparingly and never together on the same table unless you know that content will remain consistent in future editions.
    • To give the body a background color, you have to use a 100% width table within a div and set the background color on both elements.(see example)
    • To center a mail, set align=”center” on the second table.  or provide <center> tag (see example)

    Example:
    <div style="background-color: #050505">
      <table width="100%" bgcolor="#050505">
        <tr>
          <td height="100%">
            <table width="60" cellpadding="0" cellspacing="0" align="center" border="0">
              <tr>
                <td width="10"></td>
                <td width="50"></td>
              </tr>
              <tr>
                <td colspan="2"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
     
     

    3. Use inline CSS
    Don’t embed external or internal CSS classes or IDs. There are exceptions to this rule, but for the most part, if it starts with <style>, it will have mixed results across multiple email clients.

    If you choose to develop a mail with css in a <style> tag you can inline it with this tool: Inliner 

    CSS Quick Reference
    Cascading Style Sheets (CSS) ara an extremely useful tool when building html emails, but there are many properties that have inconsistent results across various email clients. below is a list of same basic CSS properties and how they generally perform.

    Good Performer:

    • font, font-family, font-size, font-weight, font-style
    • text-align, line-height, text-decoration, text-indent
    • color, background-color
    • border
    • height, width

    Inconsistent Performer

    • background, background-image, background-position
    • margin, padding
    • :hover, :visited, :active
    • clear
    • display
    • float

    Avoid if possible

    • text-overflow, text-shadow
    • position, z-index
    • list-style-image
    • opacity
    • border-image, border-radius
    • box-shadow
    • top, right, bottom, left

    Below are a few examples of how to write proper inline CSS:
    <p style="color:#ff0000">red text></p>
    <a href="#" style="color:#ff0000; text-decoration:none;" target="_blank">website</a>
    <td style="border:1px solid #000000; color:#ff0000">Table cell contents</td>
     

    4. Use a transparent image to create spaces
    If you need spaces between elements, don’t use padding or margin, but make use of a transparent image. Create an image fe: Pixel.gif of 100px width and 100px height and use it like below:

    <td width="1" height="10"><img src="pixel.gif" alt="." width="1" height="10" /></td>

    (Outlook 2007 has a weird behavior rendering images. Having a small (e.g. one pixel) image, and stretching it with width or height attribute to render borders for example, Outlook 2007 renders it only to 66px!!!)

    5.Use hex-values
    Avoid using RGB(255,0,0) values, use the full hex (#FFFFFF). Don't use #fff.

    6. Use web-safe fonts
    Here a few of the most common web-safe fonts:

    • Arial
    • Helvetica
    • Comic Sans MS
    • Courier New
    • Tahoma
    • Times New Roman
    • Trebuchet MS
    • Verdana

    7. Text in column
    Set a font on every td that contains text.

    <table width="60" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="100" style="font-family: Arial; font-size: 14px;">Title</td>
      </tr>
      <tr>
        <td width="100" style="font-family: Arial; font-size: 12px;">Some text</td>
      </tr>
    </table>
     

    8. Lists
    Do not use <ol> or <ul> but use a table instead.

    <table width="70" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="15">•</td>
        <td width="55">item 1</td>
      </tr>
      <tr>
        <td width="15">•</td>
        <td width="55">item 2</td>
      </tr>
    </table>
     

    9. Use of images
    Some basic rules:

    • Don’t use images for important content such as headlines, links, or calls-to-action. Or if you do, make sure there is an html backup. Showing images can be turned off, so the key elements of your email are useless.
    • Use image widths & heights. This way your design will maintain its basic structure when images are turned off.
    • Set style="display: block;" to each image to avoid extra spaces around images
    • Use alt text for your images and make it say something compelling about the subject matter.
    • Close your image tag like this />
    • If there is a hyperlink around the image, set border="0" on image tag.
    • Avoid the use of background-images. Outlook 2007 & 2010 WILL NOT recognize them.
    • Use absolute paths. Host images on your website or let your email service provider host them for you. Then make sure your image paths are absolute and point to the full URL, like this: http://www.yourwebsite.com/yourimage.jpg

    <img src="http://www.yourwebsite.com/yourimage.jpg" width="150" alt="name" style="display: block;" border="0" /> 

    10. Special codes
    To avoid problems with the rendering of special signs, you should use the HTML or ASCII code.
    Fe. replace € by &euro;

    11. JavaScript
    Don’t use JavaScript or other dynamic scripts. Even if a SPAM filter happens to let your email through untouched, most email clients will not allow these scripts to function.

    Back 

     

    Videopostings

    You can add video to your jobpostings, there are however some limitations as to how they can be used.
    Provide us with a link to your site hosted on either your personal website or a site like Youtube or Vimeo.

    When using Youtube or Vimeo please make sure the video can be embedded without issues. This means no private video's or hidden video's on either youtube or vimeo.

    Back 

     

    Contacteer Jobat.be

    Lukas Terwingen
    Webmaster
    02/467 48 35
    lukas.terwingen@jobat.be 

    Steven Vermeulen
    Response Specialist
    02/467 48 36
    steven.vermeulen@jobat.be 

    Dries Mertens
    Online Customer Support
    02/467 48 37
    dries.mertens@jobat.be 

    Hendrik Nuyttens
    Site Manager
    02/467 48 34
    hendrik.nuyttens@jobat.be 

    Back