request for debate and/or advice on an Admin UI template

Report · Jun 18, 2019

hello everyone down here...

knowing that on this forum there is a large number of followers (being for or against this and that)... and without wanting to create controversy, but on the contrary a brainstroming of ideas and advice (preferably wise), I would like to solicit the presence of those who want to go there from their comments.

I was wondering the following question... what would today be a suitable tool for interfacing an application interface. The selection criteria being Bootstrap 4, Sass, and if possible NPM

here is the first results of the candidates who caught my attention... are there others? certainly... but I certainly missed it!

what would be your feedback and will you advise others? which ones (attention meeting the above criteria)

thank you to those who will participate in this discussion and sorry for the others who will be subjected to the noise of such a discussion.

have a pleasant day

birnou

Report · Jun 18, 2019

Layout wise, I would go with the xenon, but I would use css varables so that the end user can modify the color and font used to suit their preferences.

(That is only initial impressions though, as I would have to know what the user/client requirements are.)

What does have me wondering though, is what difference it makes if bootstrap/sass is used or not?

After all these days both are a matter of choice, and when it comes to admin ui's it is not really relevant, as we can decide on which browser versions to support, (and give the client good reasons why) or am I missing something important?

Report · Jun 18, 2019

Hello Paula,

I knew that you will be on... and the first one to reply... thanks... I appreciate

like you my first reflex directed me towards Xenon... the template offers a large number of features that are quite attractive and common in application. the only two points that make me give a negative rating are that the template was born in October 2014... (the two others are from early and late 2019) and that it is based on BS 3 (the two others are based on BS4).

so why choose Bootstrap 4, Sass and NMP as selection criteria.

well we will say, that it was necessary to make a choice... subjective gifts totally from this point of view (although I am not a Bootstrap user) but it is a widely distributed library and which therefore has a lot of feedback from groups of users.

but also and especially, there are many packages that allow to automate structural writings for the (structural) content of pages.

And Sass to simplify maintenance and integration with interface customization aspects. the template must be written in Sass for that.

I will add, that although we have here a template admin UI, it will be only the one and only access to the admin... there will be no "client" interface just a user network control interface (for the purpose of this app)

Report · Jun 18, 2019

O/K, I'm going to ask a question regarding the future requirements of the UI.

Whilst I can see your reluctance of using the first template because it is BS3 based, and as such may in the future become limited on features. How much do you think the template system would require 'added features' in the future, that you would have to create yourself.

I know it is always necessary to customise any template, but the xenon template whilst old now, has the test of time behind it, as it is a classic type of UI that most users will know, (I like modern animations, but think the 3rd option, by urbanui, over uses them).

Report · Jun 18, 2019

your reasoning is relevant and tends to convince me. it's true what the future requirements might be and whatever the initial template choice, there will always be that damocles sword that will be there.

you're right. the wisdom and appearance matures through the time of Xenon must make it a good working partner. I was just thinking of contacting the developers to see their future prospects for BS4

as far as the template proposed by UrbanUI is concerned, you are right... it is a little bit their personal brand and touch... they have several admin ui templates quite close to each other... https://www.urbanui.com/

I had chosen the one that seemed most reasonable to me;)

Report · Jun 18, 2019

I'll leave it for now Birnou, to see if anyone else joins in, but if xenon used BS4 then that is the one I would go for. Like you, the use of BS3 would cause me concerns for the future.

Report · Jun 18, 2019

I have no real expertise in admin ui as its not relevant to the kind of work l produce and is unlikely to be before l call it a day but in terms of appearence l personally like the urban example. To me its a lot cleaner and more of a modern concept. Not sure about the animations mentioned by Paula, as l didnt see much movement at all, apart from some figures swiping across the screen, which could be a bit annoying. I think animations are best applied subtely to bar/pie charts and used sparingly. That template seems to show a lot more examples of what might need to be incorporated, therefore it might be more versatile.

Report · Jun 18, 2019

It's nice to have as many opinions as possible Os, and as Birnou will possibly agree admin type UI's can, (and often are) a users personal preference. The main problem being that unlike cms's they are often used by multiple users with an age range of 20-60+, which is why 'classic' is a safe choice.

That does not meen 'classic' is the best or future proof, as just like mobile users are more often using'siri', (or other voice systems) to search for what they want now, and not type it into a google search. Admin UI's and what users may now expect them to do both now and in the future is a good subject for debate.

Expansion of such a systems features can be a problem, (which is why I can understand the use of BS) simply because if you wish to add a feature or expand the system to cover some new and as yet unknown addition, (like adding an idiots guide to brain surgery ) the requierments of the layout and/or how the info is presented has to be accomodated. Which is why BS is not so bad a choice if one is starting from scratch, (custom built is better, but thats a different discussion) as it is more possible that someone will have had a similar problem, and know how to proceed.

Report · Jun 18, 2019

