Download Conceptualize the Application Start from an Application Theme

Conceptualize the Application
Start from an Application Theme
The project team has the most knowledge about the business goals
and technology potential. It must conceptualize the application and
develop a set of artifacts which will serve as inputs for a Web
Designer and also, later, to the implementation.
When starting a new application in Service Studio, it uses one of the
provided Themes as basis. It is a good approach to start from this CSS to
build your new design, especially if you intend to use platform features
like Intelliwarp, Table Records, Form Validation, etc.
Understand the project goals and layout information architecture,
detailing the most important pages in mockups.
Provide good inputs to the Web Designer
Web Application design is iterative
The project team should submit examples of HTML and CSS list
with screens for listing, editing and displaying based on
IntelliWarp on the desired Agile Platform version. Additional
layouts for the application in question might also be provided.
The Web Designer should lend its support of the custom design
throughout the project to ensure that new standards of design
necessary for the project to be developed.
The Web Designer can then proceed to implement a custom
design by styling the provided page structure.
The Web Designer should also ensure the quality of the final
application design, validating that intended styling was correctly
implemented.
Liquid page layout
Fixed page layout
An application with a liquid layout expands horizontally to occupy
all space available in the browser’s viewport.
Fixed layouts are usually also centered. The current standard is from
940 to 980px wide.
This approach makes good use of space available, but different
viewport dimensions affect the way it is rendered.
980px is a perfect match for the device’s virtual viewport.
Beware that when your end users have a huge screen, it ends up
stretching your content to unforseen extents.
Although it can be a poor use of space available, this approach is
excellent to control the final experience for all the application users, as
it will have the same final result.
Also, developers tend to use up the space available as presented
by the big development screens, which might not be the norm for
the users.
Do not use Id selectors
Do not use HTML5 html tags for page structure
Since HTML element Ids are generated dynamically by the Agile
Platform, their usage in CSS is not possible.
New html tags like <section> or <nav>, included in the HTML5
specification, are not currently natively supported by the Agile Platform.
Equivalent CSS Classes can be used to achieve the same result.
Containers with semantic classes must be used instead.
#main { … }  .main { … }
<div class=”MainContent”>
However, small snippets of HTML5 functionality can be easily included,
like, for example, the <canvas> tag for charts.
Avoid using lists for page structure
Use alphanumeric characters for image file names
List elements can be generated by the platform in certain cases
(ex. top menu) and can also be added when required, but its use is
awkward and makes future maintenance more complicated.
Image filenames can only contain alphanumeric characters [a to z, 0 to
9] and underscore [_]. These must also begin with a letter:
1-my-collection.png  my_collection.png
Make us of <div> instead of <ul>, <ol>, when possible.
Tables are not for layout
Avoid HTML within expressions
Tables are intended for tabular data. Avoid using tables to structure
content in pages. These are slower to render by browsers and make
it nearly impossible to work with across devices (responsive design).
Sometimes you’ll need to add some HTML in an expression, like, for
example, to add a video or a HTML5 snippet.
With that said, sometimes a table is just an easier solution for small
pieces of your page.
Other than that, you should NEVER use this ability to inject HTML into
your pages. It is extremely error prone and makes maintenance a living
hell.
Include built-in classes
Minimize the number of CSS files
The Agile Platform uses a number of CSS classes for its internal
widgets, like Table Records or Edit Record.
Every additional resource the browser has to fetch for a page has a
significant performance cost, so keep your CSS files to a minimum.
If you’re using these features, be sure to include these classes.
Balance the inclusion of CSS in shared web blocks and in your
Application’s theme.
Avoid inline styles
Organize your CSS
All the styling content added in the extended properties of elements
in the web editor will be rendered as inline styles on the web page.
CSS can grow considerably with your development, which creates a
problem as it is in essence a flat text file.
This approach will make maintenance more difficult, increase the size In order to keep it under control, use contextual naming and group rules
of your pages, thus damaging performance as it will never be cached by section, widget, feature, etc., avoiding duplications and inadvertent
by the browser.
overrides.
Make efficient use of CSS inheritance rules
Avoid CSS hacks
Inheritance is a CSS mechanism you must understand. Some
properties are inherited, some are not.
Sometimes browsers will render your page slightly different. If the
difference is not acceptable, you might attempt to fix it by using some CSS
Correct use of this mechanism makes maintenance and development hacks.
a LOT easier. Not using this can make it a nightmare.
If you do, be sure to document the reason behind it.
Be careful with CSS3 rules
Implement Graceful Degradation
Although the support for CSS3 is becoming mainstream, Internet
Explorer still lags behind and forces a measured adoption of some
rules.
Agree with your project stakeholders to implement a graceful degradation
approach in your presentation layer.
Use quirksmode.com or caniuse.com for browser support.
Adopt the new CSS3 selectors to provide an enhanced experience to user
in modern browsers, removing some of the edge as older browsers are
used.
Reduce browser differences
Browsers have different styling defaults for html elements, which
produce rendering differences for your web pages.
1
Normalize.css makes browsers render all elements more
consistently and in line with modern standards. It precisely targets
only the styles that need normalizing.
1
http://necolas.github.com/normalize.css/
Include images with relative paths
Prefer the PNG format
Use relative paths to reference the images in your eSpace. If these
are inside web blocks to be consumed by other eSpaces, be sure to
include the eSpace name.
PNG supports both transparencies and wide range of colors.
background: white url(“/MyApp/img/header.png”);
This format did not have good support for older Internet Explorer
versions, but it is now safe to use.
Sometimes for large photos, JPG is a better option.
Prefer image sprites
Beware of image sizes
Image sprites are recommended for applications requiring high
front end performance. In other cases, the maintenance cost is
high. For more information about sprites, see:
http://www.alistapart.com/articles/sprites
Images with large sizes (> 50 KB) are the easiest way to damage the
performance of your application.
If your users have the ability to upload images for content, be sure to
control its size.