I’ve been working on a site now for some time and it all looks good on desktop or when viewed on a retina screen iPad as well as my mobile phone. I have spent countless hours messing around trying to find perfect compromises for every part of the site but then I go on to http://mobiletest.me and discover that what looked good on an iPad doesn’t necessarily fit on an iPad mini and lets not even start with a Nexus 7…
My point really is just how far should we go in order to accommodate site visitors? If I make my text smaller to fit on a Nexus or iPad mini it doesn’t look as good on another device, so this feels like a real no win situation. How are the rest of you treating this?
I’d suggest we should stretch ourselves to the point of discomfort.
It seems to be widely accepted that mobile browsing is now greater than desktop so if you want to cover all potential customers then you need to accommodate those visitors.
I’ve just checked my site through the whole gamut at mobiletest and it seems to stand up pretty well on every device. I’m not a developer so if I can get something looking reasonable it should be fairly basic for the pro’s.
Most stacks are responsive now, including the defaults in Stacks 3, so armed with a responsive theme I’d suggest it’s more of a win win.
I’ve just looked at this in detail across a range of devices and normal sized body text is never a problem so I can get it to break down nicely for mobile alongside images. Everything is responsive and I’m using Foundation.
The key problem is when I enlarge certain portions of text that I want to emphasise in a paragraph stack and then I find it doesn’t always break in convenient places. A sentence enlarged to 140% in a paragraph stack might look perfect on an iPad or desktop but then I check on an iPad mini and there is one word that has dropped to a second line. I fix that by making the text a little smaller but then it doesn’t look quite so good on the iPad or I find another mobile tablet of a different size where it doesn’t fit.
I can try turning these lines into header text but then I lose the ability to colour the text or add italics etc as styling.
I’m already building with a mobile first approach; that’s the whole premise behind Foundation and I understand that any site not built with mobile users in mind is pretty much a lost cause in 2015.
After looking at this closely what I have is a technical problem with paragraph stacks after selecting some text and enlarging it to a higher percentage inside Rapidweaver. Whereas normal body text or images will scale beautifully on any device, text that has been enlarged has a tendency to break in unusual places on certain devices and it’s not a good look.
With so many tablets and smart phones out there of varying sizes matching all of them seems to be impossible if what I am seeing with these emulators is correct. There is probably a clever stack out there that would fix this issue. Previously I was assuming that if something looked good inside Rapidweaver in preview mode it would work on other tablets and smartphones but that is not automatically the case.
I’m also beginning to see what a challenge it is to ensure that your site looks good on EVERY tablet. Since responsivity has been pushed, every site now takes about 3 times as long to build because you have to check on as many tablets as you can and build accordingly! It’s a shame I can’t put my prices up accordingly too ;-).
The whole point of responsive design is that you can’t necessarily design specifically for every breakpoint So long as it reflows acceptably that’s probably all that you need worry about.
I think “reflows acceptably” is actually the key phrase here. In other words just how far do site visitors expect a site to format so everything looks correct for their own tablet or smartphone. Will they shrug if they see two words awkwardly sat on a second line or think of it as a major fail because it probably won’t occur to them that their own choice of tablet is a problem.
Stepping back to take a pragmatic view perhaps we should just try to discover which smartphones and tablets are used by 90% of visitors and not compromise the overall presentation for the remaining 10% or is the mobile share of the market too fractured for this?
From past experience with an old site that wasn’t responsive I saw that 90% of my sales came from users of the most recent operating systems and browsers, which may suggest they have more disposable income or they are simply more inclined to buy online. For every sale from a Windows XP user there would be dozens from the latest version of OS X. Following this logic I think it makes sense to mainly concentrate on tablets or smartphones made within the last 3 years and only the more popular ones.
Perhaps something we could add to the RW7 wish list though would be more preview options for tablets & smartphones if that is possible.
We’re unlikely to add other presets, as maintaining them beyond iOS is time-consuming. However, you can drag the width to any width of your choosing already
IMHO: you’re splitting hairs if you spend time trying to fix a single word, on a specific device, appearing on a second line. Maybe, I dare say, the content could be tweaked?
Obviously, if such a minor layout snafu causes a considerable affect on sales / conversions / < insert metric here>, then maybe there’s an argument for losing hours (or days) getting it to line up. But if the site doesn’t break (as in: the text doesn’t extrude into another element, making it illegible or otherwise appear broken), your sanity and time is probably better used elsewhere.
That all sounds fairly reasonable but could we extend the range of iOS supported devices, even as a user preference? I had no idea that a couple lines of text on my site were not looking good on the iPad mini until I checked on mobiletest.me.
I’ve been able to test at home on an iPad with retina display, which pretty much matched what I was seeing inside RW. That’s why I was surprised when the emulator for the mini showed different results.
I have Xcode installed here but hadn’t been using it to preview site adjustments until now. I’ll try to find out more about the Google version as well.
I was also wondering about the differences and accuracy in display for the iPad and iPad mini both within RW and emulation sites like http://mobiletest.me/ . After testing on borrowed iPad and iPad minis, i noticed that they both do in fact display the same, and concluded that emulation only goes so far in accurately displaying what one will actually see on either iPad. So a few days ago i went to the Apple store, compared the iPad and iPad mini side by side just to make sure the page display was the same (which it was), and bought the mini 2. It was worth it for the peace of mind.
So long as it reflows acceptably that’s probably all that you need worry about.
