GUI Constraints

From MPDLMediaWiki
Jump to: navigation, search
APPLICATION AREAS

Home


Interface Conception & DesignUser Interface EvaluationInterface Development
PROJECTS

Pattern Library

Publication Management

Digitization Lifecycle

Research- and Metadata Handling

Usability Report

Corporate & Interface Design (under Rework)


Page Index
edit


Introduction

This page should give a short overview on browser-related requirements. As a rough approach it was decided that eSciDoc solutions need to support browsers with respect to layout consistency only 3 years back. Older browsers like IEInternet Explorer 5,5.5 or FF1.x should offer the functionality but may be limited regarding the GUIGraphical User Interface display. The GUIGraphical User Interface constraints are set up to develop all GUIs against a clear target. This doesn't mean, Solutions benefit from now on. As far as GUIGraphical User Interface V2 is implemented and tested, these constraints will be fulfilled.

Supported Desktop Browsers - productive

name version release date[1] market share[2] Layout supported Function supported Testing
Internet Explorer 7.0 2006/10 22,2% yes yes required
8.0 2009/03 yes yes required
9.0 2011/03 yes yes required
Firefox 2.0 2006/10 37.3 % yes yes required
3.0 2008/07 yes yes required
4.0 2011/03 yes yes required
Safari 4.0 2009/06 8.5% yes yes required
5.0 2010/06 yes yes required
Google Chrome 8.x-10.x 2010/12 unknown % ??? ??? required

Required web techniques

name version release date activation[3] support
Cascading Style Sheets 2.0 05/1998 100%[4] yes
2.1 2007 specials only[5]
Cookies - - 98.8%[6] yes[7]
JavaScript[8][9] 1.5 2000-2001 99.7 % yes
HTMLHypertext Markup Language 1-4 1990-2000 conditioned by browser yes
X 1.0 2000/01 conditioned by doctype yes

Media Types

Type Style Usability
PRINT Navigation is not printed Content is readable
SCREEN screen presentation, without small mobile devices Browser/Device dependent
MOBILE Device/Browser dependent (textmode via CSSCascading Style Sheets degradation) Device/Browser dependent

Supported Desktop Browsers - non productive

name version release date[1] market share[2] Layout supported Function supported Testing
Internet Explorer 9.0 2011/03 ~ yes yes Occasionally, client logic + GUIGraphical User Interface
Firefox 3.6 2008/07 37.3 % yes yes client logic, GUIGraphical User Interface - CSS3
4.0 2011/03 yes yes Occasionally, GUIGraphical User Interface
Google Chrome 9.x-11.x 2010/12 unknown % yes yes GUIGraphical User Interface
Safari 5.0 2010/06 8.5% yes yes GUIGraphical User Interface (Mac)
Opera 10.5+ 2009/09 1.0% not required yes -
11.x 2010/12 not required yes -
Mini mobile not required yes -
Konqueror - 2010/12 unknown % no yes GUIGraphical User Interface
-- standing: 2011/01 / update every 6 month

Functionality for older Browsers like Safari 2.x - 3.x, Opera 7.x, Firefox 1.x should be available but will not be evaluated.

Statistcs of awstats from edoc is falsified by 28.6% of unknown brosers, caused by the apache webserver itself. Functionality for older Browsers like Opera 7.x, Firefox 1.x should be available but will not be evaluated.

Required web techniques

name version release date activation[10] support elementary supported by
Cascading Style Sheets 2.0 05/1998 100%[11] yes
2.1 2007 specials only[12]
3.0 -[13] conditioned by browser yes [14]IE6 - 10% / IE7 - 13% / IE8 - >13%
FF3 -27% / Opera9 - 19%
Safari 4 & 5 - ?% / Chrome 8 & 9 - ?%
Cookies - - 98.8%[15] yes[16]
JavaScript[17][18] 1.5 2000-2001 99.7 % yes
HTMLHypertext Markup Language 1-4 1990-2000 conditioned by browser yes
X 1.0 2000/01 conditioned by doctype yes
5 >=2011 conditioned by browser yes IEInternet Explorer >= 9, FF > 3.5, Safari >= 5

Media Types

Type Style Usability
PRINT Navigation is not printed Content is readable
SCREEN screen presentation, without small mobile devices Browser/Device dependent
MOBILE Device/Browser dependent (textmode via CSSCascading Style Sheets degradation) Device/Browser dependent

Browser Support Reasoning

Change of the browser zoo

As at least 4 new browsers will appear in 2011, all with relevant market share, there is a strong need for focussing on testing and compatibility. Only a set of five browsers can be maintained properly by UIEUser Interface Engineering. There is a urgent need of taking out old browsers and decide for new ones on short term.

Three browsers need to be supported any way:

  1. IE9
  2. FF4
  3. Safari 5
  4. Google Chrome

The following browsers will not be tested and developed on a regular base

  1. IE6
  2. IE7
  3. FF2
  4. Safari 3
  1. reasons for Safari / Webkit:
    1. more usage of safari browser
    2. more power on googles chrome
    3. safari & chrome has the same basic engine with a minimum of divergence
    4. a lot of mobile devices are apple devices with webkit engines
  2. reasons against IEInternet Explorer Version 6 & 7:
    1. uncomfortable design / layout [2] [3] [4]
      1. object-tag with automatic padding for images
      2. double margin bug
      3. ignore min width & min height
      4. non-alpha transparent PNG files
    2. general stagnancy of IEInternet Explorer
      1. IEInternet Explorer 6 decreased under 2.5% - January 2011 2.2%
    3. deprecate new web-based developments and new technologies
  • scientific projects & innovatioin
  • first productive scenarios minimum x+2 years

