Girl Develop It: Intro to Photoshop Web Design

Photo by @sophshepherd

In her Intro to Photoshop for the Web course at Girl Develop It Austin in November 2014, Sophie Shepherd shared her thoughts on creating digital mockups geared for multi-device delivery. Here are my notes from the course:

Basic Thoughts on Photoshop Web Design

  • There are a lot of ways to do the same thing in Photoshop
  • Developing your personal way of finding out how to do it is okay.
  • Become familiar with Photoshop through projects
  • Learn what the software can do and then slowly apply them to your workflow

Setting up Grids

  • Modern Photoshop version 
    • Select View > new Guide Layout… to bring up New Guide Layout dialog box.
    • In dialog box, enter your settings for your grid
  • Older versions of Photoshop 

Clipping or Shape Masking

  • Bring up Ellipse tool (U) in Photoshop
  • Hold down shift while dragging with mouse to create a perfect circle shape
  • Place photograph in a separate layer above circle shape.
  • Select Layer > Create Clipping Mask or press Command + Option + G to place image into the shape of the circle.
  • Image should be framed by circle shape.
  • To mask multiple images can be masked into one shape, select multiple layers above the target layer with the shape.


  • Create a typography box 
    • Press T to bring up the Type tool
    • Click and drag to create a type box
    • Start entering text
    • The dimensions of the box can be adjusted for improved editing.
  • Setup a baseline for typography for vertical rhythm 
    • Turn grid on by selecting View > Show > Grid
    • Select Preferences > Guides, Grid, & Slices to bring up Preferences dialog box
    • In Grid fieldset, set color to light grey
    • Select Dashed Lines for Style
    • Set Gridline Every 16 pixels

Photoshop File Organization

  • Duplicate existing Photoshop 
    • Select a Photoshop layer
    • Press ⌘ + J
    • Name layers with meaningful labels
  • Group layers in layer folders 
    • Select multple layers
    • Then press ⌘ + G
    • Name folders with meaningful labels
  • Read Photoshop Etiquette


[Refresh Austin] Website Performance and RWD Bloat

Dave Rupert talks about RWD Bloat
Photo by @flipstewart

In his RWD Bloat talk at Refresh Austin in November 2014, Dave Rupert shares his thoughts on website performance in responsive web design and his approach for reducing the problem. Here are my notes from his talk:

  • Attack of the Web Site 
    • Web page file sizes are going to go beyond 200MB 
      • 16% of page is made up of images
      • We are putting too many images onto our page
    • This isn’t a RWD problem, but a “web building” problem 
      • Blame the implementation, not the technique.” — Tim Kadlec
    • Example:, personal site 
      • I’m experienced with RWD 
        • Care about performance
        • I have third party ads
        • I have third party comments
        • I have multiple web fonts
        • Including an icon font
        • and I use jQuery
      • Total weight: 174kb 
        • JavaScript and fonts make up most of the page weight
        • HTML makes the smallest
      • CSS:
        • 24kb file size
        • Media queries: 2.4kb
        • Vendor prefixes: 1.4kb
      • JS:
        • 41.2kb file size
        • jQuery: 33.1kb
      • Images
        • Total: 31k
      • Fonts
        • Total: 42.6kb
        • Open sans: 31kb
        • Symnbolset: 26kb
      • Total cost of web site: 4.4kb
        • The problem of bloat is not RWD
    • Speed Index is a statistic to quantify how fast page “feels” on: 
      • PageSpeed (Mobile)
      • PageSpeed (Desktop)
      • Start Render (3G)
      • DOMContentLoaded
      • Speed Index (3G)
    • How fast is fast enough? 
      • Your site should be .5 to 1 second faster than your competitor” — Tim Kadlec
      • It’s fast enough to be a “perceived” change
      • Speed Index under 1,000 — page loads about 1 second on a phone” — Paul Irish
    • Problems in
      • No text until 2.5 seconds
      • Webfonts blocking type rendering
      • Sub-optimal image spriting (172 icon font characters?)
      • Time to first-byte is 500ms in 3G connection speed, has no CSS in it.
    • Baseline
      • Home page: 1446 Speed Index
      • Article page:1749 Speed Index
      • At this point, your job becomes a video game with a goal to get Speed Index values under 1000
    • The steps Dave took: 
      • Removing Reset.css for Normalize.css resulted in: 
        • Home page: 1376 Speed Index
        • Article page: 1412 Speed Index
      • Unblock fonts with loadCSS()
        • Home page: 1327 Speed Index
        • Article page: 1284 Speed Index
      • Could not swap out jQuery for vanilla JavaScript: 
        • Guys, I did not get into this.
        • I rely on a lot of jQuery.
      • SVG Sprites
        • Remove icon fonts for SVG sprites
        • Home page: 1264 Speed Index
        • Article page: 1222 Speed Index
      • CSS Clean up 
        • Home page: 908 Speed Index
        • Article page: 1126 Speed Index
      • The need for perceived speed 
        • Critical CSS
          • Calcuate the style rules that appear “above the fold”
          • Print them in an inline style block in the head
          • Lazyload your stylesheet at the bottom of the page
        • Paint in the first packet 
          • The first packet is 14kb
          • How much of a web page can you put into that 14kb?
          • Just do your best
          • Took two Sass partials that styled the header and top portions of the page and put them in a separate CSS file and put them into the style element in the HTML head element.
        • The results from that effort: 
          • Home page: 728 Speed Index
          • Article page: 1065 Speed Index
      • Resources and thoughts in conclusion: 
        • PNGQuant is a color profile stripper
        • Designers, you’re job is not done till it ships.
        • Go the distance by stripping out frames of a GIF animation to reduce file size
        • Put your site through a WebPageTest
        • Performance is everyone’s job, not just developers.

