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 it’s 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 let’s 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, we’ve 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 you’re risking running out of screen space even before you’ve shown one post snippet (and sometimes we need to show at least two to suggest that there’s 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?
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.
The new Dolphin solution is powered by UNA Community Management System.
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
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.
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.
We can, sure, but remember that we are talking about software - not just one site - so when you change a template, rearrange see more
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
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.
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.
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