SlideShare a Scribd company logo
1 of 38
Paint it   !
Theming
What is theming?

   Adding decorations          CSS
   Altering structure          Configuration, Diazo
   Modifying user experience   Diazo, Programming




                                                     Paint it Plone! — Simone Deponti for Abstract
Theming The process
 1. Mockups by designer
2. HTML mockups
    a. Widget library

3. Integration with backend




                              Paint it Plone! — Simone Deponti for Abstract
Theming The cast
 1. Wireframe
2. Mockups
3. UX customizations
4. Static theme
5. Diazo rules
6. Custom templates




                       Paint it Plone! — Simone Deponti for Abstract
Dawn of a design
The dawn of a design
Good                   Bad
  Wireframes             Printed stuff
  Mockups with specs     No specs
  Modular design         No patterns




                                        Paint it Plone! — Simone Deponti for Abstract
Ratio
 « The relationship in quantity, amount, or size between two or more things
                                                                                               — Definition of ratio



Web pages have to adapt to different sizes and resolutions, making absolute measurement very
difficult. But you can try to maintain a pattern with proportions, which is fundamental for:

   Legibility
   Usability
   Aesthetics




                                                                              Paint it Plone! — Simone Deponti for Abstract
What to measure
1. Font sizes (headings and normal text)
2. Paddings, margins, interlines
3. Elements
4. Lines (borders, graphic signs, etc)




                                           Paint it Plone! — Simone Deponti for Abstract
I forgot my phone!

     It's not necessary to start your design with
     mobile experience in mind, but it helps.

     However, it's not possible to entirely
     delegate the mobile experience to
     implementation time, you need to go back
     to the drawing board for that.

     Progressive enhancement currently
     doesn't perform so well




                                                    Paint it Plone! — Simone Deponti for Abstract
Playing with blocks
Do not focus on decorations

Instead focus on typography, elements, and make something that works well with no decorations and
in black & white.

Colors and graphics elements enhance the experience, they cannot create it alone




                                                                         Paint it Plone! — Simone Deponti for Abstract
Typography
Johannes' legacy
Fun fact
    Gutenberg's Bible is still one of the pinnacles of the art of typography, being one of the very few
    printed books that can rival with carefully handcrafted books (as done by scribes) in terms of
    beauty.

Screen typography is even harder:

    Hinting is crucial
    Hinting is boring and hard
    Many free fonts are not well hinted
    Font rendering systems vary wildly




                                                                               Paint it Plone! — Simone Deponti for Abstract
Getting text wrong
Bad                                                                                            Good
Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit         Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum
velpellentesque a, porttitor tempus mi. Aliquam at orcilobortis metus venenatis facilisis.
                                                                                                quam, suscipit velpellentesque a, porttitor tempus mi. Aliquam at
   Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
                                                                                                orcilobortis metus venenatis facilisis.
   Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
                                                                                                    Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc.
                                                                                                    Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque.
Lorem ipsum dolor
                 Integer mollis, augue et molestie rutrum, lorem velit fringilla ipsum, eget
                 pellentesque tortor purus eu enim.                                             Lorem ipsum dolor
                 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere                          Integer mollis, augue et molestie rutrum, lorem velit
                 cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed,                                     fringilla ipsum, eget pellentesque tortor purus eu enim.
                 consectetur nec felis. Ut ac felis nisi.
                                                                                                                   Vestibulum ante ipsum primis in faucibus orci luctus et
                                                                                                                   ultrices posuere cubilia Curae; Nam nunc diam,
                                                                                                                   pellentesque eget eleifend sed, consectetur nec felis.
                                                                                                                   Ut ac felis nisi.




                                                                                                                                     Paint it Plone! — Simone Deponti for Abstract