pziecina a écrit
The main problem being that unlike cms's they are often used by multiple users with an age range of 20-60+, which is why 'classic' is a safe choice.

you are completely in the problem. users will not only have spread age groups but also user profiles (from a computer point of view) ranging from hard refractory to interface use, to pure and hard geek

it is therefore necessary to remain sober, efficient, but not to limit the possibilities of action and interaction.

(for example when adding an image relating the person's activity, simply a file input, but also the possibility of cropping the image for those who wish to do so. This is only a pure example and not an end in itself)

Report · Jun 18, 2019

Thank you OS for joining this discussion, I appreciate your feedback. thanks

actually urbanui is more contemporary and therefore more touchy... but it lacks quite a few components that can have their interest in the kind of application quite complete... here are some elements that I think particularly

to name but a few

I don't think I've spotted them in other templates.

Argh.... Cornelian choice

Report · Jun 18, 2019

I just found new candidates

Report · Jun 18, 2019

Thats trashy (crmX) v sophistication. (architectui) Both could be suitable for different demographic and l guess thats the problem as Paula pointed out, no one size fits all so unless you absolutely know your target its probably best to go for something clean and simple, with a splash of color.

Report · Jun 18, 2019

I'm not happy about how the last two candidates you posted work Birnou. Mainly because they both have problems when using them on a tablet device, (is this a consideration?).

Slightly off-topic though, (after which I will log off and drink a glass of wine).

This type of application is what a PWA is most suited for, and often is used for, as it presents the user with multiple features. An example that may help others to join in, is when such an admin UI is used by hospital staff, (from reception to surgeon). So it must follow multiple patients from administration to final outcome, (surgery or whatever), and record every step and requirerment from the admission procedure, the diagnosis, appointments or anything else that is required.

Just thought the example may help others to participate Birnou , and hope it presents an example that everyone can follow.

Report · Jun 19, 2019

Many thanks to both of you for your expert advice, which allowed me to take into account the points I had left out.

the question that remains is.... "is it wise to start an application today that is based on BS3 and not BS4. For the moment the author of the template has not yet answered?"

Report · Jun 19, 2019

I would look at what you wish to use from BS components. BS3 will keep working and whilst BS4 is flexbox based, floats are going to continue to be used.

For a UI, flexbox is an ideal candidate, for a number of reasons, the biggest one being that they make going from desktop to mobile device layouts easier than floats. So if multi-screen sizes are a consideration for me, BS4 would be my choice as it is more future proof than BS3 using floats.

Future readers layouts, note -

Before anyone says, 'what about css grid layouts', I think flexbox is better when going from desktop to mobile, but css grids are better when going from desktop to larger displays.

Report · Jun 19, 2019

pziecina wrote
Future readers layouts, note -
Before anyone says, 'what about css grid layouts', I think flexbox is better when going from desktop to mobile, but css grids are better when going from desktop to larger displays.

At this precise point in time are we actually there yet when to comes to grid? I know it can be used with caution but I dont see a massive push just yet. I keep looking at the percentage of global browser support on 'can I use', its high, but cant make up my mind whether its safe to use, without any fall-backs?

At some point I have to stick or twist much the same as I did with flex and never looked back only this time I think its going to be a combination of both grid/flex rather than replacing float in favour of flex. I rarely use float now.

Report · Jun 19, 2019

osgood_ wrote
At some point I have to stick or twist much the same as I did with flex and never looked back only this time I think its going to be a combination of both grid/flex rather than replacing float in favour of flex. I rarely use float now.

I think we are there now, but just like flexbox when it first came to developers notice, it will be a 'use in moderation' layout method initially, and not on anything critical for the UI. Maybe start with the content layout first with a simple fallback used via the @support rule.

There will always be those who say no, but with support going back to IE10, (admitedly with prefix, and some features missing) using grids for content should be an easy method to get into the 'way of thinking' for grids, because just like flexbox required one to think about layout differently, grids has the same re-think problems.

The one thing I think will cause problems, is css grids beginners, (especially designers) thinking it is a design grid layout system, forgetting that a web page is not a fixed printed page and should 'flow' to cover all screen/device sizes.

Report · Jun 19, 2019

pziecina wrote
I think we are there now, but just like flexbox when it first came to developers notice, it will be a 'use in moderation' layout method initially, and not on anything critical for the UI. Maybe start with the content layout first with a simple fallback used via the @support rule.

I'll have to start brushing up on my knowledge. Explored grid and experimented sometime ago but it doesnt stick unless you use it on a regular basis.

Report · Jun 19, 2019

https://forums.adobe.com/people/B+i+r+n+o+u wrote
the question that remains is.... "is it wise to start an application today that is based on BS3 and not BS4.

In my opinion definitely not. But as you know I'm somewhat 'blinkered' when it comes to using Bootstrap BUT if I had to use it for a new app the template would have to be v4 based. I don't see the point in using a workflow which is out-of-date for building something new, you're behind before you start. I would have to look beyond how nice the template was to how it was built. Can't imagine saying with any conviction in a meeting with a client or discussion involving other devs I'm using Bootstrap 3 to build a brand new app.

If Bootstrap 4 had flaws and it performed badly then v3 would certainly be a consideration but its stable and uses a more modern approach to layout.

Report · Jun 19, 2019

osgood_ a écrit
https://forums.adobe.com/people/B+i+r+n+o+u wrote
the question that remains is.... "is it wise to start an application today that is based on BS3 and not BS4.
In my opinion definitely not. But as you know I'm somewhat 'blinkered' when it comes to using Bootstrap BUT if I had to use it for a new app the template would have to be v4 based. I don't see the point in using a workflow which is out-of-date for building something new, you're behind before you start.

yes, you're right, that's the answer and the remark that came directly to my mind,

but it's true that not knowing these two libraries, I preferred to ask the question, in the sense that maybe an informed user of both, could have returned a vision at the level of browser portability, or regarding the durability https://github.com/twbs/release ... or any other points that would have escaped me

Report · Jun 19, 2019

https://forums.adobe.com/people/B+i+r+n+o+u wrote
but it's true that not knowing these two libraries, I preferred to ask the question, in the sense that maybe an informed user of both, could have returned a vision at the level of browser portability, or regarding the durability https://github.com/twbs/release ... or any other points that would have escaped me

That's why I thought more forum regulars might join in.

I would not use BS at all, but I can understand people doing so for this kind of project, as my method(s) would cost more, both in time and money. Plus I have always thought BS was more suited to such a project than simple web site development.

I'm probably the wrong person to ask though, as such projects are more in my field of development than web sites. Which unfortunatly means I can see pitfalls in using open source frameworks,that may not be really relevant for using bootstrap, as unlike many frameworks in the past, bootstrap has a wider user base, and at least uses a modern layout method, (flexbox). However, the use of any framework does restrict what can be done, as it relies on contributions from others to grow in features.

Also I do not know enough about bootstrap, to know if it uses all the flexibility of what can be done with flexbox. It is often said that flexbox is one directional, but I know from experiance, (and the w3c agree) that it can be used in 2 directions, (horizontal and vertical layout).

Report · Jun 19, 2019

Just noticed, (only tested original post links on iPad today) the only one of the original 3 that does not collapse the sidebar on scroll, is the 3rd choice.

May be different on newer iOS's, I have version 10, (not enough free disk space to update).

Report · Jun 19, 2019

Yes, I noticed. I think there must be some screws to adjust... it happens in landscape but not in portrait.

Report · Jun 19, 2019

A bit late coming to the discussion, had higher priorities forced upon the family. No more boasting that my brother-in-law at age 92 years and 355 days was the most computer savvy older person. I hope you do not mind if my brain is not tuned to subject at hand..

Glancing back through the various comments, it would drive me crazy having to use BS 3 when there are so many benefits in using BS 4 while conversion from 3 to 4 is wrought with problems of its own. This would definitely discount Xenon as far as I am concerned.

To be honest though, I am with Os in that I have not implemented anything like an all-in administration panel, mine have been a subset designed to the requirements of my client. In fact most, if not all, of my clients would be overwhelmed by the number of tasks and options of the complete dashboard. All they want is a simple admin section which enables them to add/modify/delete the content of the sections that change most. Here I am thinking of products, blogs, members etc.

If I were in a position to have to create a complete admin dashboard (which I am not), I would be looking to use a JS framework like VueJS, React or Angular 7 (or in my case App Connect in combination with Server Connect). A headless approach, delivered by these frameworks, will give speed and flexibility to the app. Paula mentioned PWA as off-topic, where I think that it is completely on topic and a definite must. Mention was also made of Sass. If this is to be created by a dashboard module, then there would have also have to be a module that compiles this into CSS. In this case NPM and Node-Sass would also be a requirement.

This is all I can think of at the moment. More may come to mind later on.

Wappler, the only real Dreamweaver alternative.

Report · Jun 20, 2019

Thanks for joining in Ben, your thoughts and experiance about BS will be greatly appreciated.

I know Birnou has built such systems before, and for myself such systems are really most of what I know. One of the biggest advantages of working on such projects is that one normally knows what browsers and devices, (even versions) are being used before hand, which gives one more flexibilty in what one can do.

The big disadvantage is that the user is often using the UI for hours each day, so one has to think of ways to keep the user focused. I said I'm not in favour of too many animations, but I have used css shapes when presenting long pieces of text in order to make reading more interesting.

So if you was to build such a UI, would you agree with Osgood regarding the use of animations, (look at the 3rd example in the original post) or would you look for some other means of 'keeping the user focused', and if so what?

BTW everyone, that is an open question, as I know from experiance that 'keeping the user interested' and how one does so, has caused many long and very interesting discussions.

Adobe Community

request for debate and/or advice on an Admin UI template