making joomla's admin interface awesome

118
Making Joomla’s Admin Interface Awesome Kyle Ledbetter

Upload: kyle-ledbetter

Post on 01-Nov-2014

11 views

Category:

Technology


0 download

DESCRIPTION

2011 JandBeyond presentation on how we can make Joomla's UI and UX what it needs to be moving forward.

TRANSCRIPT

Page 1: Making Joomla's Admin Interface Awesome

Making Joomla’s Admin Interface

AwesomeKyle Ledbetter

Page 2: Making Joomla's Admin Interface Awesome

A Brief HistoryYou have to know where you came from to know where you’re

going, or something like that…

Page 3: Making Joomla's Admin Interface Awesome

Which one of these is different?Let’s play a game!

Page 4: Making Joomla's Admin Interface Awesome
Page 5: Making Joomla's Admin Interface Awesome
Page 6: Making Joomla's Admin Interface Awesome
Page 7: Making Joomla's Admin Interface Awesome
Page 8: Making Joomla's Admin Interface Awesome

Consistency is good,but stagnation can be very

bad.

Page 9: Making Joomla's Admin Interface Awesome

UI Should Be Updated Also- Updates are easy

- UI updates are frequent

- Developers are pushed to uphold high standards

- Usability is revered and on the same level as code (or higher)

Page 10: Making Joomla's Admin Interface Awesome

Updates are visual progress queues

There’s just something exciting about a small visual update that pushes the perception of progress more than any code can do.

Page 11: Making Joomla's Admin Interface Awesome

Let’s peak over the fenceand see what our CMS neighbors are up to

Page 12: Making Joomla's Admin Interface Awesome

WordPressWordPress constantly updates their UI in an iterative, ongoing

pursuit of perfection.

Page 13: Making Joomla's Admin Interface Awesome
Page 14: Making Joomla's Admin Interface Awesome

DrupalDrupal identified a problem and put a system in place

for a solution.

Page 15: Making Joomla's Admin Interface Awesome
Page 16: Making Joomla's Admin Interface Awesome

Let’s be clear: Joomla’s admin interface hasn’t been totally

ignored.• Much better taxonomy

• Much better markup

• HTML Overrides (yay!)• Which allow admin

templates to change layouts

• Assign admin template to individual user• Allows things like

mobile devices switching

Page 17: Making Joomla's Admin Interface Awesome

We need flexibility

Page 18: Making Joomla's Admin Interface Awesome

What can I do right now?

Let’s check out some awesome solutions that you can install on your Joomla site today.

Page 19: Making Joomla's Admin Interface Awesome

2 Basic RoutesOne is not necessarily better than the other.

It’s up to you to decide.

Evolutionary Revolutionary

Page 20: Making Joomla's Admin Interface Awesome
Page 21: Making Joomla's Admin Interface Awesome

Route 1: Improvements via Extensions

Prime example: NoNumber.nl

Page 22: Making Joomla's Admin Interface Awesome

Joomla Extensions Directory

The JED is a great resource to find all kinds of useful admin extensions as well!

http://extensions.joomla.org/extensions/administration/

Page 23: Making Joomla's Admin Interface Awesome

NoNumberThe king of Joomla admin extensions and addons for the standard

Joomla admin interface (& compat w/ other admin templates)

Page 24: Making Joomla's Admin Interface Awesome
Page 25: Making Joomla's Admin Interface Awesome
Page 26: Making Joomla's Admin Interface Awesome
Page 27: Making Joomla's Admin Interface Awesome
Page 28: Making Joomla's Admin Interface Awesome
Page 29: Making Joomla's Admin Interface Awesome
Page 30: Making Joomla's Admin Interface Awesome
Page 31: Making Joomla's Admin Interface Awesome

Route 2: Entire new interfacesPrime example: AdminPraise.com

Page 32: Making Joomla's Admin Interface Awesome

AdminPraiseAdminPraise is the first Joomla admin template club, and features

several templates to change your overall Joomla interface.

Page 33: Making Joomla's Admin Interface Awesome

AdminPraise 1Proof-of-concept – Can an alternative Joomla admin interface be

done, useful and accepted?

