Responsive Design Mode - Info message about rendering engine mismatch

[violasong]

In Responsive Design Mode, we need to surface a small informational message when the simulated device uses a different or outdated rendering engine in reality.

For example, for iPhones, we put Firefox/AppleWebKit in the User Agent, as the browser is assumed to be Firefox iOS. At the same time, within RDM we do not try to simulate an actual Webkit rendering engine, but we use Gecko after all and focus on screen sizes, DPR and touch functionality only. Results between simulated devices and real devices may be different in terms of engine capabilities.

We don’t want to add a big warning - it’s more of a notice so users don’t get confused if they’re expecting an exact match between simulated and real device.

Relevant DSG page: https://design.firefox.com/photon/components/message-bars.html

[kriskristin]

I would like to do some work on this. Do you think this would permanently show while in RDM?

[violasong]

Hi! I'm expecting that the mismatch here is usually not a big problem, so maybe just a small part could show permanently in this state, like an warning icon that could be hovered/clicked for more info?

@martinbalfanz may have more thoughts on this.

[martinbalfanz]

I agree with @violasong: the mismatch should not be a big problem and most people should expect this to happen. A small message should be enough.

I also like the idea of "hiding" it behind an icon that's always visible, though I would be careful with a warning sign. I'd prefer an information icon instead.

So, whenever the user selects a device that is known we know we can't fully simulate, this info icon could appear in some place and contain a sentence of additional information.

[kriskristin]

Sorry it has taken me so long to get to work on this. But here I am!

@martinbalfanz Info icon is a great idea. and @violasong I will work on a visual designs once I get the message down. Here are 3 options as a starting point for the message. Let me know what y'all think.

1. "Screen are rendered in Firefox Gecko, which may cause differences between simulated and real devices."
2. "In Responsive Design Mode, screens are rendered in Firefox Gecko. This may result in unexpected differences when viewed on an actual device."
3. "Responsive design mode focuses on DRP, screen size and touch functionality. Some visual and functional differences may occur in devices that do not use Firefox Gecko."

Any feedback on the message is appreciated, especially since I am a UA String/rendering engine novice.

What do you think of having a clickable "learn more" link to a MDN page or other documentation at the end of the warning?

Also, in the MDN page about RDM it describes what I understand as a different scenario, that UA string is set to the default browser/engine on the selected device. Is this a planned change? Or am I confused?

[martinbalfanz]

I think a learn more link makes a lot of sense. The MDN link you added might be the best place, though the content needs to change. Since we can't simulate different browser engines, we will change the behavior from "default browser on the device" to "Firefox on the device". This is pretty much why we want to have that warning :)

Re: messaging: I tend to like the 1st best. It's short and to the point, but it may be a little bit technical as not everyone might know what Gecko is. The second one sounds a bit negative to me. It sounds like Firefox is not the right tool for testing and lacks confidence. The last one is probably the most accurate 🤔

Maybe we can find a smart mix between the first and third? For example: "In Responsive Design Mode, only screen size, DPR and touch events are simulated. Differences between simulated and real devices may occur."

[kriskristin]

@martinbalfanz Thanks for the feedback on the message. I'll go with your suggestion in my first iteration and we then see if we need to make further changes.

@violasong I'll make a few mockups for review by the end of the week.

[kriskristin]

Here is a starting point for visual implementation. It needs a lot of visual refinement, but before I work on that I would like some feedback on the overall solution.

I used the helper pattern from Photon. I wonder if we should have a title similar to the example to give more context.

Photon Relevant Helper Pattern

[violasong]

This is looking great! Nice find in the design system 🙂. Maybe we could call it out a little more by using the white-on-black version of the icon. (The other icons will be shifting to white on black anyway.)

One other thought - maybe this icon should be to the right of the touch icon, since it is related to that one as well.

Not sure what a good title would be.

On Sun, Mar 10, 2019 at 8:43 PM kriskristin [email protected] wrote:

[image: Screen Shot 2019-03-10 at 10 32 57 PM] https://user-images.githubusercontent.com/12438022/54098890-85243f00-4384-11e9-80b2-d66bcf16495f.png

Here is a starting point for visual implementation. It needs a lot of visual refinement, but before I work on that I would like some feedback on the overall solution.

I used the helper pattern from Photon. I wonder if we should have a title similar to the example to give more context.

Photon Relevant Helper Pattern [image: Screen Shot 2019-03-10 at 10 19 04 PM] https://user-images.githubusercontent.com/12438022/54098977-07acfe80-4385-11e9-8de6-ab71a2688c3e.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/firefox-devtools/ux/issues/11#issuecomment-471394567, or mute the thread https://github.com/notifications/unsubscribe-auth/AADauurIwekGLQ6IkZl82eG_dFgFCb90ks5vVdDKgaJpZM4WGxJp .

[kriskristin]

Thanks for the feedback. I'll make those visual changes.

Title could be 'Rendering Engine Mismatch', although that seems too complex and not user friendly at all. In this case a title might not be necessary.

[kriskristin]

Still working on this.

@violasong Do you have a mock-up or screenshot of how the white on black icons will look? Will the background be a rectangular & button-like?

[kriskristin]

@violasong Just pinging you again, to see if you have a mock-up or screenshot of how the white on black icons will look?

[violasong]

Hey Kristin, sorry for the delay! I had been thinking of the second icon here, but now that I'm looking at this more, I think the icon you were already using will probably fit better.

[kriskristin]

Thanks @violasong

I'm getting closer:

I have...

• Mock ups with titles and without.
• Doorhangers in different proportions (as I was searching through the browser UI, I found both vertical and horizontal orientations)
• The 'Learn more' text falling inline with the main text as well as separated from the main text. (From what I see, in line is the general practice, but could be wrong)

Is there anything else I should consider?

[violasong]

This is great! My favorite is the horizontal one with title and inline "Learn more." I think the title helps explain the situation in a few words, which is harder to do in sentence form.

I'm thinking more about the text itself, and I feel that mentioning Firefox Gecko, as you suggested previously, would help with understanding. I think many people would need a little nudge to remember what a rendering engine is, and even if "Gecko" is pretty obscure, having the words Firefox and Engine together seem like they would give better context.

Maybe something like this:

Rendered in Firefox Gecko engine Differences between simulated and real devices may occur. Only screen size, DPR, and touch events are simulated.

[violasong]

(CC: @tigleym @gabrielluong in case they have thoughts on the wording in my last message :))