Mobile web app: Five practices for handling device orientation changes
Christian Karasiewicz 270005XS4E Visits (6219)
This blog post is contributed by Raeid Saqur, a mobile specialist and consultant with IBM Interactive Canada and AIS.
Device orientation handling is often a hot topic of debate and angst among mobile web app developers. In my role as a tech lead in various projects, I myself have come across this issue many times. In this post I will try to summarize some best practices from my experience, hoping this will help a lot of developers and save them some agonizing debugging sessions.
Performance is the main reason why proper device handling is imperative. This is more apparent when developing for mobile web or hybrid apps that use a web view. Here are five important practices.
Use CSS media queries
Media queries are an extension to the "media-types" paradigm that allow developers to apply specific style rules based on the device display characteristics (for example, screen width, orientation or resolution).
Cascading Style Sheets (CSS) toggling of classes is extremely fast and should be coupled with the use of orientation qualified CSS media queries for efficient (the browser handles the layout processing immediately) and minimalistic orientation change handling.
/* Portrait */
@media screen and (ori
/* Landscape */
@media screen and (ori
/* Landscape styles */
CSS rules that use width or height specified in absolute units to detect orientation changes should be avoided; instead I recommend using the above approach.
These rules can then be further qualified to differentiate between screen sizes using widths when smaller or larger screen sizes need special styling.
Avoid or minimize DOM manipulations
Code review event change handler segments
If you really have to do it, make sure that you always carefully review your code to keep DOM manipulations at a bare minimum. In fact, it is always a good idea to do a code review with peers to double check the efficiency of your code.
Avoid use of framework-specific CSS classes
It is best to avoid using these framework-specific classes. The layout processing is usually slower and could be detrimental from a style sheet reusability perspective.
Duplicate UI elements and use show or hide approach
I have personally found this approach to be very useful and effective. The idea is to have duplicate UI elements for different orientations and use CSS styles to show or hide landscape and portrait instances.
This approach should be coupled with CSS media qualifiers as outlined earlier.
There you go. Apply these five principles to your mobile web app design today for a great leap in performance.
I would love to know about your experiences and hear suggestions to improve this list. Please let me know on Twitter.