Page 34: Making Joomla's Admin Interface Awesome
Page 35: Making Joomla's Admin Interface Awesome
Page 36: Making Joomla's Admin Interface Awesome
Page 37: Making Joomla's Admin Interface Awesome

Standout feature:AdminPraise 1 was the first real alternative Joomla admin template, which

was a proof of concept and successfully proved the relevance of alt UI.(also 1st mobile optimized Joomla dashboard)

Page 38: Making Joomla's Admin Interface Awesome

AdminPraise 2Time to put this notion of a truly alternative Joomla admin

interface to the test.

Page 39: Making Joomla's Admin Interface Awesome
Page 40: Making Joomla's Admin Interface Awesome
Page 41: Making Joomla's Admin Interface Awesome
Page 42: Making Joomla's Admin Interface Awesome

Standout features:Completely modular, lots of ACL viewing options, admin menu

management, sidebar, dock, change editor on the fly, and many more…AP2 set the new standard.

Page 43: Making Joomla's Admin Interface Awesome

StainlessThe goal was to merge form and function and push modern CSS3

techniques and design trends.

Page 44: Making Joomla's Admin Interface Awesome
Page 45: Making Joomla's Admin Interface Awesome
Page 46: Making Joomla's Admin Interface Awesome

Standout features:More customizable overall and responsive GUI but same level of

simplicity of AdminPraise Lite.

Page 47: Making Joomla's Admin Interface Awesome

AdminPraise LiteFirst free from AdminPraise, focused on lightweight usability.

Page 48: Making Joomla's Admin Interface Awesome
Page 49: Making Joomla's Admin Interface Awesome
Page 50: Making Joomla's Admin Interface Awesome

Standout features:No cost, easy to navigate and fast as heck.

Page 51: Making Joomla's Admin Interface Awesome

AdminPadOptimized iPad user experience that provides a native app look &

feel.

Page 52: Making Joomla's Admin Interface Awesome
Page 53: Making Joomla's Admin Interface Awesome
Page 54: Making Joomla's Admin Interface Awesome
Page 55: Making Joomla's Admin Interface Awesome
Page 56: Making Joomla's Admin Interface Awesome

WYSIWYG Text Editor

Page 57: Making Joomla's Admin Interface Awesome
Page 58: Making Joomla's Admin Interface Awesome

Standout features:Joomla works well on the iPad, of course

Page 59: Making Joomla's Admin Interface Awesome

AdminPraise 3A huge step towards a responsive, customizable interface as

flexible as Joomla itself.

Page 60: Making Joomla's Admin Interface Awesome
Page 61: Making Joomla's Admin Interface Awesome
Page 62: Making Joomla's Admin Interface Awesome
Page 63: Making Joomla's Admin Interface Awesome
Page 64: Making Joomla's Admin Interface Awesome
Page 65: Making Joomla's Admin Interface Awesome
Page 66: Making Joomla's Admin Interface Awesome

Live UpdatesLive Updates bring shorter, more iterative releases w/ new

features and bug fixes. Live Updates also prolong the life of the release.

Page 67: Making Joomla's Admin Interface Awesome

An industry was born.Template clubs, distros and bundled solutions are

developing alternate admin templates.

Page 68: Making Joomla's Admin Interface Awesome

JoomlaBambooFrontend template club that’s released 2 solid admin templates.

Page 69: Making Joomla's Admin Interface Awesome

SimplaJoomla Bamboo’s first admin template, in which the accordion

sidebar navigation is the focal point.

Page 70: Making Joomla's Admin Interface Awesome
Page 71: Making Joomla's Admin Interface Awesome

CrispA clean, minimal admin interface from a template club known for

clean frontend templates.

Page 72: Making Joomla's Admin Interface Awesome
Page 73: Making Joomla's Admin Interface Awesome
Page 74: Making Joomla's Admin Interface Awesome

Standout features:Flexible nav, version check/update, session timer, minimal design

Page 75: Making Joomla's Admin Interface Awesome

MinimaMinimal 1.6 admin template that’s being used in the Molajo

distro.

Page 76: Making Joomla's Admin Interface Awesome
Page 77: Making Joomla's Admin Interface Awesome
Page 78: Making Joomla's Admin Interface Awesome
Page 79: Making Joomla's Admin Interface Awesome
Page 80: Making Joomla's Admin Interface Awesome
Page 81: Making Joomla's Admin Interface Awesome
Page 82: Making Joomla's Admin Interface Awesome

