Mobile-Friendly The Right Way

Andrew Boon posted 23rd of March 2015 in Dolphin.pro News. 16 comments.
This is both sharing and an ever-open question. While building Trident and recently updating BoonEx we have gained a good deal of experience and insight into how web-software can be built to make websites "mobile-friendly". Conventions are all still far from definitive. Mobile web is that new frontier that has already gained strong mainstream end-user acceptance, while developers and technologies are only just checking in. In other words - it's where the fun is! 
 

User-Friendly and/or Mobile-Friendly


Generally making a site mobile-friendly means making it more simple. Fewer UI elements, generous spacing, no “on-mouse-over” tricks, legible font sizes, big tap-targets, etc. It is still important to make careful choices that consider desktop users as well. 

For example, we could just display everything in one small column, with navigation and content blocks linearly arranged one under another. Would work great for mobile devices, but absolutely unacceptable for desktops. Large screens provide space for more complex layouts and users expect it to be used. So, we build “responsive” pages that adapt layouts. 

In attempt to find the compromise or a universal technology that suits all devices we have to work a hell of a lot more on UI than ever before. And even then, when we have a working solution it takes days and days of fingers-on experimenting to see if its the right one. We can get the technology right (see the picture below for boonex.com), but when it comes for feeling we may easily be off. 



Since Trident is only about to enter Beta stage, we have thrown in a bunch of different layout elements and UI sequences. We will now look and see which are the most effective and will port the winners into Dolphin Pro. And while it’s happening we’d like to keep the discussion going - sharing screenshots, ideas and impressions with you, listening to you and making Dolphin Pro mobile-friendly together. 
 
Dolphin Pro is a production-ready platform, so we can’t just experiment with it. We need to research in advance and apply only the most proven and stable solutions. Let’s get on to it!
 
---

There will be a lot more posts in this vein in coming weeks, but for now lets focus on one little thing...

Font Sizes

 
When we switch from desktop browser to a mobile browser, a few things happen (or can happen) to text paragraphs rearrange to the new width, browser attempts to adjust size to suit screen orientation and site style defines what size to use. 

Now, are we supposed to use larger font size on small screen to make reading easier or smaller font size to fit any reasonable amount of text and text elements to the layout or use the same size as on desktop and call it a day?

So far, weve settled at about 85% of desktop-size on mobiles. But then, we are using a rather large sizes on desktop. 

Google suggests that link targets should be far apart to prevent accidental tapping on wrong links, so generally larger fonts would work better with larger spacings. Yet, make things too large and youre risking running out of screen space even before youve shown one post snippet (and sometimes we need to show at least two to suggest that theres a list of them).

There may also be situations when general answer may be challenged. Like in the example below - photo in the post has inline alignment, which in some context may be necessary for composition. Larger font sizes in such case would mean that even whole words wouldn’t be fitting. 

 
What do you think? What is your favourite best practices when comes to font sizes on mobile vs desktop screens?
 
Recommended by
 
 
Comments
·Oldest
·Top
Please login to post a comment.
wolf2217
Not sure if it's done or not as i haven't looked at any of the code for Trident but what about implementing Bootstrap?
The unfortunate part to that is changing the calls from the files or ground up customizing the Bootstrap css.
With the 12 grid layout it displays depending not just the desktop and mobile environment but also the screen size or resolution of the monitor.
Blocks can be replaced by panels etc.
It might be more work than it's worth but for those who want to customize the appearance see more of their site the time would be cut down which allows more time for development for the developer.

