Add value to your mobile by designing for portrait and landscape modes

Mobile Website Design

Good practices for iOS SEO Optimization interfaces indicate that users expect to use their mobile phone in any orientation (portrait or landscape) and it is necessary to determine, when designing an application, if it will respond to that expectation.

One way to manage the shift is to simply adjust the layout so that it is optimized for portrait and landscape, as does La Presse. Moreover, this approach is very similar to the adaptive design in terms of user experience.

By pivoting their mobile device, users hope to “see better”, “see more” and / or “do more” and there are many ways to answer this desire, including:

Focus or deploy interface elements (eg. YouTube);
Present content in an alternative manner (eg. Calendar);
Offer additional features (eg. Klout).

The YouTube application

In the YouTube app, the landscape mode automatically hide the navigation bar buttons and text content, allowing maximum space for videos. Thus, the portrait mode provides an ideal interface for browsing and searching while landscape mode offers a more immersive experience for viewing videos.

The Calendar application

In Calendar, Portrait mode allows you to view its agenda with a view to standard list, day and month while landscape mode allows you to view its agenda with a view of typical week. Thus, the application adapts to different user consultation needs.

The Klout app

When a user visits their Mobile SEO Klout profile portrait mode allows him to consult his score so far, social networks that are connected to their account, people that influence, etc., but when his camera rotates, the Users can access an interactive graph of his score for the last 30 days.

These examples highlight the fact to take into account the orientation in the design process can be the source of an enhanced user experience. It is important to note that a feature that depends on the orientation of the phone can be cons-intuitive especially as, in some cases (including that of YouTube and Klout and KLEAR MOBILE SEO COMPANY), landscape mode can only be activated for specific interactions. For example, in the Klout application, it is impossible to see its notifications in landscape mode if the user has rotated the device from the “Notifications” screen, but nothing happened, it is not likely he will try to rotate it again from another screen. Thus, it is important to provide visual clues to communicate to the user that there is something else and make it more seamless experience. ING Direct has understood this principle by integrating a toggle icon:

Similarly, Avi Itzkovitch Smashing Magazine shows three ways to integrate this toggle icon to an interface:

Although it is preferable to offer users an application that manages policy changes, it is possible that some tasks or some settings are adapted to one mode. For example, for the Passbook application, the screen orientation is locked in portrait mode in order to facilitate the reading by the optical apparatus.

Finally, in addition to meeting the expectations of users, the design of mobile applications in both directions for creating richer interactions and to experience more immersive experiences. Portrait and landscape can be used in a complementary manner and above all, very creative!

Feel free to share your examples.

Keywords: application, user experience, interface, mobile, landscape, portrait
You will like also:

2015: the year of the mobile with Google?
Back on the UX Camp Ottawa in 2014
Design web application four outstanding examples (which do not fall into the trap of overdesign)
Adviso encourages athletes

Have you ever noticed the word “mobile friendly” or “mobile” in the search results pages on Google when doing a search on your smartphone?


On 21 April it is likely the only results, as Google Mobile SEO announced an algorithm change for the results mobile version.
What does it mean?

If your site is not optimized for mobile, it will be less well positioned or missing results of searches on mobile. In other words: no mobile version of a site, no result on Google mobile, less traffic from Google on your site, fewer conversions!
Why the change?

You happened to fall on a website that is not optimized for mobile while you were on your mobile device? Have you had to pinch the screen to zoom in and out? Pressed the wrong button because it was too small? These constraints are a sign of inadequate user experience.

Google Mobile Marketing Agency continues to improve its user experience with small or large changes of algorithms, for example to return more relevant search results based on user intentions.
This is a Win-Win for Google and the user, but what about for website owners?

Those who jumped on the bandwagon of the responsive or adaptive design for their last redesign are already well prepared. Those with release should also get out except for those who have only transformed certain pages or sections of the mobile site, we see quite regularly. In this case, it is only the pages to be put forward by Google on phones. Note, however, that Google encourages responsive design over other methods.

The impact will be zero for searches on desktop, but as we mentioned a few weeks ago, mobile searches are growing rapidly, even in Canada. This algorithm change will be major, as announced Zineb Ait Bahajji Team Webmaster Trends in March:

Google When They Say About did annoncé the mobile-friendly ranking algorithm That Would Have this a “significant impact” on the mobile search results. This is key, it is the only mobile Impacting results and Even so, it will-have more of an impact than Panda or Penguin. Source

How to know if you’re ready?

Google offers a tool for developers to validate the pages of a site and whether their design is optimized for mobile: Mobile Compatibility Test. Be sure to validate the important templates for your site, the pages of conversions, products, sections of pages, performance products, etc. Here is an example of an optimized page for mobile:

mobile Compatibility Test

You can also quickly see the Google Mobile search results if your site has the mobile site mentioned, representing a possible change in April 21. If several of the results of your website does not indicate that reference, you should worry.

You can also see, through Google Webmaster Tools in the search Traffic menu> Search queries, the traffic you currently receive mobile research to evaluate the impressions and clicks that are at risk. If there is already a wide variation between your positions on desktop vs. mobile, Google already penalizes these pages – it will be important to watch it closely this week.
google webmaster tools search queries

A more advanced tool to evaluate the mobile experience in a granular manner, directly via the Mobile Emulation Tool function of Google Chrome browser. This video, created by Annie Cushing explains in detail the use of this tool as part of an analysis of your pages.
Other things to check

Make sure your robots.txt file is not blocking access to Google mobile to your pages and JavaScript and CSS files.
Check the download speed of your mobile pages because it has an impact on the positioning. You can use it to make the PageSpeed ​​Tool, Google tool for developers.

What if important pages are not optimized for mobile?

If you have not mobile at all, it would be time to think seriously!

If you have a mobile site quickly talk with your agency and / or your front-end development teams and ergonomics to perform a mobile audit and implement fixes to jigs or to pages that are not optimal.
In most cases, these three problems are involved:

Tactile elements too close: buttons or fields are not enough spaced, making them impassable with a touchscreen
Window-configured display: the display does not update as the screen size by posing as a shrunken version of the desktop version
Font size small: the police do not refresh depending on the size of the screen, making it unreadable unless zoom


If you do not have a site with important pages are optimized for mobile, your visibility on Google will be diminished. Also, expect more changes in this direction this year … Remember to optimize your container as your digital content so that they are mobile-first and take into account the user experience.

Keywords: google mobile, mobile marketing, mobile site, mobile strategy