Viewing computer version, mobile version?

computer version, mobile version?



User: Ben L. 7 years ago
I notice that if I make a basically locked down and simple site - no full width images - the site comes up identical on the mobile devices (even though the width is set at 1000 pixels). It's only when I start using the full width images that I find that I have to make a different version for the mobile devices.

Question: Can I just expect the simple site to play properly on the mobiles (I've tested at least two sites that work fine, exactly the same on both computer and mobile even at 1000 pixel width). Or should I beware? And make the big effort to create an entirely new version at 480 pixel width?

Just wondering.

Ben
User: Roddy 7 years ago
A page with a 1000px wide content area when viewed on an iPhone is going to be inpossible to read without magnifying and the user inputs will be much too small. Smart phone users do NOT like to magnify and have to horizontal scroll. They will just leave your site.

If you only want to create two versions of the site, I would recommend using the Mobile First Concept and to look at these layout guidelines.

A better width for a smart phone version is 375px so that the content will present well on the various sizses of smart phone in portrait mode. More info about page content width.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Ben L. 7 years ago
Thank you kindly Roddy, very helpful. Will do my homework.

As a note: my iPhone 6 displays the 1000 pixel width as a full frame, no horizontal scrolling required, but yes, magnifying is required to easily read the text ... though it does magnify remarkably easy. So the 480 pixels suggested by EverWeb is maybe being a bit optimistic?

I think I'm going to have a different issue. I've figured out how to do the 'mobile' versions (I can fix the width fairly easily). But someone just tested it on an iPad and from her description it sounds like the iPad is trying to play the 'computer' version at 1000 pixels ... and is not automatically being routed to the mobile version. I know not iPads. Though I did hear a rumour that one has to SET one's iPad to receive either the computer version or the mobile version. I'm not super enthusiastic about the idea of having to do THREE or more versions of a website.

Will read all your suggestions, thank you again, and report back...

Actually ... just started reading your article on the mobile issues. Looks like all my answers are to be found therein. Terrific. You are an ace R.


Ben

Last edit 7 years ago
User: Ben L. 7 years ago
Thank you kindly Roddy, very helpful. Will do my homework.

As a note: my iPhone 6 displays the 1000 pixel width as a full frame, no horizontal scrolling required, but yes, magnifying is required to easily read the text ... though it does magnify remarkably easy. So the 480 pixels suggested by EverWeb is maybe being a bit optimistic?

I think I'm going to have a different issue. I've figured out how to do the 'mobile' versions (I can fix the width fairly easily). But someone just tested it on an iPad and from her description it sounds like the iPad is trying to play the 'computer' version at 1000 pixels ... and is not automatically being routed to the mobile version. I know not iPads. Though I did hear a rumour that one has to SET one's iPad to receive either the computer version or the mobile version. I'm not super enthusiastic about the idea of having to do THREE or more versions of a website.

Will read all your suggestions, thank you again, and report back...


Ben
User: Roddy 7 years ago
If you don't create a separate version of the site for tablets, these users will get the full site version which is not good at all.

In the Mobile First article I am suggeting you design your full site for tablet users. Make the content width 800px or less and make sure all users inputs are suitable for fingertips. This means NO text hyperlinks - use CTAs instead - and make sure all user inputs are at least 32px wide by 28px high.

Use the full width widgets so that content will be mch wider when the site is viewed on computers and read the tips on layout to prevent vertical overlapping.

EverWeb's suggested width of 480px for a smart phone version of the site presumably expects the visitor to use their device in landscape mode. Most people browse in portrait mode and would normally only use landscape to view a slideshow with landscape images or a movie.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ben L. 7 years ago
Got it. I think I will have made four separate versions of this site before I get it right. Will follow all your instructions to the letter. And I like the idea of being able to use the full width ... and have it work on the mobile devices. I also noticed on the Rolex computer site (computer version) that they were using the CTA's instead of text hyperlinks ... at least I think that's what a CTA is -- the three or four vertical bars, that dropdown, right? I thought it looked quite elegant. Now we'll have to see if my 89 year old super-Mom will know about the CTA's icon. (My son's into fancy watches, that's why I was perusing the Rolex site, not a usual visit for me.)

Will try all you suggest this morning, and report back. Thanks mucho again Roddy, so glad you are there.
User: Roddy 7 years ago
A CTA is a Call To Action link tab. See THIS page for more info.

The three bars or "Hamburger" icon is now the universal sign for a navigation menu - mainly on sites for touch devices. In the case of a mobile first design for tablet and computer, the default navigation would appear on computers to be replaced with the hamburger icon and a menu which appears when it is clicked.

There are two widgets for creating this type of menu but, at this time, they are only available for single level sites. Open the Click Nav and the Slick Nav demo pages and reduce the width of the browser to that of an iPad in portrait mode and you will see the default navigation being replaced by a tab which opens a touch device style menu.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ben L. 7 years ago
Hi Roddy,

I've been eyeing those two, Click and Slick. I'd love to use one. I think I have a dilemma though. I've been warned not to have a lot of choices in the navigation, that it confuses and slows-down potential visitors/buyers. I'm trying for the first time to use social media to promote something I've done; so I'm listening to advice. Thus I've put three of my pages one-layer down (making fewer top level choices). At least I think they are one-layer down. Perhaps there is a way I could still use the 'Hamburger' ... but I'm not well enough versed in the protocols. I am noticing that on the cell-phone the visitor might easily be confused, as it seems one has to double-tap the text on the top line (whenever there is a drop down additional page). I was confused.

The site is www.soundtosleep.com ... and I'm totally open to any advice from an expert that might be floating around out there?

Ben
User: Ben L. 7 years ago
Hi Roddy,


Downloaded, installed, opened the simulator. Using their new beta version. It seems when I load the site into the iPad simulator I'm getting the same thing as I was getting when I had a full 1000 pixel wide version of the site. The new version I'm trying to open is actually the 468 pixels recommended. It looks like one of the main issues is the full width image as Browser Background. It isn't contained in the iPad screen ... remains 'huge' to put it mildly. So the text and shapes I've created to float on top are actually floating on an incomprehensible image coz it's so big.

I looked at my own site ... www.bengedlow.com ... which was done at 1000 pixel width, but with no full width images, just very simple and everything contained within the 'page', and it seems to load on computers, tablets, iPhones in exactly the same way, and works.

But I would love to be able to use the full width function, because it makes much more dramatic sites. And I've just REBUILT two sites with the full width function in play. Neither of which will work on an iPad tablet setup.

Any ideas?

Ben
User: Ben L. 7 years ago
Hi Roddy,


Downloaded, installed, opened the simulator. Using their new beta version. It seems when I load the site into the iPad simulator I'm getting the same thing as I was getting when I had a full 1000 pixel wide version of the site. The new version I'm trying to open is actually the 468 pixels recommended. It looks like one of the main issues is the full width image as Browser Background. It isn't contained in the iPad screen ... remains 'huge' to put it mildly. So the text and shapes I've created to float on top are actually floating on an incomprehensible image coz it's so big.

I looked at my own site ... www.bengedlow.com ... which was done at 1000 pixel width, but with no full width images, just very simple and everything contained within the 'page', and it seems to load on computers, tablets, iPhones in exactly the same way, and works.

But I would love to be able to use the full width function, because it makes much more dramatic sites. And I've just REBUILT two sites with the full width function in play. Neither of which will work on an iPad tablet setup.

Any ideas?

Ben
User: Ben L. 7 years ago
Roddy, is your 'full width' widget any different than the EverWeb standard protocol for 'full width'? I can't get the 'full width' to work on the tablet simulator. And yet when I load other full width sites, they work fine on the simulator.

Just wondering if there isn't some little bit of code missing somewhere. Or maybe I'm doing something wrong. I'm going to try switching from the EverWeb protocol to YOUR full width widget this morning, to see if there is any difference with the simulator.
User: Ben L. 7 years ago
Roddy, your 'full width background' widget works with the tablets. The only little buggy thing is that I have to publish the page to SEE how the layout works ... very tricky for doing layout. But the site is displaying correctly on both computer and tablet, and I've got the reroute set for the iPhone version. Mmmm. And now I'm wondering if the 478 pixel width computer/tablet version would actually work on the cell phone. Would be nice to be consistent across all platforms, and not have to rebuild the site for the small mobile.


Post Reply
You must login or signup to post.