Conventions
http://costumepop.com/costume-buzz/12-costume-fails-from-comic-con/
A base layer of rules and
conventions that act as starting
points for HTML, CSS, JavaScript
and ExpressionEngine for
all p...
•   Basic HTML files & naming conventions
•   PHP for basic templates prior to CMS integration.
•   CSS: Stylesheets, IE-sp...
A bumper compendium of
cascading CSS files, naming
conventions, modules, plugins and
scripts that ensure any project will
s...
• Allows better collaboration within the team; the designer
  can jump into the developer’s code and vice-versa.

• Anyone...
Iteration
We’re constantly considering
HTML, CSS, browsers, JavaScript,
naming conventions, CMS usage
and any improvements in genera...
Version control
We’re currently on version 2.2 - and it’s
available internally on our systems
with a changelog, meaning anyone can
use it ...
Opening the package
Root
Assets
Stylesheets
Images
JavaScript
HTML templates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=...
PHP templates
index.php


<?php   $section = "home"; ?>
<?php   $body_class = "home"; ?>
<?php   $page_title = "Home"; ?>
<?php   includ...
_start.php (slim version)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtm...
_start.php




<title><?php echo("$page_title"); ?></title>



<body class="<?php echo("$body_class"); ?>">
_end.php


  </body>

  </html>
Stylesheets
CSS default
/*


    [PROJECT] by ERSKINE DESIGN

    VERSION 1.0


    CONTENTS ----------

        1.BODY

       2.DEFAULT STYLING
...
@import url(reset.css); /* RESET CSS */
@import url(forms.css); /* FORMS CSS */
@import url(scratch.css); /* SCRATCH */
/* 1.BODY
------------------------------------------------------------------
---- */

body { text-shadow:rgba(0,0,0,0.01) ...
CSS reset
/*

   RESET STYLESHEET

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a,...
CSS for IE6 & IE7
Conditional comments



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


    [PROJECT] by ERSKINE DESIGN

    VERSION 1.0

    IE6 OVERRIDE STYLES


    CONTENTS ----------




    ---------...
JavaScript
jQuery
belatedPNG
ie6.js
$(document).ready(function(){

      // FORMS
      $("input[type='button']").addClass('button');
      $("input[type='che...
onload.js
$(document).ready(function(){



             });
Content management
If you like the idea and
general approach, you’d do
worse than to build your own
package.
Our package isn’t publicly
available because it is ours -
bespoke, custom, built especially
for our purposes suiting our n...
Further reading...




•http://colly.com/comments/the_process_toolbox_a_nine_part_epic/
•http://erskinelabs.com/post/the-p...
•   Naming conventions       •   Reset browser defaults
•   HTML & XHTML             •   CSS Frameworks
•   HTML5 ?       ...
Developing Your Ultimate Package
Developing Your Ultimate Package
Developing Your Ultimate Package
Developing Your Ultimate Package
Developing Your Ultimate Package
Developing Your Ultimate Package
Upcoming SlideShare
Loading in...5
×

Developing Your Ultimate Package

11,847

Published on

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".

Published in: Business, Technology
6 Comments
30 Likes
Statistics
Notes
  • Thanks for sharing such an amazing explanation through nicely built presentation. I have website: http://www.baptemeair.com/ that I wish to embed this slide into them. I hope you don’t mind. Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks Simon! Will take a look
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • We use http://www.dokuwiki.org/ for that, despite using mostly home-rolled systems for everything else.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Chris Hart: Yes, that is what I wanted to know. Is that an off the shelf wiki (if so which one) or a system they have rolled themselves (maybe using EE)? I'm researching how to set-up a central place for internal documentation and our 'package' and wondered what Erskine are using.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I would assume that screen is a grab from the web based wiki they use as a 'home' for the package.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
11,847
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
444
Comments
6
Likes
30
Embeds 0
No embeds

No notes for slide

Developing Your Ultimate Package

  1. 1. Conventions
  2. 2. http://costumepop.com/costume-buzz/12-costume-fails-from-comic-con/
  3. 3. A base layer of rules and conventions that act as starting points for HTML, CSS, JavaScript and ExpressionEngine for all projects.
  4. 4. • 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.
  5. 5. 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.
  6. 6. • 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
  7. 7. Iteration
  8. 8. 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.
  9. 9. Version control
  10. 10. 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.
  11. 11. Opening the package
  12. 12. Root
  13. 13. Assets
  14. 14. Stylesheets
  15. 15. Images
  16. 16. JavaScript
  17. 17. HTML templates
  18. 18. <!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>
  19. 19. PHP templates
  20. 20. index.php <?php $section = "home"; ?> <?php $body_class = "home"; ?> <?php $page_title = "Home"; ?> <?php include('_start.php') ?> Hello <?php include('_end.php') ?>
  21. 21. _start.php (slim version) <!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"); ?>">
  22. 22. _start.php <title><?php echo("$page_title"); ?></title> <body class="<?php echo("$body_class"); ?>">
  23. 23. _end.php </body> </html>
  24. 24. Stylesheets
  25. 25. CSS default
  26. 26. /* [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] */
  27. 27. @import url(reset.css); /* RESET CSS */ @import url(forms.css); /* FORMS CSS */ @import url(scratch.css); /* SCRATCH */
  28. 28. /* 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; }
  29. 29. CSS reset
  30. 30. /* 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; }
  31. 31. CSS for IE6 & IE7
  32. 32. Conditional comments <!--[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]-->
  33. 33. /* [PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES CONTENTS ---------- ------------------- */
  34. 34. JavaScript
  35. 35. jQuery
  36. 36. belatedPNG
  37. 37. ie6.js
  38. 38. $(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('');
  39. 39. onload.js
  40. 40. $(document).ready(function(){ });
  41. 41. Content management
  42. 42. If you like the idea and general approach, you’d do worse than to build your own package.
  43. 43. Our package isn’t publicly available because it is ours - bespoke, custom, built especially for our purposes suiting our needs.
  44. 44. Further reading... •http://colly.com/comments/the_process_toolbox_a_nine_part_epic/ •http://erskinelabs.com/post/the-process-toolbox-part-seven-convention/
  45. 45. • Naming conventions • Reset browser defaults • HTML & XHTML • CSS Frameworks • HTML5 ? • Scratch files • JavaScript • Mobile & Handheld • jQuery & Libraries • Print stylesheets • PHP • PNG support • Templating • Flash and SWF • Wireframing • Image folders • IE6, IE7 & IE8 • Content Management Anything else?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×