{"id":2110,"date":"2014-05-16T11:43:00","date_gmt":"2014-05-16T11:43:00","guid":{"rendered":"http:\/\/blog.efrontlearning.net\/?p=2110"},"modified":"2017-06-08T21:55:10","modified_gmt":"2017-06-08T21:55:10","slug":"a-sneak-peek-at-efrontpro-user-interface","status":"publish","type":"post","link":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html","title":{"rendered":"A Sneak Peek at eFront: User Interface"},"content":{"rendered":"
\n

\"eFrontPRO\"<\/a><\/p>\n

The user interface (UI) of eFront is based on Bootstrap-3<\/a>. This means that, by default, eFront has a fluid interface and unified UI and animation elements. But this is only the tip of iceberg<\/em> as eFront comes with a vast number of additional interface improvements that you will find handy. Let\u2019s find out what\u2019s new and noteworthy in this post.<\/p>\n

<\/p>\n

Responsive design<\/h2>\n

eFront uses a Web design approach aimed to provide an optimal viewing experience \u2013 easy reading and navigation with a minimum of resizing, panning, and scrolling \u2013 across a wide range of devices (from mobile phones to desktop computer monitors).<\/p>\n

By default, eFront adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries<\/a>.<\/p>\n

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\u2019s 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.<\/p>\n

\"eFront<\/a><\/p>\n

\"Mobile<\/a><\/p>\n

Retina Ready<\/h2>\n

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.<\/p>\n

SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML<\/strong> 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.<\/p>\n

We have opted to transcode all SVG icons to a CSS based, inline image format using a tool called Grumpicon<\/a>. This provides freedom from hard to maintain sprite-images while at the same time keeps page hits and overall bandwidth consumption low.<\/p>\n

\"eFront-SVG-1\"<\/a><\/p>\n

\"eFront-SVG-2\"<\/a><\/p>\n

Reduced Clutter<\/h2>\n

Throughout eFront we have either merged functionality or reduced clutter.<\/p>\n

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.<\/p>\n

Form tips visible only when needed<\/strong><\/p>\n

\"eFront-reduced-clutter-1\"<\/a><\/p>\n

Hidden Advanced settings<\/strong><\/p>\n

\"eFront-reduced-clutter-2\"<\/a><\/p>\n

UI elements<\/h2>\n

As we transitioned to Jquery from Prototype<\/a> we invested time on selecting new visual elements; for example, eFront uses modern date-time selectors<\/em>. An important new UI element you will come across a lot is the \u201cQuick info\u201d <\/strong>widget. This element presents bits<\/strong> of interesting information (the gist<\/em>) in a visually appealing way.<\/p>\n

\"eFront-widget\"<\/a><\/p>\n

Redesigns<\/h2>\n

On eFront<\/p>\n

we redesigned several key pages and tools to make them more effective and more personalized. Take for example the end-user dashboard<\/em>, the reports<\/em> pages and the content creation<\/em> 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.<\/p>\n

Dashboard<\/strong><\/p>\n

\"eFront-Dashboard\"<\/p>\n

Reports <\/strong><\/p>\n

 <\/p>\n

\"eFront-Reports\"<\/p>\n

Content creation<\/strong><\/p>\n

\"eFront-Content-Creation\"<\/p>\n

Release schedule<\/strong><\/p>\n

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<\/strong>.<\/p>\n

Until then, have fun and keep learning!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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\u2019s find out what\u2019s new […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,42],"tags":[],"class_list":["post-2110","post","type-post","status-publish","format-standard","hentry","category-news","category-resources-tools"],"yoast_head":"\nA Sneak Peek at eFront: User Interface - eFront Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Sneak Peek at eFront: User Interface\" \/>\n<meta property=\"og:description\" content=\"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\u2019s find out what\u2019s new […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\" \/>\n<meta property=\"og:site_name\" content=\"eFront Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-16T11:43:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-08T21:55:10+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png\" \/>\n<meta name=\"author\" content=\"Athanasios Papagelis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Athanasios Papagelis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\"},\"author\":{\"name\":\"Athanasios Papagelis\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\"},\"headline\":\"A Sneak Peek at eFront: User Interface\",\"datePublished\":\"2014-05-16T11:43:00+00:00\",\"dateModified\":\"2017-06-08T21:55:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\"},\"wordCount\":565,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png\",\"articleSection\":[\"Product News\",\"Resources & Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\",\"name\":\"A Sneak Peek at eFront: User Interface - eFront Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png\",\"datePublished\":\"2014-05-16T11:43:00+00:00\",\"dateModified\":\"2017-06-08T21:55:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage\",\"url\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png\",\"contentUrl\":\"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product News\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\/category\/news\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Sneak Peek at eFront: User Interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/\",\"name\":\"eFront Blog\",\"description\":\"eLearning tips, news and resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\",\"name\":\"Athanasios Papagelis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g\",\"caption\":\"Athanasios Papagelis\"},\"url\":\"https:\/\/www.efrontlearning.com\/blog\/author\/athanasios-papagelis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Sneak Peek at eFront: User Interface - eFront Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html","og_locale":"en_US","og_type":"article","og_title":"A Sneak Peek at eFront: User Interface","og_description":"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\u2019s find out what\u2019s new […]","og_url":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html","og_site_name":"eFront Blog","article_published_time":"2014-05-16T11:43:00+00:00","article_modified_time":"2017-06-08T21:55:10+00:00","og_image":[{"url":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png","type":"","width":"","height":""}],"author":"Athanasios Papagelis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Athanasios Papagelis","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#article","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html"},"author":{"name":"Athanasios Papagelis","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965"},"headline":"A Sneak Peek at eFront: User Interface","datePublished":"2014-05-16T11:43:00+00:00","dateModified":"2017-06-08T21:55:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html"},"wordCount":565,"commentCount":0,"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage"},"thumbnailUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png","articleSection":["Product News","Resources & Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html","url":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html","name":"A Sneak Peek at eFront: User Interface - eFront Blog","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage"},"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage"},"thumbnailUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png","datePublished":"2014-05-16T11:43:00+00:00","dateModified":"2017-06-08T21:55:10+00:00","author":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965"},"breadcrumb":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#primaryimage","url":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png","contentUrl":"http:\/\/blog.efrontlearning.net\/wp-content\/uploads\/2014\/03\/eFront1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.efrontlearning.com\/blog\/2014\/05\/a-sneak-peek-at-efrontpro-user-interface.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.efrontlearning.com\/blog"},{"@type":"ListItem","position":2,"name":"Product News","item":"https:\/\/www.efrontlearning.com\/blog\/category\/news"},{"@type":"ListItem","position":3,"name":"A Sneak Peek at eFront: User Interface"}]},{"@type":"WebSite","@id":"https:\/\/www.efrontlearning.com\/blog\/#website","url":"https:\/\/www.efrontlearning.com\/blog\/","name":"eFront Blog","description":"eLearning tips, news and resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965","name":"Athanasios Papagelis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g","caption":"Athanasios Papagelis"},"url":"https:\/\/www.efrontlearning.com\/blog\/author\/athanasios-papagelis"}]}},"_links":{"self":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=2110"}],"version-history":[{"count":4,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2110\/revisions"}],"predecessor-version":[{"id":5636,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/2110\/revisions\/5636"}],"wp:attachment":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=2110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=2110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=2110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}