Mobile Optimization

[Rama Devi]

Bill, the Desktop version looks fine. The Mobile version has a problem. The website looks terribly customized when used in the portrait mode. However the website looks awesome when used in the Landscape mode. I have shown the website to a few members of our team. Almost everyone complained that the website is poorly optimized for mobiles. No one cared to rotate their phones & view the website in the Landscape mode. I had to tell everyone personally to rotate their phones.

This looks like a major problem. Rather, can we set the website in such a way that it opens up in the Landscape mode / full screen by default?

[Bill Robbins]

We can always make change to the screen sizes that are generally portrait on a smartphone. What specifically would you like to do differently?

[Rama Devi]

The website is appearing good in Landscape mode. I checked it out in quite a few mobiles. Its perfectly optimized. So I want the website to open in Landscape mode by default on all mobiles & tablets. I dont want the portrait mode. Lets remove it completely. Even if the mobile is in portrait, the website should be in Landscape. Many of the mobile apps & games these days are designed like this. No portrait. Only landscape

[Bill Robbins]

I believe we can leave them a message to rotate their device while hiding the site when viewed in portrait on a phone. Give this a try:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 519px) and (orientation: portrait) {
   
   	body {
   		display: none;
   	}
   	
   	html:after {
   		position: absolute;
   		left: 0;
   		bottom: 0;
   		right: 0;
   		color: #000;
   		text-align: center;
   		padding: 5%;
   		top: 50%;
   		font-family: Open Sans, sans-serif; 
   		font-size: 16px;
   		content: 'Please rotate your device';
   	}
   
   }
   

3. Update your settings.

Let me know how that goes and have a great Saturday,
Bill

[Rama Devi]

Bill, I tried using the code. But hiding the website in the portrait mode doesnt look good. This looks like an error message/ spam message. Moreover, many people usually turn their auto rotation off. I dont think they will bother to open their settings & enable the auto rotation.

Isnt it possible to set the website in such a way that it opens only in Landscape mode by defualt for mobiles & tablets? Many games & apps these days are optimized to work only in landscape. No matter the auto rotation is turned off, the app will still open in Landscape. There will be no portrait. Cant we do like this?

[Bill Robbins]

You can do that with an app very easily. Websites aren’t native apps though and don’t have the same access to the device that say a game app does to force the orientation a specific way.

It may be possible to rotate the content. I haven’t tested it out, but you’re welcome to try. Instead of that last snippet, you would do something like this:

@media only screen and (max-width: 519px) and (orientation: portrait) {

	body {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

}

Bill

[Rama Devi]

Bill, you are almost there. As you mentioned in the code, the content is rotated by 90 degrees. See how it turned out in the snapshot below.

This is not what I want. I want the website to open in Landscape by default (not rotation). There should be no portrait for the mobile version. All the content should work only in Landscape. You are almost there Bill.

Cheers

[Bill Robbins]

You can’t do that with a website. The closest you’ll be able to get is to rotate the content.

[Rama Devi]

In that case, instead of hiding the website in portrait & leaving a message, it will be good if we can Blur the website in portrait & then display a message on top of it.

Also it would look good if the message gets displayed in a Box

[Bill Robbins]

You can try something like this:

@media only screen and (max-width: 519px)  {

	body {
		-webkit-filter: blur(10px);
		filter: blur(10px);
	}
	
	html {
		position: relative;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	html:after {
		position: absolute;
		top: 40%;
		padding: 5%;
		color: #fff;
		width: 45%;
		left: 20%;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.64);
		font-family: Open Sans, sans-serif; 
		font-size: 16px;
		content: 'Please rotate your device';
	}

}

instead of the earlier snippet. Good luck with your launch.

[Rama Devi]

Thanks a Lot Bill. That works. I have one last Question. Am not sure how my team would respond to this Blur effect. Is it possible to optimize the website such that it doesnt expand full screen on the portrait mode? If yes,give me a code that will make it fit perfectly in the portrait mode ( without the edges being cut ). I will use the one that best fits my need.

The size of an iPhone 5s will work. I guess, if the website fits perfectly on 5s, it will fit much better on iphone 6 ( due to the larger screen size )

I think I have covered all the questions. Thanks a Lot Bill. You have been very supportive all these days. I Really appreciate that. And apologies for the tons of questions I asked. Am new to all this stuff. So found it a bit difficult to get going initially

Cheers, have a great weekend

[Bill Robbins]

I’m glad that helped out. I thought a bit about how you could set a fixed size for the blurred site. What you could do is create a background image and blur it. Then size it to be the width you’d like it to be. Lastly you could then set it as the background of the HTML element on smaller screen sizes. The snippet above would change a bit to be like this:

@media only screen and (max-width: 519px) {

body {
display: none;
}

html {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(http://yoursite.com/image.jpg);
background-position: center top;
}

html:after {
position: absolute;
top: 40%;
padding: 5%;
color: #fff;
width: 45%;
left: 20%;
text-align: center;
background-color: rgba(0, 0, 0, 0.64);
font-family: Open Sans, sans-serif;
font-size: 16px;
content: ‘Please rotate your device’;
}

}

Replace this http://yoursite.com/image.jpg in the snippet above with the URL to your background image. You can get the URL by clicking on the image in your media library. The URL to the file will be there.

So with this, we’ll be hiding the site again and just simulating the blur effect.

[Rama Devi]

Oh great, I will try this as well. But what I mentioned in my previous post was, ” I am not sure how my team would react to this blur effect. If they dont like it, is it possible to optimize the portrait such that the website fits full screen even in the portrait? For this this to happen the wesbite should obviously compress in size though.

Please have a look at the below website. You will understand what I mean ” http://www.tupaki.com ” This website is perfectly optimized for both the Portrait & Landscape. It is fitiing full screen both in portrait & landscape

Our website is perfectly optimized for Landscape, but poorly optimized for the portrait. If we can optimize it in such a way that it fits full screen even it portrait, it will be great.

[Bill Robbins]

Taking the time to make portrait work for you would be the best solution far and away. Most visitors that see anything that wants you to rotate your phone will likely leave immediately.

Your home page is really very simple, with just these image blocks. If you’ll switch from using background images, to using images in the foreground (inserted via widget instead of theme options) then they will resize automatically so they are always fully visible. That will take care of most of the image and text issues you’re running into on your home page.

Have a great week,
Bill

[Rama Devi]

Good Morning Bill, you are right. None of my team members liked the blur & the message concept. Everyone wanted the portrait to fit full screen. The problem is not only with the home page or background images. All the inner pages of the website including the home page are poorly optimized. Just open the website & view it on your mobile. Moreover, we are planning to bring in a variety of models & services very soon. The website will become big with almost 50-75 products & around 20 product categories.

Please help me out with the code that will enable the website fit perfectly in the portrait. I have no issues with Landscape. It is perfectly optimized. I want the portrait to be as good as landscape. The major issue with portrait is the website is expanding 3-4 times more than the width of the mobile. If we can set the website in such a way that it expands only as much as the screen, the problem will be solved

[Bill Robbins]

Hope you had a nice weekend. Change out your images on the home page first. After you’ve done that, let me know specifically what else you’d like to change. I can assist with specifics, but I know to exactly what you want to change.

[Author]

Posts