Browser usage on edoc[2]

IE edoc.jpg Firefox edoc.jpg Other browser edoc.jpg Browser allocation.jpg

NEW BROWSER FEATURES

all about new features in new browser versions

IEInternet Explorer 9

FF 4

  • New JS values: Changes to the C++ representation of JavaScript values allow Firefox to execute heavy, numeric code more efficiently, resulting in cleaner graphics and a better browsing experience.
  • 3D on the Web: WebGL brings 3D graphic
  • new / better HTML5 support
    • new parser and full support for web video, audio, drag & drop, and file handling
      • Audio APIApplication Programming Interface - <audio><video> - for developers to use JS to read and write audio data.
  • Stylin’ Pages with CSS3 - Support for new CSS3 features like Transitions and Transformations
  • SVGScalable Vector Graphics files can be used as images and backgrounds
  • Experience super-fast graphics acceleration with Direct2D and Direct3D on Windows, XRender on Linux and OpenGL on Mac, now enabled by default, on all supported hardware
  • source: http://www.mozilla.com/en-US/firefox/beta/features/

Safari (Google Chrome) - Webkit

  • CSSCascading Style Sheets 2.1, CSS3 support:
    • border-image
    • border-radius
    • background-size
    • text stroke vs. fill [5]
  • Styleable form controls ( demo 1[6], demo 2[7])
  • DOMDocument Object Model web inspector [8]
  • Drosera (JS debugger)
  • Enhanced Rich Text Editing ( demo[9])
  • XMLExtensible Markup Language techologies:
    • XPathExpression Language Used to Navigate and to Find Structures in XML Documents
    • SVGScalable Vector Graphics (partial SVGScalable Vector Graphics 1.1 FULL)[10]
    • XSLTProcessor JavaScript APIApplication Programming Interface for XSLTExtensible Stylesheet Language Transformations
  • Plugins:
    • Netscape-style (NPAPI) plugins and WebKit plugins (Mac OSOperating System X only).
    • The following plugins are known to work with the Gtk port, others may work but have not been tested:
      • mplayer
      • Adobe Flash Player
      • DiamondX
  • source: http://trac.webkit.org/wiki/WebKitFeatures


Progressive Enhancements (related to productive solutions only)

GUIGraphical User Interface components may make use of progressive enhancements. Standard conform and more modern browser benefit from new features. The result will be detail improvements that will give an advantage in usability and appearance in modern browsers. They do not affect older browser versions at all:

To preserve consistency of layout and behaviour components only make use of:

  • visual details (border appearance, additional background decoration)
  • details in interaction (typing, dragging, hover)

the following aspects should not be affected

  1. functionality (as described by use cases)
  2. application logic
  3. overall user experience

Supported Dialogs

standard dialog - clickable - support yes
overlay dialog - hover - support yes
elevated dialog - clickable - support yes
modal dialog - no

Layout Engines and Mobile Browsers

WebKit (Chrome, Safari) Also used for the mobile devices. Layout, and functional features may appear different.

Gecko (FF, Netscape) Also used for the mobile devices. Layout, and functional features may appear different.

Trident (IEInternet Explorer) Also used for the mobile devices. Layout, and functional features may appear different.

Presto (Opera) Also used for the mobile devices. Layout, and functional features may appear different.

Screen Resolution Optimization

Screen Resolution optimized for
800 / 600 scroll only[19]
1024 / 768 optimized
1152 / 864 optimized
1280 / 1024 optimized
1600 / 1200 optimized
  • screen resolution
    • standard: 1024x768
    • for mobile: separate discussion
      • maybe: CSSCascading Style Sheets Media Queries for different range's of resolutions

The situation has changed here. Mobile clients are advancing with very different resolutions and density:

  • iphone3: 480x320-pixel resolution at 163 ppi
  • iphone4: 960x640-pixel resolution at 326 ppi

Although the layout runs fine we still lack a mobile stylesheet here.

Browser resolution ww.jpg
source: [11]

References

  1. 1.01.1 [1]
  2. 2.02.12.2 share according to the edoc webstats (November 2010)
  3. percentage of users with activated technique according to www.webhits.de (march 2008)
  4. although all modern browsers support at least CSS1, the implementation level and the level of support differs
  5. although CSSCascading Style Sheets 2.0 is not explicitly required its support will enable some rare extra features
  6. (february, 11th 2011)
  7. cookies support is required for system login
  8. JavaScript version 1.5 is used by 99.7% of all users with activated JavaScript according to www.webhits.de (january 2011)
  9. (february, 11th 2011)
  10. percentage of users with activated technique according to www.webhits.de (march 2008)
  11. although all modern browsers support at least CSS1, the implementation level and the level of support differs
  12. although CSSCascading Style Sheets 2.0 is not explicitly required its support will enable some rare extra features
  13. still work in progress
  14. (last check: february, 11th 2011)
  15. (february, 11th 2011)
  16. cookies support is required for system login
  17. JavaScript version 1.5 is used by 99.7% of all users with activated JavaScript according to www.webhits.de (january 2011)
  18. (february, 11th 2011)
  19. on monitors with too small resolutions the solutions will be viewable via horizontal scrolling only

Known Development Bugs

Please take care on Addons in Internet Explorer!

IEInternet Explorer Bug - DivX Addon & tagName

- relevant browser version: 8+
- Error: tagName is null or non object
- Fix: deactivate the addons for divx about extras -> manage addons

- Info: the addon breaks the basic javascript function getElementsByTagName