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 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: DaveRupert.com, 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 DaveRupert.com
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
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.
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
refer.
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 gmail.com 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:
Find work that pushes us beyond our current skillset.
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?
