The user interface (UI) of eFront is based on Bootstrap-3. This means that, by default, eFront has a fluid interface and unified UI and animation elements. But this is only the tip of iceberg as eFront comes with a vast number of additional interface improvements that you will find handy. Let’s find out what’s new and noteworthy in this post.
Responsive design
eFront uses a Web design approach aimed to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors).
By default, eFront adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries.
Throughout the transition we had to move from tables, that traditionally eFront used, to a DIV based page structure. eFront always had a simple way to divide the screen’s real estate by using a two columns structure. With the new DIV structure, columns can now be folded under the same column providing a better experience for small screens.
Retina Ready
eFrontPRO uses Scalabe Vector Graphics (SVG) icons. Those icons can scale indefinitely with no quality lose and are a natural match for high resolution (retina) screens.
SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.
We have opted to transcode all SVG icons to a CSS based, inline image format using a tool called Grumpicon. This provides freedom from hard to maintain sprite-images while at the same time keeps page hits and overall bandwidth consumption low.
Reduced Clutter
Throughout eFront we have either merged functionality or reduced clutter.
eFront has grown in depth and breadth through time. We felt that a simplification phase was needed in order to make it intuitive again for new users. The simplifications span the full product breadth and depth but as an example check the following 2 screenshots that illustrate the new way to present form tips (visible only when needed) and the toggle for advanced settings.
Form tips visible only when needed
Hidden Advanced settings
UI elements
As we transitioned to Jquery from Prototype we invested time on selecting new visual elements; for example, eFront uses modern date-time selectors. An important new UI element you will come across a lot is the “Quick info” widget. This element presents bits of interesting information (the gist) in a visually appealing way.
Redesigns
On eFront
we redesigned several key pages and tools to make them more effective and more personalized. Take for example the end-user dashboard, the reports pages and the content creation screens. These 3 tools are among the most often used ones and all of them have a new look-and-feel. Check below for a screenshot from each one of them.
Dashboard
Reports
Content creation
Release schedule
In this post we covered a number of UI changes coming with eFront. We will keep improving things for the next couple of months (until the official release), but stay tuned for a public beta in the next few weeks.
Until then, have fun and keep learning!
