Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > Developing Applications > Adopting CSS3 of Domino classic Web application to support multiscreen for different devices
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileThomas Chou
Contribution Summary:
  • Articles authored: 1
  • Articles edited: 1
  • Comments Posted: 0

Recent articles by this author

Adopting CSS3 of Domino classic Web application to support multiscreen for different devices

HTML is a textbased markup language used to format information, HTML is a language that is used to structure and present text and images within a user interface. CSS is a language that is used to define how HTMLbased content is displayed on the web. CSS can be used to control layout, spacing, ...
Community articleAdopting CSS3 of Domino classic Web application to support multiscreen for different devices
Added by Thomas Chou | Edited by IBM contributorThomas Chou on December 21, 2011 | Version 4
expanded Abstract
collapsed Abstract
No abstract provided.

HTML is a text-based markup language used to format information, HTML is a language that is used to structure and present text and images within a user interface.

 

CSS is a language that is used to define how HTML-based content is displayed on the web. CSS can be used to control layout, spacing, colors, fonts, and much more, and has been an integral component of "the Web".

 

In Domino classic Web application, you can adopt HTML and CSS to format the Web data and layout. Many users are using different devices to browse Domino classic Web application. If the classic Web application can support multiscreen for different kind of devices, this will be wonderful feature.

 

CSS3 media queries allow developers to create style sheets that apply to specific screen dimensions. Using media queries, a singular HTML document can have a varied presentation on a range of screens or devices. Differing layout and presentation for tablet-based interfaces, mobile phone interfaces, and desktop interfaces can be applied to the same HTML document. We can adopt CSS3 media queries feature in Domino classic Web application to support multiscreen for different kind of devices.

 

Here is our environment : Domino v8.5.3 server, Firefox v8, Google Chrome v16, Android v2.3

 

When writing HTML code in a Domino application Form or Page, you need to add viewport tag instructs mobile devices to use the actual width of the screen (device-width) when applying media queries.

 

 

 

When creating the CSS for the application HTML Form or Page, you can use media queries with CSS @import to specify the media type. The styles in desktop.css need to apply to all browsers, the rules in device.css need to override the basic rules in desktop.css.

 

@import url("device.css") only screen and (max-width:320px);

 

 

If using an external CSS (or text) editor, create the CSS file externally to the Domino application and then import it as a Style Sheet Resource:

 

 

When this Web application launch in Domino server, we use a HTML5/CSS3 compatible device (Firefox v8, Google Chrome v16, Android v2.3) to browse it. The Web page can display correctly in those devices.

The Domino classic Web application which adopt HTML5 and CSS3 display in Google Chrome.

 

The Domino classic Web application which adopt HTML5 and CSS3 display in Firefox v8.

The Domino classic Web application which adopt HTML5 and CSS3 display in Android v2.3.

 

This sample demo you that the Domino Web classic application web page will base on device screen dimensions to change the display layout following CSS definition.

 

Conclusion

In this short article, we adopt CSS3 media queries to customize the Domino classic Web application web page display layout applied to the same HTML5 document for different device screen.

Next step, we can integrate it with existing data to be a practical Web application for supporting multiscreen.

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (13)
collapsed Versions (13)
Version Comparison     
VersionDateChanged by              Summary of changes
13Dec 21, 2011, 7:39:32 AMThomas Chou  IBM contributor
12Dec 21, 2011, 7:23:16 AMThomas Chou  IBM contributor
11Dec 21, 2011, 7:18:28 AMThomas Chou  IBM contributor
10Dec 21, 2011, 7:12:49 AMThomas Chou  IBM contributor
9Dec 21, 2011, 7:10:36 AMThomas Chou  IBM contributor
8Dec 21, 2011, 7:05:19 AMThomas Chou  IBM contributor
7Dec 21, 2011, 7:03:29 AMThomas Chou  IBM contributor
6Dec 21, 2011, 7:01:42 AMThomas Chou  IBM contributor
5Dec 21, 2011, 7:00:45 AMThomas Chou  IBM contributor
This version (4)Dec 21, 2011, 6:59:49 AMThomas Chou  IBM contributor
3Dec 21, 2011, 6:56:23 AMThomas Chou  IBM contributor
2Dec 21, 2011, 6:47:52 AMThomas Chou  IBM contributor
1Dec 21, 2011, 6:44:09 AMThomas Chou  IBM contributor
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use