Getting fonts wrong
Bad                                                    Good
 @font-face {                                           @font-face {
     font-family: 'PTSansNarrowRegular';                    font-family: 'PTSans';
     src: url('PTN57F-webfont.eot');                        src: url('PTN57F-webfont.eot');
     src: url('PTN57F-webfont.woff') format('woff');        src: url('PTN57F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 200;
     font-style: normal;                                    font-style: normal;

 }                                                      }

 @font-face {                                           @font-face {
     font-family: 'PTSansCaptionBold';                      font-family: 'PTSans';
     src: url('PTC75F-webfont.eot');                        src: url('PTC75F-webfont.eot');
     src: url('PTC75F-webfont.woff') format('woff');        src: url('PTC75F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 700;
     font-style: normal;                                    font-style: normal;

 }                                                      }

 @font-face {                                           @font-face {
     font-family: 'PTSansCaptionRegular';                   font-family: 'PTSans';
     src: url('PTC55F-webfont.eot');                        src: url('PTC55F-webfont.eot');
     src: url('PTC55F-webfont.woff') format('woff');        src: url('PTC55F-webfont.woff') format('woff');
     font-weight: normal;                                   font-weight: 400;
     font-style: normal;                                    font-style: normal;
 }                                                      }




                                                                                                 Paint it Plone! — Simone Deponti for Abstract
Grids
What's a grid?
A grid is:

  1. A creative constraint
  2. The exoskeleton of the page
  3. Something that helps in placing stuff




                                            Paint it Plone! — Simone Deponti for Abstract
What grid?
Avoid fluid grids.

Obvious, recommended choice
    The Deco grid system, Plone's builtin
More original choice
    Get a prebuilt one (personal preferences: cssgrid, frameless)
Not-as-crazy-as-it-sounds choice
    Make your own




                                                                    Paint it Plone! — Simone Deponti for Abstract
Making your own
You can make a grid that is also a layout engine.

With a good starting point (Golden Grid System) it's not that hard.

When doing responsive design, not all layouts are possible (a 16-column grid has 16! possible layouts).

Optimize/tweak only for the layouts you use.




                                                                             Paint it Plone! — Simone Deponti for Abstract
CSS Preprocessors
LESS vs SASS
LESS                                          SASS
  Easier to setup                               Feature complete
  Works client side (great for development)     Slightly more difficult to set up
  Lacks a couple features                       Ruby
  Javascript & node.js




                                                                     Paint it Plone! — Simone Deponti for Abstract
CSS vs LESS/SASS
CSS                               LESS
 #header {                         @darkred: #842210;
   border-radius: 5px;             @blackish: #111111;
   -webkit-border-radius: 5px;     .rounded-corners (@radius: 5px) {
   -moz-border-radius: 5px;          border-radius: @radius;
 }                                   -webkit-border-radius: @radius;
 #header h1 {                        -moz-border-radius: @radius;
   color: #842210;                 }
   font-size: 26px;                #header {
   font-weight: bold;                .rounded-corners();
 }                                   h1 {
 #header p {                           color: @darkred;
   font-size: 12px;                    font-size: 26px;
   color: #111111;                     font-weight: bold;
 }                                   }
 #header p a {                       p {
   text-decoration: none;              font-size: 12px;
 }                                     color: @blackish;
 #header p a:hover {                   a {
   border-width: 1px;                     text-decoration: none;
 }                                        &:hover { border-width: 1px }
 #footer {                             }
   border-radius: 10px;              }
   -webkit-border-radius: 10px;    }
   -moz-border-radius: 10px;       #footer { .rounded-corners(10px); }
 }




                                                                          Paint it Plone! — Simone Deponti for Abstract
Owh, my brain
LESS                        CSS
 .mixin1() {                 .tst3 {
   @media all {                color: grey;
     .tst {                  }
       color: black;         @media all {
       @media screen {         .tst {
         color: red;             color: black;
         .tst3 {               }
            color: white;    }
         }                   @media all and screen {
       }                       .tst {
     }                           color: red;
   }                           }
 }                             .tst .tst3 {
 .tst3 {                         color: white;
   color: grey;                }
 }                           }
 .mixin1();




                                                       Paint it Plone! — Simone Deponti for Abstract
