When designing the UI for a web application, what are the things to look out for to ensure the UI doesn't break when someone zooms in or out with their web browser?
Also, how do the different browser zoom types play into this (i.e. I know IE6 zooms differently than Chrome, and I assume mobile browsers are different from that too)?
Most modern web browsers use proper zooming. By this I mean that the page zooms in an out as you'd expect if you were using a lense to zoom in and out.
IE6 and some older versions of Firefox etc use text increasing rather than proper zooming. For those browsers, the unit type you use to size your elements will change how the zoom affects the look of your site.
For example, in IE6, setting widths/heights in px will result in a fixed layout that once zoomed, only changes the size of the text and not the containers themselves. Setting these same elements to use % or em then allows the elements to resize.
With regard to "what do I look out for" I think it depends on what browsers you're wanting to support. My own preference is to develop for modern browsers. If an IE6 user wants to zoom and it breaks the layout then I'm happy to live with that.
Related
Goal
My goal is to make our WebApp more accessible to dynamic font sizes. Especially for accessibility reasons, where people set bigger font sizes.
Context / Progress so far:
The WebApp is used on desktop and within our native Apps as a WebView. Our target audience uses mainly:
Safari desktop browser
Chrome desktop browser
Safari on mobile devices (iOS) as a WebView
Chrome on mobile devices (Android) as a WebView
So far I found out, that the 'normal' way to do this, is by setting font-size: 100% on root/html level and then reference it via rem (or through em but that sounds a bit hard to maintain on a multi level architecture).
The problem is, that this does not work for the Safari WebView case. Here it seems necessary to read a special variable, which I found on this Thread: How to get the accessibility font size for iOS and Android in Xamarin.Forms so I can change font-size in a HTML WebView?
Now it really starts to get interesting, because using this value gives different values depending on is it Safari Desktop or Safari WebView, while Chrome of course does not know this value and uses its 'normal' 100% value. Here is a list of what I debugged, using normal font sizes:
Chrome: 16px
Safari Desktop: 13px (with -apple-system-body)
Safari WebView: 17px (with -apple-system-body)
The Problem
My goal is to have one consistent UI across the browsers, so if I would just use those values combined with rem I would get a way smaller text size on Safari than on Chrome for example.
My main question is:
Is there a more elegant way to solve the dynamic font size issue, while keeping a consistent UI across browsers? Or is there an elegant CSS / LESS solution towards unifying the above values to one value, while keeping it reactive to system font settings?
Not desired solution:
The only solutions I can think of, would be reading out those values with javascript, detecting the browser, normalising it accordingly and setting it back. But I would like to avoid that solution, because it seems quite unstable to me, especially if maybe at some point Apple updates Safari to use different standard font sizes.
I would like to use the 'zoom' property to make bigger the content of the page for the mobile devices with high DPI. I know that the firefox doesn't support it. But If it works good for safari and chrome is ok for me.
I saw some recommendations not to use it.
Should I use zoom property?
Zoom is a non-standard method of scaling content
https://caniuse.com/#search=zoom
Check media queries to change size of an element for mobile
https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Just started doing some cross-browser testing for my website and there's some weird things happing with my home page in Firefox.
The slider looks to be smaller than the thumbnails below it, the thumbnails are touching each other, and when you resize your browser, the thumbnails don't scale down (they just overlap more). If you look at the site in Chrome, Safari, or Opera (even chrome/safari on iOS), the slider's width is the same as the thumbnails below, there's space between thumbnails, and everything scales properly when resizing the browser.
I'm also noticing some lagging when I hover over the thumbnail (CSS3 animation), again only when I'm in Firefox.
What gives? What am I doing wrong, or does Firefox get goofy with responsive sites? If it matters, I'm using this framework
EDIT: Also, if you click on any of the thumbnails, it seems like the images on THOSE pages look fine and scale properly. Seems like just the home page is affected.
Welcome to the frustrating world of web development. Every browser interprets code differently, THAT is the number one challenge of our industry. Even the same browser foundation interprets differently from version to version. Internet Explorer HAS ALWAYS been the worst browser to design for because it is usually 2-3 iterations behind everyone else. AND you HAVE to worry about IE, because it ships with most PCs, it is the most prevalent browser.
So, you have to think about who your audience is, and design on the platform most appropriate for that platform. For example, if your audience is graphic designers, you are safe to develop for modern browsers. But if your audience is the casual, not-to-techie PC user, you have to tailor your designs for IE. (sorry).
You can use a tool like http://browsershots.org/ during development to see how your site is performing in a wide variety of browsers. Or https://browserlab.adobe.com/en-us/index.html#
You then have to learn about the "hacks" to make your site display similar, regardless of the web platform. THAT is an immense subject area and you will have to learn and do research until you understand it.
BUT ALL OF THAT BEING SAID, THE MOST IMPORTANT DESIGN PROBLEM TODAY IS MAKING A RESPONSIVE WEBSITE THAT ADAPTS TO BOTH LARGER AND SMALLER SCREEN SITES.
Mobile is the new black. Going forward you should ALWAYS develop with mobile in mind, unless you KNOW that your audience is NOT the mobile-type, and that is the exception, rather than the rule.
Added max-width="100%" height="auto" width="100%" into my img tags for the thumbnails and it seems to be working
While searching for an easy way to make my menu (http://www.ck-game.com/newIndex.html) fit screen size I stumbled over the possibility of using the browser's zoom functionalities (zoom, moz-zoom, etc.). I could imagine that it's much easier than using "em", "%" and media queries to make an elastic layout, more so because I have background-images which need to keep aspect ratio. Is there anything that speaks against using it besides someone wanting to actually zoom in/out and then the menu would adjust to it?
EDIT:
Proof of concept: http://www.ck-game.com/newIndex.html
Please try with different viewports and see how well it adapts :) Tested in IE9, latest FF and latest Chrome. Works on Android devices, breaks on most iOS devices.
I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.
here is an example page from the page as it stands to try this:
Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.
Thanks.
It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.
EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.