Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing Your Ultimate Package

C9b18d9dff88a9dd2393364c2b3b21bd?s=47 Simon Collison
September 28, 2011

Developing Your Ultimate Package

Presented at FOWA Tour, Leeds, 2009

In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".

Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".

C9b18d9dff88a9dd2393364c2b3b21bd?s=128

Simon Collison

September 28, 2011
Tweet

Transcript

  1. None
  2. None
  3. Conventions

  4. http://costumepop.com/costume-buzz/12-costume-fails-from-comic-con/

  5. A base layer of rules and conventions that act as

    starting points for HTML, CSS, JavaScript and ExpressionEngine for all projects.
  6. • Basic HTML files & naming conventions • PHP for

    basic templates prior to CMS integration. • CSS: Stylesheets, IE-specific, reset, scratch files etc. • JavaScript: jQuery, onload triggers, transparency support • Other Assets such as folders for images, Flash etc.
  7. A bumper compendium of cascading CSS files, naming conventions, modules,

    plugins and scripts that ensure any project will stay on convention, and be simple for anyone to step into and work with at any time.
  8. • Allows better collaboration within the team; the designer can

    jump into the developer’s code and vice-versa. • Anyone who hasn’t even worked on a certain project can jump in and quickly solve problems because everything is on convention. • Keeps output fresh and ensures use of best practices. • Establishes a thoroughly connected layer of base files allowing for swift CSS and JavaScript implementation and other assets. • Makes life easier for developers and designers... and anyone really • Helps maintain quality control
  9. Iteration

  10. We’re constantly considering HTML, CSS, browsers, JavaScript, naming conventions, CMS

    usage and any improvements in general methods or implementations. Constant iterations of the package are made.
  11. Version control

  12. We’re currently on version 2.2 - and it’s available internally

    on our systems with a changelog, meaning anyone can use it as a starting point for both agency and personal projects.
  13. None
  14. Opening the package

  15. Root Root

  16. Assets

  17. Stylesheets

  18. Images

  19. JavaScript

  20. HTML templates

  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

    xml:lang="en" lang="en"> <head> <!-- META --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="description" content="" /> <meta name="author" content="Erskine Design" /> <meta name="Copyright" content="" /> <!-- TITLE --> <title>Home</title> <!-- CSS --> <link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" /> <!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <!--[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <link href="assets/css/print.css" type="text/css" rel="stylesheet" media="print" /> <link href="assets/css/mobile.css" type="text/css" rel="stylesheet" media="handheld" /> <!-- JS --> <script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="assets/js/onload.js"></script> <!--[if IE 6]><script type="text/javascript" src="assets/js/belatedpng-0.0.7a.js"></script><![endif]--> <!--[if IE 6]><script type="text/javascript" src="assets/js/ie6.js"></script><![endif]--> <!-- RSS --> <!-- FAVICON --> <link rel="shortcut icon" href="assets/images/site/favicon.ico" type="image/ico" /> </head> <body> </body> </html>
  22. PHP templates

  23. <?php $section = "home"; ?> <?php $body_class = "home"; ?>

    <?php $page_title = "Home"; ?> <?php include('_start.php') ?> Hello <?php include('_end.php') ?> index.php
  24. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html

    xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- META --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="description" content="" /> <meta name="author" content="Erskine Design" /> <meta name="Copyright" content="" /> <!-- TITLE --> <title><?php echo("$page_title"); ?></title> <!-- CSS --> <link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" /> <!-- JS --> <script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="assets/js/onload.js"></script> <!-- RSS --> <!-- FAVICON --> <link rel="shortcut icon" href="assets/images/site/favicon.ico" type="image/ico" /> </head> <body class="<?php echo("$body_class"); ?>"> _start.php (slim version)
  25. <title><?php echo("$page_title"); ?></title> <body class="<?php echo("$body_class"); ?>"> _start.php

  26. </body> </html> _end.php

  27. Stylesheets

  28. CSS default

  29. /* [PROJECT] by ERSKINE DESIGN VERSION 1.0 CONTENTS ---------- 1.BODY

    2.DEFAULT STYLING 3.HEADINGS 4.LINKS 5.IMAGES 6.LAYOUT 7.BRANDING/MASTHEAD 8.NAVIGATION 9.SITEINFO/FOOTER [etc] */
  30. @import url(reset.css); /* RESET CSS */ @import url(forms.css); /* FORMS

    CSS */ @import url(scratch.css); /* SCRATCH */
  31. /* 1.BODY ------------------------------------------------------------------ ---- */ body { text-shadow:rgba(0,0,0,0.01) 0 0

    1px; } a.access { position:absolute; top:-9999px; left:-9999px; font- family:Verdana,sans-serif; font-size:10px; font-weight:bold; background:#eee; border:2px solid #ddd; padding:10px; } a.access:focus { display:block; top:0; left:0; color:#333; }
  32. CSS reset

  33. /* RESET STYLESHEET */ html, body, div, span, applet, object,

    iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font- family:inherit; vertical-align:baseline; } /* remember to define focus styles! */ /*:focus { outline:0; }*/ body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } input { vertical-align:middle; } img { display:block; }
  34. CSS for IE6 & IE7

  35. <!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <!--[if IE

    7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> Conditional comments
  36. /* [PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES

    CONTENTS ---------- ------------------- */
  37. JavaScript

  38. jQuery

  39. belatedPNG

  40. ie6.js

  41. $(document).ready(function(){ // FORMS $("input[type='button']").addClass('button'); $("input[type='checkbox']").addClass('checkbox'); $("input[type='file']").addClass('file'); $("input[type='image']").addClass('image'); $("input[type='password']").addClass('password'); $("input[type='radio']").addClass('radio'); $("input[type='submit']").addClass('submit');

    $("input[type='text']").addClass('text'); // RSS ICON $("img[alt='Feed Icon']").addClass('rss_icon'); }); // BELATED PNG IMAGE FIXING DD_belatedPNG.fix('');
  42. onload.js

  43. $(document).ready(function(){ });

  44. Content management

  45. None
  46. If you like the idea and general approach, you’d do

    worse than to build your own package.
  47. Our package isn’t publicly available because it is ours -

    bespoke, custom, built especially for our purposes suiting our needs.
  48. •http://colly.com/comments/the_process_toolbox_a_nine_part_epic/ •http://erskinelabs.com/post/the-process-toolbox-part-seven-convention/ Further reading...

  49. None
  50. • Naming conventions • HTML & XHTML • HTML5 ?

    • JavaScript • jQuery & Libraries • PHP • Templating • Wireframing • IE6, IE7 & IE8 • Reset browser defaults • CSS Frameworks • Scratch files • Mobile & Handheld • Print stylesheets • PNG support • Flash and SWF • Image folders • Content Management Anything else?
  51. None