Versions Compared

Old Version 3

changes.mady.by.user Kim Stimpson

Saved on

compared with

New Version 4

changes.mady.by.user Kim Stimpson

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

The responsive design is an alternative display mode for iShare which allows the site to respond to the size and orientation of the device upon which it is being displayed. It manages this by changing the number and width of columns and whether it should use tabs or buttons.

...

Currently, we have a single breakpoint, smaller than this and iShare goes into single-column mode, larger than this and it goes into multi-column mode. The number of columns that are displayed depends on how much space is available. Also, the columns may appear to be lop-sided, but this is due to the fact that they are dynamically built, and it’s always possible to reorder the panels in Studio.

Image RemovedImage Added

Responsive iShare displayed on a larger screen showing tabs.

...

From version 5.2.6 of iShare the following directories and files are included in the web site for the responsive design [...\WebApps\Web\ folder].

atMyResponsiveCouncil.aspx

This is the file that is requested by the user for the site. It includes references to the template file.

_atResponsiveTemplate.html

This is the template file that includes the token for the site. This should also include references to the responsive CSS which should appear just before the </head> and the JavaScript file which should appear just before the </body>.

/css/Responsive/Normalize.css

This is a CSS file which has been developed to standardise CSS across all major browsers. (http://necolas.github.io/normalize.css/)

/css/Responsive/Responsive.css

This is the main responsive CSS file which uses media queries to change the styling at different widths.

/custom.example/css/responsive/responsiveoverrides.css

This is an override CSS file which should be the last one requested in the template file. It is used to override any CSS in the main site which is breaking our responsive designs. If none of the customer’s CSS is clashing with ours, then it’s probably not necessary to include this file.

/js/ResponsiveDesign.js

This is the JavaScript file which handles the re-writing of the columns depending on the current width.

...