SlideShare uma empresa Scribd logo
1 de 22
Editor Interface KISS
Optimising the experience for content creators
A Tasty Backend
Jennifer Tehan (Delicious Creative)
presentation at BadCampUK

http://badcampuk.net/sessions/building-a-tasty-
backend

Feature:
http://drupal.org/sandbox/jeni_dc/1555218
Tasty Extras
 Custom Menu for Editors: Quickbar




http://drupal.org/project/quickbar
Enhanced Content List
Provide a Content Listing page

- Site specific columns
- Include thumbnails
- Action buttons per item

- Provides a better Workflow experience.
Designing and Building for the
Editor Experience
Andreas Sahle (pixelmord)
Presentation at FrontEnd United

http://frontendunited.org/2012/
slides#editorexperience
Seperate Content from Attributes
What is most Important
Relevant and Contextual

Wysiwyg, Placeholders, Inline Messages, Better
Fields, oh my!

Linkit module: uses autocomplete
Display character limits
HTML5 elements
Clientside Validation
D8UX Content Creation Page


Original discussion and designs:

http://groups.drupal.org/node/217434
THIS IS FINAL
This is being implemented in Drupal 8

For alternative designs, see
http://groups.drupal.org/node/217434

Seth Haven has some good ideas
Spark: Author Improvements for D7
Drupal Distribution named “Spark”
http://buytaert.net/announcing-spark-authoring-
improvements-for-drupal-7-and-drupal-8
Bring D8UX Content Creation advances into D7
“the Pressflow of Drupal authoring experience".
Funded by Acquia
They are looking for people to join the Spark
team:
Drupal UX Interaction Designer
Senior Front-End Engineer
Do Not Forget the Content
Do Not Forget What?
Streamlined Content Input

KISS: Keep It Simple Stupid


NO, NO



YES
Semantics Education
Help those inputting content make the best of
their content

Explain to them how HTML tags are used and
what they do:

<abbr>           <quote>           <sub>
<acronym>        <blockquote>      <sup>
<strong>         <cite>            <del>
<em>                               <ins>
Solutions
Markdown?
Some Agencies will teach their clients markdown
to accelerate/clean content input
Inline Editing?
Aloha Editor

Drupal Core wysiwyg?
Drupal 8 will have a RTE/Wysiwyg in core

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Web Components: Web back to future.
Web Components: Web back to future.Web Components: Web back to future.
Web Components: Web back to future.
 
INTERNSHIP REPORT
INTERNSHIP REPORTINTERNSHIP REPORT
INTERNSHIP REPORT
 
SPA Editor - Adobe Experience Manager Sites
SPA Editor - Adobe Experience Manager SitesSPA Editor - Adobe Experience Manager Sites
SPA Editor - Adobe Experience Manager Sites
 
AEM Client Context Customisation
AEM Client Context CustomisationAEM Client Context Customisation
AEM Client Context Customisation
 
UI Customization in AEM 6.0
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0
 
WordPress Theme Workshop: Misc
WordPress Theme Workshop: MiscWordPress Theme Workshop: Misc
WordPress Theme Workshop: Misc
 
Can't Do It with Spiceworks? You Can Build an Extension for That! - Scott Con...
Can't Do It with Spiceworks? You Can Build an Extension for That! - Scott Con...Can't Do It with Spiceworks? You Can Build an Extension for That! - Scott Con...
Can't Do It with Spiceworks? You Can Build an Extension for That! - Scott Con...
 
Using Features
Using FeaturesUsing Features
Using Features
 
X tag with web components - joe ssekono
X tag with web components - joe ssekonoX tag with web components - joe ssekono
X tag with web components - joe ssekono
 
Readme
ReadmeReadme
Readme
 
Developing Plugins For WordPress
Developing Plugins For WordPressDeveloping Plugins For WordPress
Developing Plugins For WordPress
 
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEMEVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
 
EVOLVE'16 | Deploy | Varun Mitra | Introduction to AEM Developer Tooling
EVOLVE'16 | Deploy | Varun Mitra | Introduction to AEM Developer ToolingEVOLVE'16 | Deploy | Varun Mitra | Introduction to AEM Developer Tooling
EVOLVE'16 | Deploy | Varun Mitra | Introduction to AEM Developer Tooling
 
