Mobile Portal Optimization

(1)

Mobile Portal Optimization

Approach & Techniques

Version 0.3

KRISHNA C KUMAR,

PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE

(2)

HIGH LEVEL APPROACH

Identify the screens for different device categories

3 Different variants of UI created for different categories of devices

Create a Global Styles (to be included in most of the pages portlets). This is NOT THEME

File

Modify/Create MCS Artifacts

Add/Modify Portlet JSPs/java Classes [Avoid any device/Model specific

Conditions ]

Modify Default XDIME Aggregator JSPs/Themes Create ViewPort.jsp for including in

the portlet JSPs for devices which supports viewports (This is needs to

be included at the Aggregator JSP Level)

Identify styles that should go into <nativemarkup> for <nativemarkup>

wrapped code

(3)

(4)

Creating Global Styles - I

1. In what format the Global Styles to be created ?

• JSP format as Style/CSS.jsp, which can be included in the required portlet jsp pages

2. Why globalStyles.jsp to be used instead of Global Theme based on MCS Themes ?

• By default, WEMP has global themes which comes out of box with XDIME Aggregator as wp_styles.mthm

• wp_styles.mthm takes care of rendering Aggregator related themes/styles • Every XDIME/JSP or the canvas can be styled using a single mcs theme file

(*.mthm file)

• In case if we place all the styles configured globally in a single theme, it is not be possible add local themes (themes for minor changes which is specific for a

particular page) as a layout canvas element of XDIME cannot have more than one theme file.

3. Where this should be included ?

• To be included within Common.jsp or default.jsp of the XDIME Aggregator

4. Contents of the Global Styles?

• <style type=“text/css”> ….. </style>

• With CSS Styles with ID Selectors and Class Selectors • Identified common styles across all pages

(5)

Creating Global Style - II

6. Global Styles & Nativemarkup ?

• It is a good practice to include Nativemarkup rendering as a separate JSP, say nativeCSS.jsp and include

7. Types of Contents of nativeCSS.jsp

• <nativemarkup targetLocation=“html.head” expr=“true()” ><style type=“text/css”>…..</style></nativemarkup>

• <nativemarkup targetLocation=“html.head”

expr=“device:getPolicyValue(‘layoutengine’) = ‘Webkit’” ><style type=“text/css”>…..</style></nativemarkup>

• Use Correct MCS expressions in the expr attribute of nativemarkup element, this will save the page from unneccssary CSS rendering from nativemarkup on the final markup on the device

8. Global Styles – Fonts

• Set the font properties globally in the style jsp and include the same in the required pages. Say body{ font-family: RonniaBasicLight; font-size:110% }

• Set the font-size as body selector e.g. body{ font-size: 100% }, this will ensure all the font-size globally is the default browser font size rendering.

• Locally these font-size can be handled when there is a reduction in size or increase in font size

• Any variations over the font style or settings needs to be handled locally in theme files for the specific XDIME/JSPs

(6)

Creating Global Style - III

9. Global Styles – Colors & Background Colors

• Maximum used Colors, Font colors, background colors, background images (both image components or images) needs to be added to the Global Styles jsp

• Examples : Grey and White background, Green backgrounds, Maximum used Font – colors, Heading Text Color, Button Styling, Form controls, etc.