Colors
Question
   What is the hexadecimal value ( #XXXXXX ) for a dark, desaturated yellow?

Modern browsers have    hsl()   ( hsl(60,   30%, 30%); ).


IE (6|7|8): What about us?

Using a CSS preprocessor helps:     desaturate(darken(yellow, 30%), 30%);




                                                                               Paint it Plone! — Simone Deponti for Abstract
Internet
Explorer
Dissociative identity disorder
      China is the only country still using IE6 widely, 21.3% still use IE6 (source: ie6countdown.com)
      Internet Explorer usage in 2012, by version

                           Region                         IE 9     IE 8    IE 7                IE 6
      Worldwide                                          15.22%   15.10%   2.15%             0.90%
      Europe                                             14.79%   12.05%   1.70%             0.47%
      North America                                      16.97%   12.05%   2.60%             0.62%
      South America                                      11.45%   14.11%   1.42%             0.56%
      Asia                                               10.85%   18.13%   2.40%   2.04% (but 16.88% in China)
      Africa                                             8.84%    12.43%   1.73%              1.53%
      Oceania                                            20.79%   14.22%   1.76%             0.47%




Percentage of total market, data by gs.statcounter.com                                 Paint it Plone! — Simone Deponti for Abstract
Bugs affecting IE
Internet Explorer bugs, by version

Version                                                             Bugs/missing features
     6       No   > , + , tag[attr="value"] , position: fixed ,   buggy   .class1.class2 , :hover   only on links, buggy    overflow: visible .

             No   (max|min)-(width|height)

     7       No :before , :after , :focus , buggy :first-child , buggy        position: fixed ,   broken box model and no way to have a
             border that doesn't take up space.
             Also incomplete table styling (forget about playing with borders) and handling of whitespace.

     8       No CSS3 whatsoever, including         :last-child .

             Webfonts look ugly.
             :first-child , + ,      do not behave correctly when you add/remove elements

     9       Not substantially better or worse than any other browser




                                                                                                                 Paint it Plone! — Simone Deponti for Abstract
IE tricks
Use modernizr.js to include browser-specific optimizations.

Use Javascript to add classes where you are missing selectors (e.g.   :first-child   and      :last-child ).


Throw away borders for browsers with an incomplete box model.




                                                                               Paint it Plone! — Simone Deponti for Abstract
Cutting & Seaming
Models and policies
There are too many page types for a designer to come up with a full mockup of each.

However, if you decompose each page in a layout and a set of widgets, things are easier to design and
mock.

This also reminds me of something else that began with D.




                                                                            Paint it Plone! — Simone Deponti for Abstract
Bootstrap The lesson
Bootstrap is more than a default set of CSS.

It provides a documented set of widgets, where it's easy to pick the one that fits best thanks to visual
examples, and just using the correct markup does the job.

And the whole system is coherent and cohesive, allowing you to mix & match.




                                                                              Paint it Plone! — Simone Deponti for Abstract
Bootstrap The opportunity
Nothing prevents you to do what Bootstrap does.

Catalog and document all of your widgets in a static template, and   plone.app.theming       will serve it over
the ++theme++ traversal namespace.

It doesn't need to be as wide or as encompassing as Bootstrap , but it's a very good starting point.




                                                                               Paint it Plone! — Simone Deponti for Abstract
Useful CSS classes
  .hiddenStructure   Links
  .selected              .link-plain

  .portalMessage         .link-anchor

      .info              .link-external

      .warning           .link-category   (tags)
      .error             .link-overlay



  .discreet




                                             Paint it Plone! — Simone Deponti for Abstract
Useful markup
 Tables
 Tabs
 Portlets
 Breadcrumbs
 Navigation
 Edit bar




                Paint it Plone! — Simone Deponti for Abstract
Useful Javascript
  modernizr
  jQuery
  jQueryTools (tabs, overlays)
  jQueryUI (currently as add-on)




                                   Paint it Plone! — Simone Deponti for Abstract
Diazo tricks
A few parts of Diazo often overlooked or misunderstood.

Wrapping stuff                                            classA is classB
  <replace css:content="#my-content">                     <replace css:content=".classA">
    <div id="my-wrapper" class="a-class">                   <xsl:copy select="node()">
      <div class="another-class">                             <xsl:attribute name="class">
        <xsl:apply-templates select="node()" />                 <xsl:value-of select="./@class" /> classB
      </div>                                                  </xsl:attribute>
    </div>                                                    <xsl:apply-templates />
  </replace>                                                </xsl:copy>
                                                          </replace>




if ... elif ... else                                     and
  <rules css:if-content="#foo"> ... </rules>
  <rules css:if-content="#bar"> ... </rules>              <rules css:if-content="#foo">
  <rules css:if-not-content="#foo, #bar"> ... </rules>      <rules css:if-content="#bar"> ... </rules>
                                                          </rules>




                                                                                                   Paint it Plone! — Simone Deponti for Abstract
Using jbot
There are situations in which using Diazo is overkill.

Then you shall use jbot.

When to do that:

  1. When it's a small component.
  2. When it would require the use of advanced XSLT to morph the original HTML.




                                                                          Paint it Plone! — Simone Deponti for Abstract
Questions?




             Paint it Plone! — Simone Deponti for Abstract

More Related Content

Similar to Paint it Plone!

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Tim Frick
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark versionhamza bekkali
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark versionhamza bekkali
 
4.3 mixed scheme dark version
4.3 mixed scheme   dark version4.3 mixed scheme   dark version
4.3 mixed scheme dark versionhamza bekkali
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...NCCOMMS
 
10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your timeHavain
 
Production management stage 2 2015
Production management stage 2 2015Production management stage 2 2015
Production management stage 2 2015Benedict Terry
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Olybop .fr
 
Stop-Motion-Animation.ppt
Stop-Motion-Animation.pptStop-Motion-Animation.ppt
Stop-Motion-Animation.pptraketeeraph
 
15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web SiteIan Lurie
 

Similar to Paint it Plone! (20)

Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark version
 
16.9 mixed scheme
16.9 mixed scheme16.9 mixed scheme
16.9 mixed scheme
 
16.9 blue scheme
16.9 blue scheme16.9 blue scheme
16.9 blue scheme
 
16.9 red scheme
16.9 red scheme16.9 red scheme
16.9 red scheme
 
16.9 mixed scheme dark version
16.9 mixed scheme   dark version16.9 mixed scheme   dark version
16.9 mixed scheme dark version
 
16.9 blue scheme
16.9 blue scheme16.9 blue scheme
16.9 blue scheme
 
4.3 mixed scheme
4.3 mixed scheme4.3 mixed scheme
4.3 mixed scheme
 
4.3 mixed scheme dark version
4.3 mixed scheme   dark version4.3 mixed scheme   dark version
4.3 mixed scheme dark version
 
4.3 blue scheme
4.3 blue scheme4.3 blue scheme
4.3 blue scheme
 
4.3 red scheme
4.3 red scheme4.3 red scheme
4.3 red scheme
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
 
10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time10 PowerPoint hacks that will help you win friends and save your time
10 PowerPoint hacks that will help you win friends and save your time
 
Production management stage 2 2015
Production management stage 2 2015Production management stage 2 2015
Production management stage 2 2015
 
16.9 mixed scheme
16.9 mixed scheme16.9 mixed scheme
16.9 mixed scheme
 
The Wedge
The WedgeThe Wedge
The Wedge
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3
 
Stop-Motion-Animation.ppt
Stop-Motion-Animation.pptStop-Motion-Animation.ppt
Stop-Motion-Animation.ppt
 
15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site15 Ways To A Blistering-Fast Web Site
15 Ways To A Blistering-Fast Web Site
 
Proposal
ProposalProposal
Proposal
 

Recently uploaded

UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 

Recently uploaded (20)

UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 

Paint it Plone!

  • 2. Theming What is theming? Adding decorations CSS Altering structure Configuration, Diazo Modifying user experience Diazo, Programming Paint it Plone! — Simone Deponti for Abstract
  • 3. Theming The process 1. Mockups by designer 2. HTML mockups a. Widget library 3. Integration with backend Paint it Plone! — Simone Deponti for Abstract
  • 4. Theming The cast 1. Wireframe 2. Mockups 3. UX customizations 4. Static theme 5. Diazo rules 6. Custom templates Paint it Plone! — Simone Deponti for Abstract
  • 5. Dawn of a design
  • 6. The dawn of a design Good Bad Wireframes Printed stuff Mockups with specs No specs Modular design No patterns Paint it Plone! — Simone Deponti for Abstract
  • 7. Ratio « The relationship in quantity, amount, or size between two or more things — Definition of ratio Web pages have to adapt to different sizes and resolutions, making absolute measurement very difficult. But you can try to maintain a pattern with proportions, which is fundamental for: Legibility Usability Aesthetics Paint it Plone! — Simone Deponti for Abstract
  • 8. What to measure 1. Font sizes (headings and normal text) 2. Paddings, margins, interlines 3. Elements 4. Lines (borders, graphic signs, etc) Paint it Plone! — Simone Deponti for Abstract
  • 9. I forgot my phone! It's not necessary to start your design with mobile experience in mind, but it helps. However, it's not possible to entirely delegate the mobile experience to implementation time, you need to go back to the drawing board for that. Progressive enhancement currently doesn't perform so well Paint it Plone! — Simone Deponti for Abstract
  • 10. Playing with blocks Do not focus on decorations Instead focus on typography, elements, and make something that works well with no decorations and in black & white. Colors and graphics elements enhance the experience, they cannot create it alone Paint it Plone! — Simone Deponti for Abstract
  • 12. Johannes' legacy Fun fact Gutenberg's Bible is still one of the pinnacles of the art of typography, being one of the very few printed books that can rival with carefully handcrafted books (as done by scribes) in terms of beauty. Screen typography is even harder: Hinting is crucial Hinting is boring and hard Many free fonts are not well hinted Font rendering systems vary wildly Paint it Plone! — Simone Deponti for Abstract
  • 13. Getting text wrong Bad Good Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum velpellentesque a, porttitor tempus mi. Aliquam at orcilobortis metus venenatis facilisis. quam, suscipit velpellentesque a, porttitor tempus mi. Aliquam at Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc. orcilobortis metus venenatis facilisis. Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque. Nulla nisl sapien, elementum eu lobortis a, auctor sit amet nunc. Proin urna nulla, imperdietinplacerateu, vehicula sit amet neque. Lorem ipsum dolor Integer mollis, augue et molestie rutrum, lorem velit fringilla ipsum, eget pellentesque tortor purus eu enim. Lorem ipsum dolor Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere Integer mollis, augue et molestie rutrum, lorem velit cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed, fringilla ipsum, eget pellentesque tortor purus eu enim. consectetur nec felis. Ut ac felis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nunc diam, pellentesque eget eleifend sed, consectetur nec felis. Ut ac felis nisi. Paint it Plone! — Simone Deponti for Abstract
  • 14. Getting fonts wrong Bad Good @font-face { @font-face { font-family: 'PTSansNarrowRegular'; font-family: 'PTSans'; src: url('PTN57F-webfont.eot'); src: url('PTN57F-webfont.eot'); src: url('PTN57F-webfont.woff') format('woff'); src: url('PTN57F-webfont.woff') format('woff'); font-weight: normal; font-weight: 200; font-style: normal; font-style: normal; } } @font-face { @font-face { font-family: 'PTSansCaptionBold'; font-family: 'PTSans'; src: url('PTC75F-webfont.eot'); src: url('PTC75F-webfont.eot'); src: url('PTC75F-webfont.woff') format('woff'); src: url('PTC75F-webfont.woff') format('woff'); font-weight: normal; font-weight: 700; font-style: normal; font-style: normal; } } @font-face { @font-face { font-family: 'PTSansCaptionRegular'; font-family: 'PTSans'; src: url('PTC55F-webfont.eot'); src: url('PTC55F-webfont.eot'); src: url('PTC55F-webfont.woff') format('woff'); src: url('PTC55F-webfont.woff') format('woff'); font-weight: normal; font-weight: 400; font-style: normal; font-style: normal; } } Paint it Plone! — Simone Deponti for Abstract
  • 15. Grids
  • 16. What's a grid? A grid is: 1. A creative constraint 2. The exoskeleton of the page 3. Something that helps in placing stuff Paint it Plone! — Simone Deponti for Abstract
  • 17. What grid? Avoid fluid grids. Obvious, recommended choice The Deco grid system, Plone's builtin More original choice Get a prebuilt one (personal preferences: cssgrid, frameless) Not-as-crazy-as-it-sounds choice Make your own Paint it Plone! — Simone Deponti for Abstract
  • 18. Making your own You can make a grid that is also a layout engine. With a good starting point (Golden Grid System) it's not that hard. When doing responsive design, not all layouts are possible (a 16-column grid has 16! possible layouts). Optimize/tweak only for the layouts you use. Paint it Plone! — Simone Deponti for Abstract
  • 20. LESS vs SASS LESS SASS Easier to setup Feature complete Works client side (great for development) Slightly more difficult to set up Lacks a couple features Ruby Javascript & node.js Paint it Plone! — Simone Deponti for Abstract
  • 21. CSS vs LESS/SASS CSS LESS #header { @darkred: #842210; border-radius: 5px; @blackish: #111111; -webkit-border-radius: 5px; .rounded-corners (@radius: 5px) { -moz-border-radius: 5px; border-radius: @radius; } -webkit-border-radius: @radius; #header h1 { -moz-border-radius: @radius; color: #842210; } font-size: 26px; #header { font-weight: bold; .rounded-corners(); } h1 { #header p { color: @darkred; font-size: 12px; font-size: 26px; color: #111111; font-weight: bold; } } #header p a { p { text-decoration: none; font-size: 12px; } color: @blackish; #header p a:hover { a { border-width: 1px; text-decoration: none; } &:hover { border-width: 1px } #footer { } border-radius: 10px; } -webkit-border-radius: 10px; } -moz-border-radius: 10px; #footer { .rounded-corners(10px); } } Paint it Plone! — Simone Deponti for Abstract
  • 22. Owh, my brain LESS CSS .mixin1() { .tst3 { @media all { color: grey; .tst { } color: black; @media all { @media screen { .tst { color: red; color: black; .tst3 { } color: white; } } @media all and screen { } .tst { } color: red; } } } .tst .tst3 { .tst3 { color: white; color: grey; } } } .mixin1(); Paint it Plone! — Simone Deponti for Abstract
  • 23. Colors Question What is the hexadecimal value ( #XXXXXX ) for a dark, desaturated yellow? Modern browsers have hsl() ( hsl(60, 30%, 30%); ). IE (6|7|8): What about us? Using a CSS preprocessor helps: desaturate(darken(yellow, 30%), 30%); Paint it Plone! — Simone Deponti for Abstract
  • 25. Dissociative identity disorder China is the only country still using IE6 widely, 21.3% still use IE6 (source: ie6countdown.com) Internet Explorer usage in 2012, by version Region IE 9 IE 8 IE 7 IE 6 Worldwide 15.22% 15.10% 2.15% 0.90% Europe 14.79% 12.05% 1.70% 0.47% North America 16.97% 12.05% 2.60% 0.62% South America 11.45% 14.11% 1.42% 0.56% Asia 10.85% 18.13% 2.40% 2.04% (but 16.88% in China) Africa 8.84% 12.43% 1.73% 1.53% Oceania 20.79% 14.22% 1.76% 0.47% Percentage of total market, data by gs.statcounter.com Paint it Plone! — Simone Deponti for Abstract
  • 26. Bugs affecting IE Internet Explorer bugs, by version Version Bugs/missing features 6 No > , + , tag[attr="value"] , position: fixed , buggy .class1.class2 , :hover only on links, buggy overflow: visible . No (max|min)-(width|height) 7 No :before , :after , :focus , buggy :first-child , buggy position: fixed , broken box model and no way to have a border that doesn't take up space. Also incomplete table styling (forget about playing with borders) and handling of whitespace. 8 No CSS3 whatsoever, including :last-child . Webfonts look ugly. :first-child , + , do not behave correctly when you add/remove elements 9 Not substantially better or worse than any other browser Paint it Plone! — Simone Deponti for Abstract
  • 27. IE tricks Use modernizr.js to include browser-specific optimizations. Use Javascript to add classes where you are missing selectors (e.g. :first-child and :last-child ). Throw away borders for browsers with an incomplete box model. Paint it Plone! — Simone Deponti for Abstract
  • 29. Models and policies There are too many page types for a designer to come up with a full mockup of each. However, if you decompose each page in a layout and a set of widgets, things are easier to design and mock. This also reminds me of something else that began with D. Paint it Plone! — Simone Deponti for Abstract
  • 30. Bootstrap The lesson Bootstrap is more than a default set of CSS. It provides a documented set of widgets, where it's easy to pick the one that fits best thanks to visual examples, and just using the correct markup does the job. And the whole system is coherent and cohesive, allowing you to mix & match. Paint it Plone! — Simone Deponti for Abstract
  • 31. Bootstrap The opportunity Nothing prevents you to do what Bootstrap does. Catalog and document all of your widgets in a static template, and plone.app.theming will serve it over the ++theme++ traversal namespace. It doesn't need to be as wide or as encompassing as Bootstrap , but it's a very good starting point. Paint it Plone! — Simone Deponti for Abstract
  • 32. Useful CSS classes .hiddenStructure Links .selected .link-plain .portalMessage .link-anchor .info .link-external .warning .link-category (tags) .error .link-overlay .discreet Paint it Plone! — Simone Deponti for Abstract
  • 33. Useful markup Tables Tabs Portlets Breadcrumbs Navigation Edit bar Paint it Plone! — Simone Deponti for Abstract
  • 34. Useful Javascript modernizr jQuery jQueryTools (tabs, overlays) jQueryUI (currently as add-on) Paint it Plone! — Simone Deponti for Abstract
  • 35. Diazo tricks A few parts of Diazo often overlooked or misunderstood. Wrapping stuff classA is classB <replace css:content="#my-content"> <replace css:content=".classA"> <div id="my-wrapper" class="a-class"> <xsl:copy select="node()"> <div class="another-class"> <xsl:attribute name="class"> <xsl:apply-templates select="node()" /> <xsl:value-of select="./@class" /> classB </div> </xsl:attribute> </div> <xsl:apply-templates /> </replace> </xsl:copy> </replace> if ... elif ... else and <rules css:if-content="#foo"> ... </rules> <rules css:if-content="#bar"> ... </rules> <rules css:if-content="#foo"> <rules css:if-not-content="#foo, #bar"> ... </rules> <rules css:if-content="#bar"> ... </rules> </rules> Paint it Plone! — Simone Deponti for Abstract
  • 36. Using jbot There are situations in which using Diazo is overkill. Then you shall use jbot. When to do that: 1. When it's a small component. 2. When it would require the use of advanced XSLT to morph the original HTML. Paint it Plone! — Simone Deponti for Abstract
  • 37.
  • 38. Questions? Paint it Plone! — Simone Deponti for Abstract