GUI Constraints

From MPDLMediaWiki

Jump to: navigation, search
All_Status_FolderSolo_31_Hover.gif APPLICATION AREAS

Home

Interface Conception & Design

User Interface Evaluation

Interface Development

All_Moderator_InWork_15_Hover.gif PROJECTS

Pattern Library

Publication Management

Digitization Lifecycle

Research- and Metadata Handling

Usability Surveys (under Rework)

Corporate & Interface Design (under Rework)

Page Index

edit


Contents

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 IE 5,5.5 or FF1.x should offer the functionality but may be limited regarding the GUI display. The GUI constraints are set up to develop all GUIs against a clear target. This doesn't mean, Solutions benefit from now on. As far as GUI V2 is implemented and tested, these constraints will be fulfilled.

Supported Desktop Browsers - productive

nameversion release date[1]market share[2]Layout supportedFunction supportedTesting
Internet Explorer7.02006/10 22,2%yesyesrequired
8.02009/03yesyesrequired
9.02011/03yesyesrequired
Firefox2.02006/1037.3 %yesyesrequired
3.02008/07yesyesrequired
4.02011/03yesyesrequired
Safari4.02009/068.5%yesyesrequired
5.02010/06yesyesrequired
Google Chrome8.x-10.x2010/12unknown %??????required

Required web techniques

nameversionrelease dateactivation[3]support
Cascading Style Sheets2.005/1998100%[4]yes
2.12007specials only[5]
Cookies--98.8%[6]yes[7]
JavaScript[8][9]1.52000-200199.7 %yes
HTML1-41990-2000conditioned by browseryes
X 1.02000/01conditioned by doctypeyes

Media Types

TypeStyleUsability
PRINTNavigation is not printedContent is readable
SCREENscreen presentation, without small mobile devicesBrowser/Device dependent
MOBILEDevice/Browser dependent (textmode via CSS degradation)Device/Browser dependent

Supported Desktop Browsers - non productive

nameversion release date[1]market share[2]Layout supportedFunction supportedTesting
Internet Explorer9.02011/03~yesyesOccasionally, client logic + GUI
Firefox3.62008/0737.3 %yesyesclient logic, GUI - CSS3
4.02011/03yesyesOccasionally, GUI
Google Chrome9.x-11.x2010/12unknown %yesyesGUI
Safari5.02010/068.5%yesyesGUI (Mac)
Opera10.5+2009/091.0%not requiredyes-
11.x2010/12not requiredyes-
Minimobilenot requiredyes-
Konqueror-2010/12unknown %noyesGUI 
-- 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

nameversionrelease dateactivation[10]supportelementary supported by
Cascading Style Sheets2.005/1998100%[11]yes
2.12007specials only[12]
3.0-[13]conditioned by browseryes[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.52000-200199.7 %yes
HTML1-41990-2000conditioned by browseryes
X 1.02000/01conditioned by doctypeyes
5>=2011conditioned by browseryesIE >= 9, FF > 3.5, Safari >= 5

Media Types

TypeStyleUsability
PRINTNavigation is not printedContent is readable
SCREENscreen presentation, without small mobile devicesBrowser/Device dependent
MOBILEDevice/Browser dependent (textmode via CSS 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 UIE. 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 IE 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 IE
      1. IE 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

IE 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 API - <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
  • SVG 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

  • CSS 2.1, CSS3 support:
    • border-image
    • border-radius
    • background-size
    • text stroke vs. fill [5]
  • Styleable form controls ( demo 1[6], demo 2[7])
  • DOM web inspector [8]
  • Drosera (JS debugger)
  • Enhanced Rich Text Editing ( demo[9])
  • XML techologies:
    • XPath
    • SVG (partial SVG 1.1 FULL)[10]
    • XSLTProcessor JavaScript API for XSLT
  • Plugins:
    • Netscape-style (NPAPI) plugins and WebKit plugins (Mac OS 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)

GUI 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 (IE) 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 Resolutionoptimized for
800 / 600scroll only[19]
1024 / 768optimized
1152 / 864optimized
1280 / 1024optimized
1600 / 1200optimized
  • screen resolution
    • standard: 1024x768
    • for mobile: separate discussion
      • maybe: CSS 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.0 1.1 [1]
  2. ↑ 2.0 2.1 2.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 CSS 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 CSS 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!

IE 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
Retrieved from "http://colab.mpdl.mpg.de/mediawiki/GUI_Constraints"
Personal tools
About CoLab