Refresh Austin: Getting Paid What You’re Worth in Business Development

CSS Dev Conf 2014 Parade

In a Getting Paid What You’re Worth panel at Refresh Austin in November 2014, Adam McCombs, Tim Hamilton, and Anthony Armendariz shared how to discuss negotiating, choosing the right rate, and crafting retainer agreements. Here are my notes from their panel:

  • How would you define “business development”? 
    • Business development is growing existing business.
    • Internal business development that your products you can create to sell, giveaway
    • External business development is work from new clients.
    • Business developments is about meaning mindful of client relationships
    • Business development is attracting new clients. 
      • Most of business development comes from the work and personalities of your designers and developers
  • What’s your current strategy? 
    • Take a look at your known network, i.e. the number of people have you emailed in the last 5 years, and turn those connections into seedlings and see if they grow into opportunities.
    • If we’re going to be successful on Google, you have to be focused, niched. 
      • We focused on “Drupal” because our target customer
        knows that term.
      • It’s limiting if you want to work on other projects,
        technologies beyond a “Drupal”, for example.
    • Referrals are the biggest ways to find new work. 
      • Finding, meeting other agency owners to find new or
        overflow work.
    • We depend on others to refer new clients to us. 
      • If their clients don’t fit them–too big, too small–they
      • We spend a lot of money on coffee, beers–we don’t spend
        money on marketing.
    • Work well with the clients and employees that you have
      because they help bring in new business.
      • Follow through on referrals you are given.
  • Should you separate client manager, client executive from the
    person in charge of getting new business?
    • What we do is trial by error 
      • It’s hard for me to give up that role to someone else
        since I’ve done it for so long.
    • Yes, and you should find a partner outside of my industry that’s not rooted
      in the tech industry.
      • Establishing a connection outside of the tech is hard.
    • Project managers, product developers are more like
      farmers, introverts.
      • Sales lead developers are more like hunters.
  • How do you weed out inquiries? 
    • Grammar and punctuation is important in client communication. 
      • Are they not emailing from a account?
      • Mostly it’s finding people, clients that you can relate with and be honest with
      • They don’t have to laugh at your jokes, but know it’s a long term relationship. They have to find you funny at some level.
    • You have a limited time to generate new revenue, so make that time most effective 
      • I’ve passed on work that’s been great for another agency.
      • And I’ve worked hard to get work that didn’t pan out.
    • We use core values: 
      • We do a project together with a client 
        • If client is not willing to go into tradeoff discussions when discussing scope creep, it’s probably best to end relationship.
        • Core purpose:
          1. Find work that pushes us beyond our current skillset.
          2. Potential to provide the client wonderment
        • If we don’t get to one of those two things from a potential project, then we won’t take the client.
      • When people work with us charge a fixed monthly fee and work agile 
        • We work on a retainer
        • We work on projects that do good for human beings
  • How do you get paid what your worth? 
    • If a client’s decision to work with us comes down to money then I have failed. 
      • We are don’t judged against offshore team
      • We are judged on our full solution capabilities 
        • We charge a flat rate
    • Continue to raise your rate till no one will pay you anymore.
    • Look at pricing calculator 
      • Your value is whatever it’s worth to pay it.
      • Price your rates to the market you are going after.
    • We started from 2 people to 10 in a year, so we had to figure out what company to be early on. 
      • We wanted to be a lifestyle company
      • In order to do that, we have to be flexible with our pricing structure
      • We shoot for 50% profit margin
      • We keep that cash on hand so that we can be picky about clients.
      • With money comes stress.
      • Never appear as a dollar sign to a client.
      • We don’t want to be thought of in terms as an hourly rate.
      • We aim for engagements that our 6–12 months and longer
  • How do you convince a client to work with you? 
    • Usually within 30 minutes of showing our work and apps, that usually helps lead to a deeper discussion.
    • A lot of it dependability. 
      • Who will they call when there are problems?
      • Support part of business is often overlooked
    • We are going to meet our customers’ expectations 
      • Then you are going to meet their desires
      • Then meet their unrecognized needs
      • Ask your clients able visualize the success of their project?
    • We position ourselves as a partner rather than an agency 
      • Agencies are still doing waterfall process
      • Once we think we can fit with the client, we do a three month trial to see if it will work.
  • What would happen if we published our rates on our web site? 
    • Probably nothing.
      • Put a lot of work into that thing, but clients don’t look at your web site.
      • Rates would collectively go down.
    • One of the approach as an agency or as a freelancer is to show little as possible. 
      • Get clients to have a conversation with you, get the facetime.
      • If you do show everything on your site, you get based on a client’s gut reaction to your site and not you or your team.
      • They will then hold what you say against what is written on your site rather than listening to what you have to say about their project.
  • What are the top issues your agency struggles with? 
    • Business development
    • Finding the right talent
    • How are we get our revenue to grow
    • Creating a rainy day fund
    • Finding office space, keeping overhead low