8/9/2019 Why Front End Development is Crucial
1/17
1
Tips and best practices for HTML and CSSdevelopment
Release Date: June 2010
Author: Fabien Doiron, Creative Technologist
Why front-enddevelopment is
crucial for a
successful CMSbuild.
021
8/9/2019 Why Front End Development is Crucial
2/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
2
Table of Contents
Introduction........................................................................................................................................................................... 3
Gather the requirements....................................................................................................................................................... 4
Development......................................................................................................................................................................... 7
Conclusion .......................................................................................................................................................................... 16
About non~linear creationss .............................................................................................................................................. 17
8/9/2019 Why Front End Development is Crucial
3/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
3
IntroductionCoding effective templates for a content management system (CMS) driven website is often over looked and result in a poor
CMS build. The content of this document is backed with many years of experiences with various CMS and is intended to
share an insight on what can make the difference between success and failure. We want to share the expertise gained with
these numerous successes to help avoid common issues that arise.
HTML/CSS is the foundation of a website, and when done properly, allows content author to expand a site while maintaining
the look and feel.
HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. It provides a
means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. - Wikipedia
CSS (Cascading Style Sheets) is used to separate content from the visual. It builds the look and feel of a website taking itfrom flat design comps to functional pages. The best CMS developers will still run a high risk of failure without a proper HTML
foundation. It is like the worlds best carpenter trying to build a house without a solid foundation.
In the sections that follow, we will cover the two main phases of front-end development, along with somebest practices.
1. Gather the requirementsa. This ensures the front-end developer (developer in charge of creating the HTML and CSS) is fully aware of
the graphic designers vision as well as the CMS developers technical plan to help minimize the room for
error.
2. Developmenta.
HTML developmentb. CSS development
8/9/2019 Why Front End Development is Crucial
4/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
4
Gather the requirementsA lot needs to be done during this phase to ensure the development matches the requirements. The front-end developer(developer in charge of creating the HTML and CSS) must be in close contact with both the graphic designer and CMS
developer to understand their needs and ensure the HTML meets them.
Knowledge transfer with graphic designer / developer
During the knowledge transfer with the graphic designer, as a front-end developer you must understand the vision behind the
design and the functionality of all components. A lot of times, crucial errors are made simply because there was a
misunderstanding over the design. It is important to note that the final design will most likely not contain the same information
when the site launches. Over the course of a project life, the content may get out dated, the site architecture may get
tweaked, and for those reasons, the code needs to be as flexible as possible.
Checklist of items to review with the graphic designer:
1. What if the content grows? How is the content area and content blocks (navigation, sub navigation, header, footer,etc.) flexible?
a. Unlike print design, website design needs to allow expansion and growth. Many factors can affect thecontent and the design needs to accommodate these. A user can increase the browser font, navigation
could grow with time, and new content could be longer/shorter than the original content used.
- See figure 1.1 and figure 1.2
2. Are all the default HTML tags defined and consistent?Content area was designed at a fixed height. The screen on the right shows the
content overlapping the section below instead of pushing the entire content down.
This means the content for each section is restricted.
Figure 1.1
8/9/2019 Why Front End Development is Crucial
5/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
5
Content area was designed to allow flexibility. In this example the font size was
scaled up and the content block grew. This allows the content to change and thedesign to maintain the same look and feel intended.
Figure 1.2
Both designs are taken from CSS Zen Garden (http://www.csszengarden.com/)
Checklist of items to review with the developer:
1. Which areas are rich text?a. The importance of knowing which areas will be Rich Text based is to ensure default HTML is used. This
reduces the margin for error when a content author is inserting content. More explanation to follow in the
HTML development section.
Browser support
Once the design and the functionality are understood, the next step is to know which browser support is needed. This can
affect the CSS portion because not all browsers support the same styles. Heres a list of the most common browsers and the
statistics:
2010 IE8 IE7 IE6 Firefox Chrome Safar i OperaMay 16.0% 9.1% 7.1% 46.9% 14.5% 3.5% 2.2%Apr i l 16.2% 9.3% 7.9% 46.4% 13.6% 3.7% 2.2%
Stats taken from http://www.w3schools.com/browsers/browsers_stats.asp
While all browsers mildly render sites differently, IE6 is generally where a front-end developer will run into the most problems.
There are quite a few workarounds that will limit those headaches and these will be discussed later in the document.
8/9/2019 Why Front End Development is Crucial
6/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
6
Accessibility requirements
Accessibility falls into 2 main categories: people based
and technology based. On the people side, accessibility
involves a wide range of disabilities, including visual,
auditory, physical, speech, cognitive, language, learning,
and neurological disabilities. On the technical side it
involves the browser of choice, the Internet connection,
the hardware, and many more.
It can be frustrating to open a website, and not be able to
find the information you are looking. This could be the
result of a bad navigation, a bad design, poor choice of
words Now for example purposes, imagine having to
navigate that same site if you had a visual impairment.
Taking a step back, the minimum requirements touse the web are:
An internet connection A web browser
However, when looking at the requirements for aspecific site, the list can grow significantly, youmay need:
A high-speed internet connection A keyboard and/or mouse A minimum resolution (ex: 1024x768) A specific browser A specific plugin (Flash Player, PDF viewer ) JavaScript Great vision and/or lack of colour blindness And many more
The World Wide Web Consortium (W3C) has a content
accessibility guide to follow in order to make web content
more accessible to people with disabilities.
(http://www.w3.org/TR/WCAG20/) Although following
these best practices will not guarantee full accessibility for
all disabilities, it will ensure the following common pitfalls
are addressed.
Text alternatives for all non-text elements Distinguishable, proper use of
o Colouro Contrasto Text size
Keyboard accessible
At the rate the web/technology is evolving, more people
meet many technological accessibility requirements every
day. However, there are still a significant percentage of
users that do not meet the average requirements such as
the latest browser version, the latest flash player For
example, referring back to browser statistics table, Internet
Explorer is the browser of choice for around 33% of
viewers, with 8% being 2 versions behind. Reviewing
statistics for each project individually will provide vital
information on the targeted users, including browsers
used, plugins installed, whether JavaScript is enabled.
This information is vital in understanding the minimumtechnology accessibility required. Understanding the W3C
accessibility guide is extremely helpful for statistics that
cannot be measured such as blindness, vision
impairment etc.
8/9/2019 Why Front End Development is Crucial
7/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
7
DevelopmentOnce all the requirements have been noted and signed off, the development phase begins. Please note the content andexamples to follow are not intended as the only solution but simply as a set of best practices that we have developed over the
years. This section will be split into 2 phases: HTML development and CSS Development.
HTML DevelopmentFirst note is HTML is based solely on markup. When coding the templates, a clean and ordered markup should be the priority
The look and feel of the website should be controlled by CSS and only addressed at that phase.
DOCTYPE importance
By the HTML and XHTML standard, a DOCTYPE
(document type declaration) informs the validator the
version of (X)HTML used. This declaration must be present
at the very top of every page. It is a key component of
compliant web pages and your markup and CSS will not
validate without it.
DOCTYPES are also essential to the proper rendering of
web pages in compliant browsers. Using an incomplete or
outdated DOCTYPE, or none at all, will throw your
browsers into Quirks mode, where the browser assumes
youve written old-fashioned, invalid markup, and will try to
handle an (X)HTML document like older browsers from the
mid-to late '90s did.
Weve recently made the transition into the HTML 5
DOCTYPE listed below.
Not only is it a lot simpler to remember than previous
DOCTYPES, it also renders the site in all browsers in
Standards mode eliminating a lot of the IE6 issues right off
the bat.
Two other main DOCTYPES were XHTML 1.0 Strict and
XHTML 1.0 Transitional with Strict being the ultimate goal.
XHTML 1.0 Strict:
XHTML 1.0 Transitional:
8/9/2019 Why Front End Development is Crucial
8/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
8
Compare the two examples below and while both pages contain the same copy, notice how much easier it is to scan a page
when the HTML is properly structured.
Tagline
Lorem ipsum dolor
Tagline
Lorem ipsum dolor
Avoid unnecessary markup
Some designs are fairly complex and use a lot of visuals to
complement the content and will require more containers
than a normal site, but this goes back to the previous
point, where you build the HTML based on the content not
the design.
First, in order to avoid unnecessary markup, you need to
understand the difference between block-level elements
and inline elements.
Block-level elements such as p, table, h1 h6, div are
tags that generate a break line and are flexible for
containers. They have 5 spacing properties: height, width,
margin, border and padding.
Inline elements, such as span, a are tags that do notgenerate a break line and are not as flexible to be used as
containers.
Note: Block-level elements are not allowed inside aninline element.
8/9/2019 Why Front End Development is Crucial
9/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
9
HTML best practices would suggest using code block
three, avoiding any unnecessary markup. A general rule of
thumb is: Only if there is more than one area inside a
section should it be wrapped in a container. In the
example above, there is a logo and navigation inside the
header area, wrapping them inside a container is a way to
group the sections.
In the first example, a div was used to wrap both the logo
and the navigation separately. Each of them is already a
block-level element (p, ul) meaning the div tags are
useless. All styles that would be applied to the div tag can
be applied to p and ul tags.
As for using too many div tags or any other markup,
classes and ids should also be limited. With any HTML
templates, even more so for CMS, all default tags should
be used as much as possible. The use of classes and ids
during the HTML development should be limited to
containers. Keeping classes to a minimum while building
the HTML adding them as necessary during the CSS
development can limit common issues.
This is extremely important for CMS builds because all
sections that are rich text based, will allow content authors
to use a WYSIWYG editor (What You See Is What You Get
to update the content. If classes or ids are specified in the
content area, then in order for the content authors to keep
the look and feel intended, they will need to manually
insert these classes increasing the risk of brand and layout
guidelines not being followed. The simplest way around
this is to use the default tags, which will guarantee
consistency. If for any specific area, a default tags look
and feel is different than the default for the rest of the site,
inheritance should be use in the CSS.
Take a look at the 3 code blocks below. All three can produce the same look, but not ice the amount ofmarkup in each.
Company Name
Franais
Company Name
Franais
Company Name
Franais
8/9/2019 Why Front End Development is Crucial
10/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
Looking at the 2 examples below, both have the same outcome.
Opt ion 1 achieves the new style by adding a class on theelement new-color. This class would have to be
manually added by the content author increasing the riskfor error.
In Opt ion 2 , inheritance is used within CSS to specificallytarget the tag, reducing the effort of the content author as
well as the risk for error.
Content Authors are responsible for the styles CSS is responsible for the styles
h2.new-color { color: #FF0000; }
Heading 2
.container-name h2 { color: #FF0000; }
Heading 2
Note: Some div tags and classes will likely need to be added during the CSS phase to create some design visuals, or extrapadding, but for the HTML phase, less is more. This ensures that unnecessary markup will not be used.
Validate HTML
Modern browsers tend to do a really good job parsing even the worst HTML. However, not all errors are handled the same.
Using standard, valid markup is also one of the most reliable ways of getting your site ready the future updates of browsers.
When browsers release new versions, they tend to stay compatible with old standards, but that does not guarantee the
rendering of errors will remain the same.
The W3C offers an excellent online validation tool. (http://validator.w3.org/)
After gaining experience and building a variety of templates, and validating different source code, validating becomes more of
a tool for spotting mistakes. It plays the role of spell checker for code.
HTML checklist
Proper HTML templates should not require any special treatment in order to be CMS ready. Heres achecklist of items to cover:
1. DOCTYPE is declared2. Div tags are limited to containers only3. Limited classes or ids are defined aside from the containers4. Image tags are used for CMS controlled images5. Code validates against DOCTYPE declared
If the checklist is complete, time to move on to CSS development.
8/9/2019 Why Front End Development is Crucial
11/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
CSS DevelopmentWhen starting the CSS development, the HTML templates should be properly developed and have as little markup as
possible. Now comes time to open the design comps and transfer the look and feel from PSD files to functional pages. The
end goal is to create user friendly CSS that is easy to maintain whether for the original developer or any new developers along
the way.
CSS reset
First CSS file included in all our HTML templates is a reset file.
The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of
headings, and so on. It helps provide a consistent starting point for all browsers.
Doing a search online for css reset file will result in many different versions as a lot of developers have their own approach.
There is not one golden reset file; the main objective is to understand the reset file you choose and how it works for you.
The reset file we developed is based on a few existing ones with modifications to what we felt was required. On top of
resetting the margins, padding and on all elements, a few standard classes commonly used in every project were added. Thisprevents inserting them and forces the same naming convention from site to site. These classes are used to clear floats, float
items, show/hide elements and align text (right, left and center).
Style the default tags
Once the reset file has been included, the default CSS file is created. The default CSS should contain all content tags to
ensure they get assigned with default values. Even if the pages that have been developed in HTML do not include a certain
element (blockquote, forms, for examples) they should still be styled. CMS are meant to allow flexibility and growth, meaning
any element could be added at any time. Defining a default style for each tag will prevent any brand issues to rise.
Defining all the default tags at first is also beneficial because even if a tag has a different look in a specific area, it may be able
to inherit styles from the default and only require minor adjustments. Setting the default font properties on the body tag will
ensure all elements start with the same base. This will allow greater flexible and ease in inheritance when the time comes.Say the font-size for the footer paragraph needs to be smaller than the regular body text but the color and font are the same
as the body, rather than specifying all these styles again, we simply need to overwrite the font-size property.
use:
.footer p { font-size: .9em; }
instead of:
.footer p { font-family: Arial...; color: #666666; font-size: .9em; }
8/9/2019 Why Front End Development is Crucial
12/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
Organize in blocks
CSS files tend to grow extremely fast and can become hard to manage. The importance of organizing the CSS code
becomes evident when you must return to a file long after the work has been done. Although there is not one golden rule in
how to organize a CSS file, heres a few helpful tips.
/* ========== DEFAULT CONTENT TAGS ========== */
all default content tags (html, body, h1-h6, p, a)
/* ========== HEADER STYLES ========== */
all header styles
/* ========== MAIN NAVIGATION STYLES ========== */
all main navigation styles
the rest of the content blocks (ex: Content, Sidebar, Footer)
/* ========== GENERIC STYLES ========== */
all generic styles aside from the default tags (ex: text alignment, text size, colors)
By keeping all the styles into their separate content block, if an update to the header is required, it will be fast and efficient to
find the proper styles associated with the update required which could be very beneficial if multiple developers work on the
file.
Proper naming convention
The naming of classes and ids should not be taken lightly. Names should clearly indicate their purpose without being too
specific. A bad name can limit the flexibility should an update be required. Lets assume we need a class to highlight
important text. The current look and feel may suggest bold red text. If we specifically name the class using these guidelines
(ex: class=txt-red-bold) and for any reason, the style needs to be updated to normal blue text, this can cause some
problems. The CSS can be updated and the text-red-bold can have the normal blue text applied to it; however the name is
very misleading and could result in confusion for content authors. A proper name to indicate the class purpose could have
been along the lines of imp-txt or highlight-txt allowing the flexibility to change the look and feel of the styles without losing
the meaning of the class.
We also keep a prefix on block specific styles (ex: hdr-logo). This not only indicates immediately where a style is applied, but
also helps prevent duplicate classes from being used.
Avoid hacks if possible
With IE6 still in the picture, avoiding hacks can be extremely stressful and sometimes simply impossible. There are a lot of
debates on whether a conditional include should be inserted to include an IE6 specific CSS file to ensure valid CSS, Im going
to argue the opposite. I like to keep all my CSS into 1 default file and avoid hacks at all cost. Understanding the limitations
and rendering differences in IE6 will prevent the use of common hacks.
8/9/2019 Why Front End Development is Crucial
13/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
The most common hacks as well as how to avoid them:
The Box Model (only in quirks mode not an issue using the HTML5 DOCTYPE)
Problem: The CSS box model defines the width and height of a box created with CSS. If IE6 renders using quirks mode thebox model will be rendered differently than other browsers. The box model consists of the width, height, padding, margin and
border properties. By default, the width or height of a box is calculated by adding the width/height with the padding and
borders. However, in quirks mode, IE6 will render the box the width of the width property and include the padding and border
within this width.
Say we have a d iv with the fol lowing propert ies: - width: 300px;
- border: 35px;
- padding: 25px;
By default the width would be: 300 + 70 (35px border on each side) + 50 (25px padding on each side) = 420px;However, in quirks mode: width = 300px;
Fixes/Workarounds:An easy way to avoid this issue; never apply a width with borders/padding and vice versa. By following this guideline, there is
no need to worry about the box model rendering differently in different browsers. If a container needs both a width and
borders/padding, and it cant be included on an element inside the container, adding another div is the easiest solution.
8/9/2019 Why Front End Development is Crucial
14/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
Double Margin Bug
Problem: Most of the time (yes only sometimes) if a margin is applied to a floated element, it will double the value oftencausing major alignment issues.
Fixes/Workarounds:Add display: inline to the element and its fixed.Transparent PNG
Problem: The main uses for transparent PNG are generally for overlay images with filters (ex: shadow, blur, outer glow).These types of filter require some pixels to be less than 100% opaque. Bottom line, IE6 simply does not support PNG alpha
transparency.
Fixes/Workarounds:1. The easiest fix is to ensure the design does not use any elements that require transparency. This does not mean that
shadows cant be used, but they should be used appropriately. If a transparent element is used on a solid
background color, the background color can be cut with the image and prevent any issues.
2. If method 1 is not an option, the second recommended fix is to use a GIF image and do the best to optimize thetransparency area as best as possible. This method will require a hack to ensure only IE6 uses the GIF while other
browsers use the intended PNG. Using minor hacks when necessary without having a conditional include. Heres
what the CSS would look like.
.className
{
background: url(transparent-image.png); /* All Browsers /
_background: url(transparent-image.gif); /* IE6- */
}
The underscore before a CSS property is a hack ignored by modern browser but read by IE6-. The underscore will
cause a validation error, but when compared to the amount of extra work to include a conditional statement and an
extra CSS file for 1 style, it is strongly debatable. If there were many instance required of this hack, then the argumentfor a separate stylesheet could become debatable.
3. If neither option 1 nor 2 can be used, Microsoft offers a solution using a filter called AlphaImageLoader. A major issuewith this method is the inability to tile or position the image (if used as a background). A workaround for this problem
is to create an extremely large image to ensure no matter how high or wide the area gets, the image will never get
cut. Downfall of this method is file size tend to be fairly large. Another issue with this method is the
AlphaImageLoader is JavaScript based which a user may have disabled.
Validate CSS
Validating the CSS is often overlooked or overrated. Its debatable whether or not it is an essential. I like to run my CSS code
through a validation more as a check than a must. It can point out missing semi colons, typos and other minor errors that can
cause huge rendering issues. At the rare occasion where I do need to use hacks, I know beforehand that my CSS file will not
validate, however I still check to make sure the rest of the code is properly written.
8/9/2019 Why Front End Development is Crucial
15/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
CSS checklist
Heres a checklist of items to cover:
1. CSS reset file is included2. Default CSS file is well organized3. All default tags have been styled4. A proper naming convention has been followed5. Hacks have been avoided6. CSS has been validated
8/9/2019 Why Front End Development is Crucial
16/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
ConclusionInformation from this paper covers some of our best practices, which are backed up by numerous successful CMS launches.It is not intended to be perceived as the only way of building the foundation but more as a sort of cheat sheet in avoiding
common pitfalls.
Websites will continuously expand through its duration and the importance of a solid foundation begins to surface more and
more. The end goal is to ensure existing content can be edited, new content and new sections can be added all the while
maintaining consistency with the original look and feel designed. This adds value to a companys brand and provides the
visitor with a consistent experience throughout the site.
We hope you have found this document useful as you move forward with your CMS deployments. NLC has a proven track
record of creating highly successful websites. If you are still struggling with building your foundation, feel free to reach out to
us wed be delighted to hear from you. You can reach us at [email protected] or 613.241.2067. You will also find
additional assistance in NLCs every expanding library of whitepapers at http://www.nonlinear.ca/pages/whitepapers.htm.
The NLC Performance FrameworkA pragmatic guide to planning online business initiatives
Choosing a Web Content Management SystemThe fundamental truths about CMS selection and
implementation projects
Effective Visual Design Strategy for CMSOvercoming the 7 Main Challenges to Effective Visual
Design for CMS-Driven Websites
The Non-Technical Manager's Guide toSuccessful Google Analyt icsGathering website intelligence
Best Pract ices for Building Your CMSArchitectureA proven best practices approach to content architecture
development
Planning for Success: Best Pract ices in CMSGovernanceDecisions to make before you implement a web content
management solution
SEO and CMS: Implement ing Best Pract icesEmbedding Search Engine Optimization tactics during a
CMS deployment
Six Tips for Del iver ing Faceted Navigat ion with ina CMS-Driven Website
8/9/2019 Why Front End Development is Crucial
17/17
WHY FRONT-END DEVELOPMENT IS CRUCIAL FOR A SUCCESSFUL CMS BUILD
TIPS AND BEST PRACTICES FOR HTML AND CSS DEVELOPMENT
1
About non~linear creationsnon~linear creations (NLC) provides e-business consultingservices to an international clientele. Since 1995, we have
helped our clients leverage the power of Internet technology
to achieve tangible business benefits.
NLC leads seven Solutions Groups
Our Business Performance Group provides services in
strategic consulting, information architecture, web analytics
and content governance.
Our Enterprise Content Management Group has world-
class proficiency in the technical planning and deployment
of web content management systems, documentmanagement and records management solutions.
Our Gold-Certified Microsoft Solutions Group specializes
in successful implementation of Microsoft Office SharePoint
Server 2007, Microsoft Commerce Server and Microsoft
Search solutions.
Our Enterprise Search Group partners with search
vendors such as Google, Microsoft and Endeca to ensure
information is effectively stored and easy to findboth
inside and outside the enterprise.
Our Custom Application Development and IntegrationGroup builds custom solutions when off-the-shelf offerings
arent sufficient for an organizations business needs. This
group also specializes in legacy integration projects.
Our Digital Marketing Group provides services in organic
search optimization, pay-per-click search management,
email management and social marketing.
Our Design and Multimedia Group continues to win
awards for their high impact online design projects, which
achieve the goal of compelling design without sacrificing
functionality and ease of navigation.
Each Solutions Group leverages proven methodologies and
extensive technology partnerships to deliver effective,
individualized solutions that satisfy customers worldwide.
Visit our website at www.nonlinear.ca to learn more about
the results weve achieved for a number of high-profile
clients.
Reaching non~linear creations
Toronto Office
416.203.2997
524 Front St. West, Suite 200
Toronto, Ontario, Canada
M5V 1B8
Ottawa Office
613.241.2067
987A Wellington St., Suite 201
Ottawa, Ontario, Canada
K1Y 2Y1
Calgary Office
1.403.444.5964
#1000, 888-3rd St SW
Bankers Hall, West Tower
Calgary, Alberta, Canada
T2P 5C5
New York Office
1.917.368.8000The Chrysler Centre405 Lexington Ave., 26th Fl.New York, NY 10174