CMS for the business users, Drupal 8.2, now with more "outside-in"

About CMS's and Drupal
Content managed systems CMS. There are many CMS's but the one that always stands out from the crowd, is Drupal. It saved my web career a several years ago  after trying many CMS's like Typo3 and Wordpress, they had little flexibility to for example scale if a small business flourished and customise, make it future-proof. Logically and through much learning, for me Drupal was the best CMS for managing workflows, users, content and adding business API's as required, so with these self establishing qualities, Drupal is where I have focused, and so I promote this primarily to my client, when applicable.  

Drupal's success largely has come from regular updates, from a very large global development community and followers. It's author Dries Buytaert also with Acquia, the corporate arm of Drupal, with research and development dedication develops solutions further.

Lately Drupal's 8 paradigm has been on higher security, more extensibility, continual adaptation to media device displays, and how this is produced, such as decoupled or "headless" Drupal, and other tangibles with technology. 
The CMS API, that anything data can be integrated with. Together with Amazon and other cloud suppliers we've been using Drupal as SaaS for a few years as well.
For example Lufthansa is building the in flight entertainment application with Drupal as the framework.

The problem for business user
Editing CMS content
When a user edits content, normally you need 2 screens open, one to edit and one to preview the changes. If a block is required, you need to open another page, for the block section and select the block, its attributes and assign it to a page/s, in a region, controlled by the theme layer.  
Not a good process for the business user, having to open, apply, close, reopen, that's way too many clicks. We certainly don't allow so many clicks for buying an item. Less clicks the better, more asynchronous, nice UI, better UX. 

As a UX designer and solutions architect, I always research, evaluate more about administrator's tasks, and editors of content, especially taking note of the learning curve, as its business critical, not to have too longer down time for learning. Budgets, anxiety. Simplify the solution (make your production more streamlined) so that the business has a user friendly interface.
Handover of Drupal applications and the passing on of knowledge and tuition of the end product, can be a very daunting task, as business users have a variety of skills levels. As long as the CMS application progresses the business productivity rather than hinder it.

I've worked on many event management solutions, researching how booking clerks manage bookers and to bookers, how they book.  The ability to examine the business user and there user experience needs is crucial indeed, not only the public user or subscribed user, whatever the user case maybe, all are connected.

The Drupal Solution


Prototyping UX IA UI, Axure RP and Drupal

I have been using Axure RP for a few years now, as a tool helping me to prototype architectural software solutions, mainly for builds in Drupal very quickly. Axure RP allows a build to be seen in its entirety, allowing you to map the information architecture IA, model the User Experience UX, adding User Interface UI components and having javascript JS to bring the prototype closer to the end product as can be.

Apply other specific Graphical User Interface GUI elements to the layout immediately allowing clients greater ability to view its brand and identity early and approve.Bit pricey, when it comes to collaboration, and many designers I have worked with use inVision, a little basic, or UXPin. However after basic level collaboration, much of the work in planning the entire product application should be done on a more detailed level.

UX design and prototyping using Drupal API If you know Drupal and you have time to add contributed UI modules, and can do some simple UI coding, front-end, prototyping a solution can be done in a few days, of course depending on the build requirement and other intricacies or details to factor in. For example you may want micro-interactions and animations this can be tested for delivery speeds and responses much faster as the prototype is built within boxed or containerised development environments, and is already setup for production, again speeding product to market.

Allow the client a live experience with all the subsequent pages. For example building Groups, like FB Groups and using Axure RP/ UXPin/ inVision to present any extra functionalities that will require custom Drupal module development or extensibility from an existing contributed Drupal module, or better UI, of course.This type of prototype formulates the build timings quickly and accurately. Costings can be agreed upon. The AGILE production team can quickly deliver build schedules. Importantly the client, stake holders can have a clearly defined view of end product.

This is far better than any UX tool available, in my opinion the benefits are clear. If you don’t know Drupal then I advise Axure RP or UXPin for professionally delivered prototypes and architectural solutions, if your a UX designer with Drupal knowledge then I would urge you to roll with Drupal further, even if its not the CMS of choice its a great prototyping tool.


There's a recent review of Axure RP here https://www.smashingmagazine.com/2016/07/a-deep-dive-into-axure-8-a-comprehensive-review/

What's the point of dedicating so much time to speeding up the UI

You have to stay grounded in this environment as its easy to be swept up in the euphoria, and the marketing gadgets surrounding developers.

A prime example of this is Google apps. I'm referring to their recent post that they are not pushing the use of Google Apps as browsers are much more powerful.
They state in there post "We will be removing support for packaged and hosted apps from Chrome on Windows, Mac, and Linux over the next two years." 
Well thats a quite obvious result. No one really wants to keep downloading apps for the device, its time and memory consuming for the device. The device browser is the answer, however many developers have looked to Google for market leadership and this seems a clear indication, they are not.  

Luckily I have maintained my developmen with web browser, and yes its becoming very more efficient, especially with networking speeds, and of course cleaner ways of coding browser / DOM UI's, like Facebook and React.js for example.

here the link to the chrome blog post http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html

Was this a good read?: 
No votes yet

Bootstrap UI Drupal Theming

I thought I'd write a quickie on setting up Bootstrap Theme. It can be quite a headache for a UX/UI Designer/Developer and its the most used framework for Drupal and without research I'm pretty certain Wordpress too.

You can code your theme using developer tools like Ruby or Node which operate as compilers for either SASS or LESS the preprocessing code for CSS.

Often the main issue is which to choose, LESS having its attributes and SASS too, its up to you. There are GUI's but I use command line from terminal. 

Download Bootstrap Theme.
Pull that into your theme directory
Choose which starterkit to work from LESS or SASS
Rename the SASS folder to you theme name. Edit the starterkit file to your .info file
Pull down the bootstrap framework into your theme with its own bootstrap folder ./myTheme/bootstrap/
You'll notice that in your copied theme folder SASS nw mytheme there is no RB config file. You need to now initialize this with your dev tool, like "compass init"

In the rb config file edit out the lines for using scss as your preference rather than sass and run the command that is written.
the rb config file looks like

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

so uncomment like the above "preferred_syntax = :sass"
and then run the command " sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass" in your terminal this will now compile your style.css file.

Run compass watch and your good to go.

If you need to clean your cache use = compass clean




designwebservices.com and webinmotion.co.uk © 2017