WebCenter User Experience and Interaction From iPads to Xbox

These breakpoints will usually reflect the resolutions you would want to support – 240px, 320px, 480px, 640px,
800px, 960px, 1280px+. This is not definitive, but servers as a useful guide. As devices change, graphics cards
improve, and manufactures compete to have the highest resolution displays, web developers must continue to
evaluate the resolutions supported by their sites.
If you’re not using the web developer toolbar plugin within Firefox then you can use http://responsivepx.com/ that
allows you to define the dimensions and see how your site works within your predefined breakpoints.
CSS3 Media Queries
CSS media queries have been around for some time now. CSS2.1 allows developers to define stylesheets to be used
for printing a page, WebTV, projector display and daily device use, but now with CSS3 we can define the styles that
are used based on the following additional queries: max-width, min-width, device-width, orientation and color.
In the past web designers have either had a single global stylesheet or have broken them into multiple styles
(layout, colours, fonts) to be reused and allow easy corporate brand management across their WebSite, Intranet,
Extranet and Portal; but they have never really been widely used to support more complex multi-resolution capable
devices.
With CSS3 we can do this much more easily and can apply required transformations for breakpoints on the fly. For
example, if I rotate the screen I can load in a style to reposition crucial site elements, and if I resize the screen I can
load in another style to make the site adaptive.
2 ways of using CSS Media queries:
1. Inline within the style sheet you can encapsulate the required css within the query –
@media only screen and (max-device-width: 480px) {
body {
}
}
background:red;
2. Within the Media attribute of the html tag
For browsers that do not support the CSS3 Media queries a javascript patch is available from here
http://code.google.com/p/css3-mediaqueries-js/or https://github.com/scottjehl/Respond
Voice Enabled Integration (Microphone)
Speech input is one of the latest innovative browser technologies to appear.
It’s easy to implement and there are several obvious uses:
o
o
o
o
Assistive dictation for those with impaired mobility
An alternative input option for mobile phones and tablets
Provides support for an environment where a keyboard or mouse is impractical
Enhance web site features like Search and Navigation.
© 2012. Fishbowl Solutions, Inc.