{"id":17119,"date":"2012-06-07T18:35:36","date_gmt":"2012-06-08T01:35:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17119"},"modified":"2016-03-04T16:57:57","modified_gmt":"2016-03-04T23:57:57","slug":"notes-from-my-web-designers-workflow-workshop-at-interlink-2012","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/notes-from-my-web-designers-workflow-workshop-at-interlink-2012\/","title":{"rendered":"Notes from my &#8220;Web Designer&#8217;s Workflow&#8221; Workshop at Interlink 2012"},"content":{"rendered":"<p>I was just at the <a href=\"http:\/\/interlinkconference.com\/\" rel=\"noopener\">Interlink conference<\/a> in Vancouver, Canada. I did my first ever workshop: a 3 1\/2 hour romp I called &#8220;A Web Designer&#8217;s Workflow&#8221;. We literally went from nothing (creating a folder on the desktop) to a <a href=\"http:\/\/2012-interlink-workshop-number-one-forever.com\/\" rel=\"noopener\">totally deployed website<\/a>. We covered a lot of ground so I thought I&#8217;d write up some notes. And hey, why not blog it eh?<\/p>\n<ul>\n<li>We started with absolutely nothing. Just made a folder on the desktop called &#8220;Interlink Workshop&#8221;.<\/li>\n<li>We opened up the folder in <a href=\"http:\/\/www.sublimetext.com\/2\" rel=\"noopener\">Sublime Text 2<\/a> and made an index.html file.<\/li>\n<li>We looked at a couple of websites we were going to base ours off: <a href=\"http:\/\/uxmad.com\/\" rel=\"noopener\">UXMad<\/a> and <a href=\"http:\/\/barcamptour.com\/\" rel=\"noopener\">BarCamp Tour<\/a>. They both have a gridular, modular kind of structure.<\/li>\n<li>We hand-wrote the HTML structure. Basically a <code>doctype<\/code>, basic <code>&lt;head&gt;<\/code>, and some divs for columns. We didn&#8217;t use any HTML5 (other than the <code>doctype<\/code>) just because there wasn&#8217;t anything that warranted it yet.<\/li>\n<li>We set up a very simple three-column grid using percentages for widths and gutters. We discussed using a <code>last<\/code> class to deal with the right-most column where we wanted to remove the margin, but ended up using <code>:nth-child<\/code> instead since <code>last<\/code> has no semantic value in a responsive enviornment where that column man not always be &#8220;last.&#8221;<\/li>\n<li>In case we needed to use padding within those columns, we used <a href=\"http:\/\/paulirish.com\/2012\/box-sizing-border-box-ftw\/\" rel=\"noopener\">universal box-sizing border-box<\/a> to make sure the padding wouldn&#8217;t expand the columns and destroy our grid. We also covered why it&#8217;s pretty much awesome all the time and we&#8217;d marry it if we could.<\/li>\n<li>We needed some content inside some modules so we used <a href=\"http:\/\/html-ipsum.com\/\" rel=\"noopener\">HTML-Ipsum<\/a> to copy\/paste some stuff in there.<\/li>\n<li>We started to write a bit more complicated CSS, so we decided to start using <a href=\"http:\/\/sass-lang.com\/\" rel=\"noopener\">Sass<\/a>. We made a &#8220;scss&#8221; folder in our project and made a global.scss file.<\/li>\n<li>To make Sass trivially easy to start using, we used <a href=\"http:\/\/incident57.com\/codekit\/\" rel=\"noopener\">CodeKit<\/a>. We simply drug the folder into the CodeKit window then told CodeKit to process our global.scss file into a global.css in a &#8220;css&#8221; folder. That CSS file is what we linked to from our index.html file.<\/li>\n<li>We made sure CodeKit processed the scss into &#8220;compressed&#8221; format which is the most efficient way to serve CSS and also as a reminder to anyone accidentally opening the file that they shouldn&#8217;t be editing it.<\/li>\n<li>Windows users that can&#8217;t use CodeKit, check out the <a href=\"http:\/\/livereload.com\/\" rel=\"noopener\">Beta LiveReload<\/a>. Linux users, you&#8217;re so fancy you don&#8217;t need any help here.<\/li>\n<li>We watched as CodeKit injected new CSS styles into the page without reloading, which is wicked sweet for stated applications.<\/li>\n<li>We set up some typographic styles for our modules. Part of the fun was making the module header bars, which we used negative margins to pull back out from the padding in the modules.<\/li>\n<li>For fonts, we showed how quick and easy it is to use <a href=\"https:\/\/typekit.com\/fonts\" rel=\"noopener\">Typekit<\/a> to use lovely custom fonts. To make it easier to download and use at home, the final version is using <a href=\"http:\/\/www.google.com\/webfonts\" rel=\"noopener\">Google Fonts<\/a>.<\/li>\n<li>We made sure to watch which font weights we were using. We picked as few as possible to accomodate our needs, keeping things fast, as the file size of font files can add up quick. We specifically declared <code>font-weight<\/code> to exactly what we have available to avoid <a href=\"https:\/\/css-tricks.com\/watch-your-font-weight\/\">gross faux styles<\/a>. <\/li>\n<li>We used a little bit of CSS3. At first, we wrote our own mixins.scss file but then decided doing that would be problematic long term and we switched our project over to use <a href=\"http:\/\/compass-style.org\/\" rel=\"noopener\">Compass<\/a> instead, which was very easy in CodeKit.<\/li>\n<li>We made a special file for variables we could then use in our CSS. We set up some colors and a special number value, <code>$globalPadding<\/code>, which we used all over the place to keeping spacing nice and consistent.<\/li>\n<li>We needed a sexy subtle background, so we <a href=\"http:\/\/subtlepatterns.com\/\" rel=\"noopener\">went and got one<\/a>.<\/li>\n<li>We had to fart around in the Finder a bunch, as you do, so using the split screen feature of <a href=\"http:\/\/totalfinder.binaryage.com\/\" rel=\"noopener\">TotalFinder<\/a> was nice.<\/li>\n<li>We thought we had a good start and was about time we got started with some version control. Because we are good-looking, we went with <a href=\"http:\/\/git-scm.com\/\" rel=\"noopener\">Git<\/a>.<\/li>\n<li>We were thinking about <a href=\"https:\/\/github.com\/\" rel=\"noopener\">GitHub<\/a>, but GitHub doesn&#8217;t help with deployment, so we made a git repo on <a href=\"http:\/\/beanstalkapp.com\/\" rel=\"noopener\">Beanstalk<\/a> instead.<\/li>\n<li>Beanstalk is nicely integrated with the Mac app <a href=\"http:\/\/www.git-tower.com\/\" rel=\"noopener\">Tower<\/a>, which we used to work with Git locally.<\/li>\n<li>We looked at <a href=\"http:\/\/www.godaddy.com\/\" rel=\"noopener\">GoDaddy<\/a>, where I bought the domain from. All we had to do there was get through the 56 up-selling dialog boxes and buy the domain for 12 bucks or whatever. Then we set the nameservers to point at <a href=\"http:\/\/mediatemple.net\/\" rel=\"noopener\">Media Temple<\/a>, where I have some hosting we could use.<\/li>\n<li>I logged into <a href=\"http:\/\/www.parallels.com\/products\/plesk\/\" rel=\"noopener\">Plesk<\/a>, the server management software that comes installed on Media Temple (dv)&#8217;s and created the domain there, so we get an FTP username and password to log in to.<\/li>\n<li>We could have used software like <a href=\"http:\/\/panic.com\/coda\/\" rel=\"noopener\">Coda 2<\/a> to log into our server and deploy our files. But then we decided that an FTP workflow is too dangerous. <a href=\"https:\/\/twitter.com\/endashes\/status\/210470372955533312\" rel=\"noopener\">#FTPBOOFOREVER<\/a>.<\/li>\n<li>Instead, we set up deployment with Beanstalk so that every time we committed to that git repo, it moves the files over to our server for us. Doing this means we&#8217;re in a great place for working with a team, rolling back changes, and all the other awesome stuff that version control affords us. Here&#8217;s <a href=\"https:\/\/css-tricks.com\/video-screencasts\/109-getting-off-ftp-and-onto-git-deployment-with-beanstalk\/\">a screencast on that<\/a>.<\/li>\n<li>We started putting some images into modules. We found some neat ones <a href=\"http:\/\/search.creativecommons.org\/\" rel=\"noopener\">searching Creative Commons licenced stuff on Flickr<\/a>. One image was too big and broke out of its module. We dealt with it by applying some simple fluid images techniques. We didn&#8217;t get too fancy, but we got the images resizing and maintaining aspect ratio. We could have <a href=\"http:\/\/www.alistapart.com\/articles\/fluid-images\/\" rel=\"noopener\">gotten fanicer<\/a>.<\/li>\n<li>We dropped <a href=\"http:\/\/www.youtube.com\/watch?v=FKWwdQu6_ok\" rel=\"noopener\">a video<\/a> into a module as well. We tried to use the same fluid technique as images, but unfortunately it didn&#8217;t work so well. <\/li>\n<li>To solve that, we loaded up <a href=\"http:\/\/jquery.com\/\" rel=\"noopener\">jQuery<\/a> on the site (copied the script from <a href=\"http:\/\/scriptsrc.net\/\" rel=\"noopener\">ScriptSrc<\/a>), loaded up the <a href=\"http:\/\/fitvidsjs.com\/\" rel=\"noopener\">FitVids.js<\/a> plugin, and called it.<\/li>\n<li>We explored some of the JavaScript features of CodeKit. It can check our JavaScript with <a href=\"http:\/\/www.jshint.com\/\" rel=\"noopener\">JS Hint<\/a>, which will find errors. We also figured out that we can drag-and-drop scripts in the UI of CodeKit which will allow us to combine (append or prepend) scripts, minify them, and create a new script for us to use. This allows for a nice JavaScript workflow similar to what were were able to do with CSS preprocessing.<\/li>\n<li>With another image, we played around making it responsive by setting it as a background image in CSS and using <a href=\"https:\/\/css-tricks.com\/perfect-full-page-background-image\/\">fancy CSS3 background sizing<\/a>.<\/li>\n<li>To round out the whole responsive aspect ratio thing, we played around with <a href=\"http:\/\/daverupert.com\/2012\/04\/uncle-daves-ol-padded-box\/\" rel=\"noopener\">padded boxes<\/a>, which we learned was the same concept that FitVids.js uses.<\/li>\n<li>We got into the idea of using icons to enhance the design by adding them into header bars. We looked at <a href=\"http:\/\/pictos.cc\/\" rel=\"noopener\">Pictos Server<\/a> and saw how easy it was to create custom hosted icon sets. We talked about how in production it&#8217;s probably best to self host. We also looked at <a href=\"http:\/\/keyamoon.com\/icomoon\/#toHome\" rel=\"noopener\">IcoMoon<\/a>, an awesome icon set and even awesomer app for creating your own icons fonts with any base icon font set. The final version of the site uses this.<\/li>\n<li>There was a question about forms, so we looked at how <a href=\"http:\/\/wufoo.com\" rel=\"noopener\">Wufoo<\/a> can help with that. Even if you don&#8217;t need all of Wufoo&#8217;s features, you can design a form in Wufoo and download the HTML\/CSS\/JS for free. The structure of Wufoo forms is fantastic for environments that need to be highly adaptable, for instance, being able to change around label placement or deal with right-to-left languages.<\/li>\n<li>Every once in a while we needed to Google stuff, and we looked at how adding &#8221; mdn&#8221; to the end of searches often gets you to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/\" rel=\"noopener\">Mozilla Developer Network<\/a> which is some of the best documentation out there for front end stuff. Heck you could always search on CSS-Tricks too =).<\/li>\n<li>We looked at the <a href=\"http:\/\/html5boilerplate.com\/\" rel=\"noopener\">HTML5 Boilerplate<\/a>. We didn&#8217;t start our project with it, but we looked at the index file line by line and copied stuff over from it that we forgot to add ourselves.<\/li>\n<li>We looked at <a href=\"http:\/\/necolas.github.com\/normalize.css\/\" rel=\"noopener\">Normalize.css<\/a> and discussed how it does both more and less than CSS resets and how the workflow for it is much nicer (i.e. download, don&#8217;t remove anything but change or add stuff, @import into global).<\/li>\n<li>We made a logo for the website. The new HF&#038;J font <a href=\"http:\/\/www.typography.com\/fonts\/font_overview.php?productLineID=100043\" rel=\"noopener\">Idlewild<\/a> just came out so we got that and used it in the logo.<\/li>\n<li>The logo used a bunch of fun colors that were inspired from <a href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2012\/06\/colored-sleeves.jpg\">a sweater I saw<\/a> on my walk over to the venue. Remember inspiration comes from anywhere.<\/li>\n<li>We worked for a while just opening our index.html file in a browser at a file:\/\/ URL, but then after a while that became problematic so we set up a proper domain in <a href=\"http:\/\/www.mamp.info\/en\/index.html\" rel=\"noopener\">MAMP<\/a> so we could work on a local server at a &#8220;real&#8221; domain.<\/li>\n<li>MAMP gave us the ability to use PHP, so we switched the index.html file to index.php so we could use server-side comments which are cleaner than HTML comments. We also used server side comments to give us a blank module template we could copy and paste, without worrying about cluttering\/bloating the HTML.<\/li>\n<li>We touched on how using PHP includes on simple sites can allow us to work in smaller chunks of HTML just like we&#8217;ve been doing in CSS and JS.<\/li>\n<li>We organized a table-like structure for a time table by using an unordered list with strong tags inside. The strong tags were set to inline-block and right-aligned.<\/li>\n<li>We touched on the idea of <a href=\"https:\/\/css-tricks.com\/opt-in-typography\/\">Opt-in Typography<\/a>, that is, using a class on a parent element to identify when we want to apply typographic styles that don&#8217;t take effect otherwise.<\/li>\n<li>Eventually we <a href=\"http:\/\/2012-interlink-workshop-number-one-forever.com\/\" rel=\"noopener\">published the thing<\/a>. I also <a href=\"https:\/\/github.com\/chriscoyier\/Interlink-Workshop\" rel=\"noopener\">chucked it on GitHub<\/a> if you wanna snag the files from there for any reason.<\/li>\n<\/ul>\n<p>Annnnnd that&#8217;s all I can remember. YEAH. That&#8217;s a lot of stuff. I probably should have trimmed it down a bit and focused more on the content (both on the fake site and of the workshop itself). But hey it was my first ever and i had absolutely no idea what I was doing (sorry about that).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A bunch of notes from a workshop I just did in Vancouver, Canada at the Interlink conference. <\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":19731,"url":"https:\/\/css-tricks.com\/workshop-notes-from-incontrol-hawaii\/","url_meta":{"origin":17119,"position":0},"title":"Workshop Notes from InControl Hawaii","date":"January 7, 2013","format":false,"excerpt":"In which I go over many of the important parts of a workshop I did for a small room of folks in Honolulu, Hawaii. Includes the Photoshop file we worked from (kinda) and a GitHub repo of where we ended up.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18515,"url":"https:\/\/css-tricks.com\/notes-from-my-bd-conf-workshop\/","url_meta":{"origin":17119,"position":1},"title":"Notes from my BD Conf Workshop","date":"September 29, 2012","format":false,"excerpt":"Notes from a workshop I recently did. More useful if you were actually at the workshop, but there might be some useful stuff in here even if you weren't.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19139,"url":"https:\/\/css-tricks.com\/deseret-digital-workshop\/","url_meta":{"origin":17119,"position":2},"title":"Template and Notes from my Deseret Digital Workshop","date":"November 5, 2012","format":false,"excerpt":"Last week I was in Salt Lake City to do a workshop for Deseret Digital. Like my last workshop, we used the time to literally build a website from scratch. I think this live coding style is a decent way to do workshops because it is what real life web\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15841,"url":"https:\/\/css-tricks.com\/upcoming-speaking-spring-2012\/","url_meta":{"origin":17119,"position":3},"title":"Upcoming Speaking","date":"January 4, 2012","format":false,"excerpt":"My first half of 2012 is sprinkled with some web conferences I'm very much looking forward to. February 20-21, Orlando, Florida - InControl March 9-13, Austin, Texas - SXSW Interactive April 26-27, Warsaw, Poland - Front-Trends April 30 - May 4, Las Vegas, Nevada - Future Insights Live June 6-7,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16627,"url":"https:\/\/css-tricks.com\/upcoming-speaking-summer-2012\/","url_meta":{"origin":17119,"position":4},"title":"Upcoming Speaking","date":"March 28, 2012","format":false,"excerpt":"Summer edition! March 31 : BarCamp Harrisburg (Pennsylvania) April 7 : MinneBar (Minneapolis, Minnesota) April 14 : BarCamp Orlando (Florida) April 26-27 : Front-Trends (Warsaw, Poland) April 30-May 4 : Future Insights Live (Las Vegas, Nevada) June 6-7 : Interlink (Vancover, Canada) July 31-August 2 - CSS Summit (Online) -\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249655,"url":"https:\/\/css-tricks.com\/automatic-image-optimization-hazel-imageoptim\/","url_meta":{"origin":17119,"position":5},"title":"Automatic Image Optimization with Hazel and ImageOptim","date":"January 4, 2017","format":false,"excerpt":"I'm forever trying to make my local image workflow easier. I work with images as part of blog posts, images as part of sites I'm working on, images headed to social media... images everywhere. Almost always headed to the web. If we're taught one thing about images and the web,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/hazelimageoptim.jpg?fit=1024%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17119"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17119"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17119\/revisions"}],"predecessor-version":[{"id":17135,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17119\/revisions\/17135"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}