10. Identify the common styling across all pages and create Global Styles jsp and for elements which occurs every page uniformly. Say button styled red on all pages <style type=‚text/css‛> body{margin:0;padding:0;font-family:RonniaBasicLight,Sans-serif; font-size:100% } .styleRed{color:red;} .black{color:#000000;} .white{color:#ffffff;} .blue{ color:#000000;} .grey{ background:grey;} .white{background:#ffffff;} .itemBkgroundG{} .itemBkgroundW{} .buttonGrey{} #numValidate{-wap-input-required:true;-wap-input-format:NNNNNNNNNN;} adImage{ width:100%; display:block }

podImage{ width:100%; display:block } .inputBoxStyle{ }

.marqueeStyle{ } </style>

(7)

Creating Global Style - IV

11. Conditional handling of Global Styles for variants

• Using globalStyles_240px.jsp, Using globalStyles_320px.jsp

• Using global styles conditionally w.r.t to device screen size can be an example to handle well coarse grained styling for different styling variants

table{border-collapse:collapse;} </style>

Sample nativeGlobalStyles.jsp /*here <nativemarkup> comes within the XDIME JSP */

table{border-collapse:collapse;} </style>

</nativemarkup>

<nativemarkup expr=‚device:getPolicyValue(‘pixelsx’) >= 240‛ targetLocation=‚html.head‛> <style type=‚text/css‛> table{border-collapse:collapse;} </style> </nativemarkup> Sample nativeGlobalStyles.jsp OR

(8)

(9)

Considering Viewports - I

1. What is viewport.jsp ?

• For information on what is viewport, refer Apple Documentation

(http://developer.apple.com/library/IOS/#documentation/AppleApplications/Refer ence/SafariWebContent/UsingtheViewport/UsingtheViewport.html)

• Similar to global themes inclusion as JSP, viewports needs to be included in the Aggregator level JSPs

• This exists for only highend devices only

• It is a simple meta tag element with viewport configured.

• Different vendors follow different view port standards. So kindly refer vendor specific sites.

• Following are the vendors uses viewport for rendering/controlling the rendering on their high resolution devices

• Include viewport conditionally for All Apple products, Windows Mobile 5, 6, Windows Phone OS 7/7.5, Blackberry, Android

• Device specific configuration is unavoidable as viewport is proprietary

• Certain level of generalization can be performed using mcs-functional expressions effectively

2. Where should we use viewport.jsp?

• Aggregator level (include as JSP based on conditions using mcs-expressions)

3. Is this must to use ? YES. Mandatory

4. What if viewport settings are not used ? Pages will look inappropriate to the size of the screen and rendering will look small

(10)

Considering Viewports - II

5. How should we include viewports ?

5. Include viewports using nativemarkup and mcs-expressions

6. Example Code

7. This file can be modified if there is any new viewport setting is recommended by device manufacturers.

</nativemarkup>

</nativemarkup>

(11)

(12)

Creating Layouts - I

1. Can we use global layouts ? NO, It is not possible

2. Points to be remembered while creating layouts

• Create layouts without empty grids

• Avoid using unnecessary nested grids (for e.g. using 1 X 1 Grid for adding a pane)

• Use style classes required for grid/panes in Format Attributes • Avoid Variants of layouts (unless required)

• Create generic variants with “default” variant

• For different class of UI different layout can be created. Say

homePageSimple.mlyt, homePageMedium.mlyt, homePageComplex.mlyt for simple, medium and complex page variants of a home page respectively

• Conditionally use the layouts in the portlet jsp as follows

• <canvas layoutName=“<%= layoutName %>” type=“portlet”> … </canvas>

• Identify common patterns and use it as layouts and its contents. This will reduce the size of the layouts

• Make sure column width is set correctly for the grids

• Try to avoid not include static panes within Form of the layout • Do not use any Spacer panes

(13)

Creating Layouts - II

3. Using Spatial Iterators

• Row-wise or column-wise iteration should be handled using spatial iterator settings instead of separate panes with two iterations

• Use :odd & :even pseudo class selectors for alternate row styling (background, fonts, foreground etc.)

4. Using regions

• Use of regions in layouts enables reuse of layout.

• Identify common patterns and use regions to plugin the layout patterns on the pages

• Do not use too much of regions.

• Use regions if the layout pattern is quite big, for small patterns like 1 or 2 panes do not use regions, instead of reducing complexity it increases meaninglessly

5. Customizing Aggregator Layouts

• Optimize the aggregator layouts

• By default the aggregator layouts have spatial iterators in the header for

displaying multiple levels of headers. In case if the implementation doesn’t need multiple headers remove the same.

• Maintain Single Variant (or single set of layouts) for Aggregator Layouts, as the aggregator generally renders a logo in header and footer with some default text on all pages

(14)

(15)

Using Local Themes

1. What are local themes?

• Themes added to the portlet JSP in the canvas element for “theme=“ attribute is termed as local theme

• Local theme affects only the particular canvas on the specific XDIME/JSP only • A single theme file can be reused on multiple JSP canvas

2. Scenarios where local themes has to be used ?

• In general, restrict all styling to the global themes/CSS

• If there is a specific change only for a particular page, then use the local mcs theme for incorporating the changes

• Example: If the overall font family to be displayed is “Arial”, and for a particular page, specifically for a heading if the font-family has to “Verdana” create a class selector in the local theme and add the font-family as “verdana” and use the same in the JSP. In this case, that particular heading will be styled with font-family from the local theme/CSS, since local theme has more preference than global

• A single theme file can be reused on multiple JSP canvas

3. Any alternate to local themes ?

• <style> elements with or without <nativemarkup> can be included in any XDIME page

• When using <nativemarkup> make sure the rendering is not going to happen for all pages unnecessarily, i.e. use right conditions- otherwise whether the styles will be used or not it will be rendered on to the final device specific markup and increases the page size unnecessarily

(16)

(17)

Creating Image Components - II

1. How to create image components ?

• Since different screen sizes are capable of rendering different image sizes, it is recommended to create image components generic for different sizes

• For example, logo_240.mimg, logo_320.mimg

• This needs to be conditionally handled based on the screen usable width from the device repo (similar to handling layouts)

• Every image component should be created with image pointed to generic variant

2. Points to be noted in creating image components ?

• Add alt=“” attribute with suitable text, if there is no text required at least empty string for the alt attribute in the <img> xdime tag should be used (MANDATORY) • Use “forward slash (/images/test.jpg)” to point the images in the image

component, by default it adds with backward slash

• Make sure the image file is browsed and located for image component. This will avoid wrong format/dimensions/etc.

• In every image component, use generic variant for 3 types of image formats to suit all devices (png, jpg, gif) – MPA will choose the best image for the device runtime

3. Don'ts in creating image components

1. Do not edit image components with text editor use always GUI editor 2. Do not use variants

3. Do not use backward slash to point to the image file

4. Do not manually change the file format listed in the image component after pointing to the image

5. Do not change the file extension of image and set it as a different file format

(18)

Creating Image Components - II

4. Using images (without image components)

• When using images directly from a remote server, creating image component may not be applicable. So use <img> with ‘url’ attribute instead of ‘src’

• Use alt attribute

• When the remote server image is static and fixed (which is not going to change at all) – image components can be used with settings as image Location set to

(19)

Some Important Tips

1. For Tables

1. In general, unlike PC in mobile web, the table border is not much used because of size restrictions. So always use border-collapse style for table with CSS selector 2. <nativemarkup> can be used to render the border-collapse on all the pages (set

this in ‘nativeGlobalStyles.jsp’ once. 3. Do not set this in local themes/CSS

4. Important While using Tables with percentage, old nokia devices rendering is not perfect because of XHTML MP handled by nokia browsers in a mysterious way. So try to use % for low end device when required (say device usable Width less than 240px)

2. Image within Table

1. Do not use any text-align property for images – as it will cause gaps above and below images on certain devices

2. Use img { display:block } to avoid white spaces above and below images when used within tables’ td element

3. Dynamic Style parameters

1. Use <style> element for dynamic style parameters

2. Say if you want to pass percentage dynamically use as follows

(20)