nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Enhanced responsive design capabilities for different screen resolutions, especially in desktop environments

Christian_Sebaly

ExB's responsive design doesn't work well when you use an experience across different devices that have different screen resolutions and text/app size preferences (desktop/notebook).
An experience built with a resolution of 1440x900px loses lots of the configured adjustments and aligments. You open the app on a device with a lower screen resolution or different text/app size preferences and you get overlapping widgets and lots of scroll bars. It makes the experience look like "work in progress". % instead of px and other settings don't make a change. Unfortunately the preview function doesn't help and is even inaccurate in some cases (preview different to live view).

My suggestion: ExB should get better responsive design/rendering capabilities and more preview options to increase usability and satisfaction.

Encuentra más publicaciones etiquetadas con

Theme

Template

Page and Window

Status: Abrir

Comentarios

UofSC_KevinHaynes

This is horrible. I’ve been showing an experience builder “dashboard” to executives all month and depending on the screen size. I have to keep adjusting the size of widgets. It’s embarrassing.

TimWestern

As a software developer of 20 some years, I can tell you, that when you think about being accessible to smaller form factor devices in particular, the earlier it is brought into the design the better. It's been my experience that scaling an experience down from a desktop/laptop view to something smaller is not always as easy as it might seem.

Now as far as Experience builder goes, if your 'experience' relies on multiple things being open at one time, the competition for screen space is going to be a problem.

One way I have considered handling this, is by only allowing one widget to be open at a time. That makes some dashboard experiences not quite equal when you have multiple things going on at the same time though.

As far as the resolution differences, I always start with the smallest. There are some CSS tricks to be able to pick up and cause flow and break at certain width/heights that you can try to do, but every time I've tried this, I often run into competing ESRI ExB Styles that are there by default. What has happened then is you end up trying to make very very tightly defined specific CSS classes (multiple class names, an id, inside of something else for example) in order to get your custom CSS to be preferred over the base ones.

I wonder if some of the layout choices just aren't congruent with small device accessibility.

But having built several custom widgets, and having to play with CSS positioning, it can be a challenge when considering different resolutions for sure.

JamiCameron_mh

I have been looking to see if someone would post about this for a little bit and wondering if I was the only one this bothered.

Most of the applications I build are for Multiple people who work with different size laptops and Monitor sizes and I have always had problems making sure the app works for all users.

Únete a la Conversación

Inicia sesión para publicar, seguir contenido y más. ¿Nuevo aquí? Regístrate gratis.