Standout features:A truly modern, minimal user experience that uses just about every modern web standards, techniques and best practices.

Page 83: Making Joomla's Admin Interface Awesome

Mission ControlAdmin template from Rockettheme, one of the leading frontend

Joomla template developers.

Page 84: Making Joomla's Admin Interface Awesome
Page 85: Making Joomla's Admin Interface Awesome
Page 86: Making Joomla's Admin Interface Awesome
Page 87: Making Joomla's Admin Interface Awesome
Page 88: Making Joomla's Admin Interface Awesome

Standout Features:Editor tracking, notification badges, component layout overrides,

color customization you’d expect from Rockettheme.

Page 89: Making Joomla's Admin Interface Awesome

Jentla

Drag picture to placeholder or click icon to add

Page 90: Making Joomla's Admin Interface Awesome

Nooku Server

Page 91: Making Joomla's Admin Interface Awesome
Page 92: Making Joomla's Admin Interface Awesome

Nooku Server App

Page 93: Making Joomla's Admin Interface Awesome
Page 94: Making Joomla's Admin Interface Awesome
Page 95: Making Joomla's Admin Interface Awesome
Page 96: Making Joomla's Admin Interface Awesome

A Common Joomla Blessing/Curse

It’s lovely to have choices but islands are formed.

Page 97: Making Joomla's Admin Interface Awesome

Eventually We Need To UniteSo we can contribute back the ultimate admin interface.

Page 98: Making Joomla's Admin Interface Awesome

What’s the ultimate solution?From all my experience & observations, we need:

- Contextually Aware GUI

- Adapts per your usage

- Tagged, Categorized Extensions

- Strict Standards (especially to gain the “native” sticker)

- This will take time on all fronts, Joomla 1.8 is realistic

Page 99: Making Joomla's Admin Interface Awesome

One Interface To Rule Them All

Drag picture to placeholder or click icon to add

It just doesn’t work. Joomla does far too much for one static UI

Page 100: Making Joomla's Admin Interface Awesome

Blogging Interface

Page 101: Making Joomla's Admin Interface Awesome

Ecommerce Interface

Page 102: Making Joomla's Admin Interface Awesome

Project Manager Interface

Page 103: Making Joomla's Admin Interface Awesome

Social Network Interface

Page 104: Making Joomla's Admin Interface Awesome

or for a bit more general example…

Page 105: Making Joomla's Admin Interface Awesome

Sports Car

Page 106: Making Joomla's Admin Interface Awesome

Work Truck

Page 107: Making Joomla's Admin Interface Awesome

Compact Car

Page 108: Making Joomla's Admin Interface Awesome

4x4 Off-road Vehicle

Page 109: Making Joomla's Admin Interface Awesome

Joomla’s UI Needs To Be SmarterSmarter, Faster, Stronger. A learning machine. A UI for an ultra-flexible CMS needs to be ultra-flexible itself.

Page 110: Making Joomla's Admin Interface Awesome

Joomla’s UI Must Also Be StandardizedJust about every component is guilty of non-standardization. This makes users re-learn each intefrace.

Page 111: Making Joomla's Admin Interface Awesome

Joomla’s UI must be abstracted.So you component devs can’t detract, but also because you don’t want or need to detract from the standards.

Page 112: Making Joomla's Admin Interface Awesome

Picture Joomla as a Mac App

Where everyone upholds and adheres to strict standards, while providing interfaces that are unique and useful.

Page 113: Making Joomla's Admin Interface Awesome

Blogging Interface

Page 114: Making Joomla's Admin Interface Awesome

Ecommerce Interface

Page 115: Making Joomla's Admin Interface Awesome

Project Manager Interface

Page 116: Making Joomla's Admin Interface Awesome

Social Network Interface

Page 117: Making Joomla's Admin Interface Awesome

Is this sinking in?Are you starting to get the picture?

Page 118: Making Joomla's Admin Interface Awesome

Kyle [email protected]

@kyleledbetter

www.adminpraise.com

www.projectfork.net

www.taptheme.com