LAS White Paper on WordPress
LAS White Paper on WordPressLAS White Paper on WordPress
LAS White Paper on WordPress
 
Learn How To Develop With CakePHP
Learn How To Develop With CakePHPLearn How To Develop With CakePHP
Learn How To Develop With CakePHP
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Static site best practices
Static site best practicesStatic site best practices
Static site best practices
 
Best Web Designing Courses- Classes in Pune | Web Designing Training in pune ...
Best Web Designing Courses- Classes in Pune | Web Designing Training in pune ...Best Web Designing Courses- Classes in Pune | Web Designing Training in pune ...
Best Web Designing Courses- Classes in Pune | Web Designing Training in pune ...
 
So, you want to be a plugin developer?
So, you want to be a plugin developer?So, you want to be a plugin developer?
So, you want to be a plugin developer?
 

Semelhante a Editor kiss

Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
kolev-prp
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
Aaron Gustafson
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
Thomas Daly
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
allanchao
 

Semelhante a Editor kiss (20)

No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Branding SharePoint 2013
Branding SharePoint 2013Branding SharePoint 2013
Branding SharePoint 2013
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Dreaweaver cs5
Dreaweaver cs5Dreaweaver cs5
Dreaweaver cs5
 
Design Manager 2013
Design Manager 2013  Design Manager 2013
Design Manager 2013
 
SharePoint Branding Guidance @ SharePoint Saturday Redmond
SharePoint Branding Guidance @ SharePoint Saturday RedmondSharePoint Branding Guidance @ SharePoint Saturday Redmond
SharePoint Branding Guidance @ SharePoint Saturday Redmond
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
 
Modernising AEM Sites Codebase (AEM Meetup 2019)
Modernising AEM Sites Codebase  (AEM Meetup 2019)Modernising AEM Sites Codebase  (AEM Meetup 2019)
Modernising AEM Sites Codebase (AEM Meetup 2019)
 
Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]
 
Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
 
Web Components: back to the future
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the future
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

Editor kiss

  • 1. Editor Interface KISS Optimising the experience for content creators
  • 2. A Tasty Backend Jennifer Tehan (Delicious Creative) presentation at BadCampUK http://badcampuk.net/sessions/building-a-tasty- backend Feature: http://drupal.org/sandbox/jeni_dc/1555218
  • 3.
  • 4.
  • 5. Tasty Extras Custom Menu for Editors: Quickbar http://drupal.org/project/quickbar
  • 6. Enhanced Content List Provide a Content Listing page - Site specific columns - Include thumbnails - Action buttons per item - Provides a better Workflow experience.
  • 7. Designing and Building for the Editor Experience Andreas Sahle (pixelmord) Presentation at FrontEnd United http://frontendunited.org/2012/ slides#editorexperience
  • 9. What is most Important
  • 10. Relevant and Contextual Wysiwyg, Placeholders, Inline Messages, Better Fields, oh my! Linkit module: uses autocomplete Display character limits HTML5 elements Clientside Validation
  • 11. D8UX Content Creation Page Original discussion and designs: http://groups.drupal.org/node/217434
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. THIS IS FINAL This is being implemented in Drupal 8 For alternative designs, see http://groups.drupal.org/node/217434 Seth Haven has some good ideas
  • 17. Spark: Author Improvements for D7 Drupal Distribution named “Spark” http://buytaert.net/announcing-spark-authoring- improvements-for-drupal-7-and-drupal-8 Bring D8UX Content Creation advances into D7 “the Pressflow of Drupal authoring experience". Funded by Acquia They are looking for people to join the Spark team: Drupal UX Interaction Designer Senior Front-End Engineer
  • 18. Do Not Forget the Content
  • 19. Do Not Forget What?
  • 20. Streamlined Content Input KISS: Keep It Simple Stupid NO, NO YES
  • 21. Semantics Education Help those inputting content make the best of their content Explain to them how HTML tags are used and what they do: <abbr> <quote> <sub> <acronym> <blockquote> <sup> <strong> <cite> <del> <em> <ins>
  • 22. Solutions Markdown? Some Agencies will teach their clients markdown to accelerate/clean content input Inline Editing? Aloha Editor Drupal Core wysiwyg? Drupal 8 will have a RTE/Wysiwyg in core

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n