Paint it Plone!

1,198 views
883 views

Published on

In this talk, using a real case scenario (taken from the presenter's experience), we will see how it is possible to fit onto Plone a design that wasn't made for it, and what tools and methodologies to employ to do it in the best possible way.

This is a task that a large part of the audience probably encountered more than one time in their professional career, and the purpose of this talk is to expose:

The challenges that one has to encounter when shifting from the designer table to the muddy world of markup and code
Tips and tricks on how to get yourself out of the aforementioned mud
Learning to be bold and venturing out of your comfort zone

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,198
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Paint it Plone!

  1. Paint it !
  2. ThemingWhat 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 designer2. HTML mockups a. Widget library3. Integration with backend Paint it Plone! — Simone Deponti for Abstract
  4. Theming The cast 1. Wireframe2. Mockups3. UX customizations4. Static theme5. Diazo rules6. Custom templates Paint it Plone! — Simone Deponti for Abstract
  5. Dawn of a design
  6. The dawn of a designGood 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 ratioWeb pages have to adapt to different sizes and resolutions, making absolute measurement verydifficult. 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 measure1. Font sizes (headings and normal text)2. Paddings, margins, interlines3. Elements4. Lines (borders, graphic signs, etc) Paint it Plone! — Simone Deponti for Abstract
  9. I forgot my phone! Its not necessary to start your design with mobile experience in mind, but it helps. However, its 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 doesnt perform so well Paint it Plone! — Simone Deponti for Abstract
  10. Playing with blocksDo not focus on decorationsInstead focus on typography, elements, and make something that works well with no decorations andin black & white.Colors and graphics elements enhance the experience, they cannot create it alone Paint it Plone! — Simone Deponti for Abstract
  11. Typography
  12. Johannes legacyFun fact Gutenbergs 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 wrongBad GoodFusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsum quam, suscipit Fusce pulvinar justo inantetristiquevitae porta nisi elementum. In ipsumvelpellentesque 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 wrongBad 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. Whats 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, Plones builtinMore 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 ownYou can make a grid that is also a layout engine.With a good starting point (Golden Grid System) its 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
  19. CSS Preprocessors
  20. LESS vs SASSLESS 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/SASSCSS 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 brainLESS 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. ColorsQuestion 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
  24. InternetExplorer
  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 IEInternet Explorer bugs, by versionVersion 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 doesnt 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 tricksUse 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
  28. Cutting & Seaming
  29. Models and policiesThere 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 andmock.This also reminds me of something else that began with D. Paint it Plone! — Simone Deponti for Abstract
  30. Bootstrap The lessonBootstrap is more than a default set of CSS.It provides a documented set of widgets, where its easy to pick the one that fits best thanks to visualexamples, 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 opportunityNothing 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 overthe ++theme++ traversal namespace.It doesnt need to be as wide or as encompassing as Bootstrap , but its 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 tricksA 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 jbotThere are situations in which using Diazo is overkill.Then you shall use jbot.When to do that: 1. When its 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. Questions? Paint it Plone! — Simone Deponti for Abstract

×