idk...just a thought :P
Andrew Boon
We have decided not to use Bootstrap in default templates, mostly because it would control too much of our design process and would mean constant versions synchronisation issues. I've explained my thoughts on Bootstrap here - http://www.boonex.com/n/responsive-layouts-mobile-templates-native-apps . It creates too much dissimilarity between desktop and mobile interfaces.
wolf2217
All depends on how much of it you would implement into it.
You would have the core of it installed and just the elements you want to over ride it could be done.
This is true on how there's no similarity between desktop and mobile and this is where Boonex is different.
Boonex takes things to different and higher levels so i'm sure you developers could errect a similarity.
Andrew Boon
And what are your thoughts on text, specifically? Do you find that mobile devices generally need larger to smaller font size than that on desktops?
wolf2217
My take on text size would be smaller to larger because there are still some mobile devices out there that have smaller screens.
Rotating devices make the font size appear bigger or bolder so bigger the screen or resolution the bigger the font size would be.
At a default 100% view level you could always zoom in but you can't zoom out if the text is bigger on smaller screens.
geek_girl
There is only one proper way to do this, two completely different presentations; keep them separate and serve up the proper one based on what device the user is using.
Andrew Boon
This is where I personally strongly disagree - Ive posted about it here - http://www.boonex.com/n/responsive-layouts-mobile-templates-native-apps . Different presentations mean different experience, more learning, and more frustration. And then, we have all those "in between" devices, like tablets, phablets, etc - do we create a special presentation for them as well?

We can, sure, but remember that we are talking about software - not just one site - so when you change a template, rearrange see more blocks, play with menus, etc - you would need to do that for ALL your presentations separately. At least you'd have to test and debug on all of them. So, we're trying to create just one presentation that is both linearly responsive and step-responsive, but preserving as much as possible of the layout and design on all presentation in the same way.

Ao, what do you think about texts? Smaller or larger on mobile devices?
prince64717
website should check the screen resolution and screen size..
because many phone have hd resolution like laptop but screen size is like 5 inch..

in this case font size should became bigger..is it possible to know resolution and screen size both..of remote device..

well in my phone browser i have mobile view which do the job..
and if surf website not in mobile view i can still double tap the screen to zoom..

but i seen many website ..when i open them in phone it open like an app..like trident see more u can say..but better..
wolf2217
http://getbootstrap.com/css/#responsive-utilities
same with images and other components, they can resize by appending a second property to the class, for example a button...btn btn-primary btn-lg (btn is the button itself, btn-primary is the default style of the button but can be changed to btn-success, btn-info etc. and btn-lg saying it's a large button.
Check out the link above.
Andrew Boon
Yes, Trident "checks" for screen resolution (retina/non-retina), browser window size and device. It then adjusts the layouts, but not to a fully "app-like" interface like many other sites do, because we want to preserve similar experience both on mobile and desktop.
houstonlively
RE: "because we want to preserve similar experience both on mobile and desktop."

I'll try to put into words how much I hate that concept. To me, it's analogous to holding a math class for two students, one being Albert Einstein, and the other a retarded goat.... then adjusting the curriculum so that the goat never gets confused.
Andrew Boon
It's not just about confusion. It's also about making things _possible_ in both mobile and desktop views. Dolphin is a customisable software platform, so when you're building blocks, menus, etc. it's already a handful to make them all work well on all pages - but if you add a very different "mobile" view, it becomes double the trouble. Otherwise you have to serve a dumbed-down version for mobiles where people get frustrated when they, say, can't create a group.
houstonlively
A dumbed down version for mobile users is perfect.... considering the fact that your average mobile user is a dumbed down human. I don't see the problem. Your concept serves up a dumbed down version for both platforms.
AlexT
I think it's incorrect to say just lager or smaller. Too many factors have to be taken into account.

For example for a non-adaptive site the font have to be bigger, and usually browsers do it automatically.

For adaptive sites - the situation is different. If the main site text is about 16-18px, then of cause it should be smaller on mobile, down to 12-14px (which sites usually have back in 14'-15' monitors size era). Since phone screen size is even smaller, so the target font size maybe around see more 11-12px. Also phones usually have retina screens, it perfectly displays small text.

As the conclusion something like this should work in my opinion:
16px - default font size for desktop
16px * 75% = 12px - approximate font size for the mobile

PS: px is very subjective dimension, it translates into very different real size or even real pixels on the screen, so 12px font size on mobile will be slightly different on different mobile devices.
moonsoon2u
Trident and boonex websites both are responsive but I like the boonex font size. On other hand trident layout is more adaptive then boonex.
guynuked
Been with boonex over ten years. My feedback currently is to go ahead with mobile experimentation. I use my phone a lot than my laptop :)
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
PET:0.084249019622803