On March 10th, I had the pleasure of speaking about responsive web design to members of the Literary Press Group of Canada, a professional membership of independent publishers.
Covering tips and tricks for WordPress, web performance, navigation, HTML tables, and more, the main framework was about retrofit an existing, fixed-width web site.
For some organizations and companies, starting over does not make financially sense. Whereas responsively retrofitting is both a time and cost effective solution to get sites looking better on mobile devices until a time when starting fresh is possible.
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
HTML makes the smallest
24kb file size
Media queries: 2.4kb
Vendor prefixes: 1.4kb
41.2kb file size
Open sans: 31kb
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:
Start Render (3G)
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.
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
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
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
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.
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?
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?
In their A New Toolbox: Secrets from Happy Cog presentation at Texas State University, presenters Kevin Sharon, Design Director at Happy Cog, and Sophie Shepherd, Designer at Happy Cog, reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way.
When kicking off a new web site project, talk to stake holders and the people at the front desk. They know where the weaknesses are in the company’s forward facing presence because they hear them every day from the customers calling in with questions.
Talk with client contact or liaison before kickoff meeting to get a feel for project and political landscape. This approach avoids walking into traps and reduces the chances of messing up the start of project.
Use survey tool like Ethnio to get site design feedback and generate leads for user testing later on.
Design involves a Character, Conflict, and a Resolution. The Character is the site users illustrated in a user profile. The Conflict is the problem with site or business. And the Resolution is the design solution you work with the client for the Character.
Give client 30 celebrity mugshots with goal to pick which ones fit business’s brand. Then use Style Tiles based on each celebrity.
Learn clients’ internal language and help them learn your design language.
No more wireframes. Build prototypes instead, but call them “HTML Wireframes” to avoid confusion that is how the site will look.
Tools to make quick HTML wireframes: Codepen for elemental pieces, grid systems, and roll your own for more customization
If you can’t click through it, it’s not a prototype. Prototypes are for user testing.
A sign of a good designer is that they do a lot of paper sketching as this is the quickest way to get the best idea.
Turn HTML wireframes into design modules.
Don’t just brush up an approved wireframe with type and be done. Go the extra step and design within that space.
Keynote resizes grouped elements in a way that Photoshop can’t, which makes it ideal for creating responsive design modules or element collages.
Involve developers’ input into the design process as they make a lot of decisions in the building responsive web sites.
Selling a design continues after you get the project. You have to get clients engaged, so don’t show design comps or other elements of the design process like you are showing an apartment.
Always have a reason for your design and each part of your process. Finding your reasons start with research.
Practice your writing skills to improve client communication as everyone on a team gets a direct channel to the client.
Realize that a good writer is someone who can organize their thoughts.
Add a small touch of humor when writing to clients. For example, tell them in passing on a deliverible, it’s National Margarita Day today. (Only works on February 22nd.)
Two things a designer has to get used is taking public criticism and realizing that clients will change a design after it’s handed over.
It’s not Responsive Web Design, it’s web design.
Every client needs to have a project manager to work with an agency. Projects that didn’t have a client liasion haven’t gone well.
Even if the client liaison or project manager is part-time, temporary employee for the client, it benefits the project as you need someone to filter email messages, be mindful of political landscape, work on deliveribles, etc.
Take sketches of HTML collages, scan them, and use them to compose different layouts that are then giving to client/design review
For this session, I dove into my research of the Web Form Elements to analyze which CSS properties and form elements are poorly supported in browsers.
I looked at each of the Web form elements to see if CSS property was supported on the form element–assigning it a value of Y for yes, N for no, S for somewhat and N/A for the CSS properties that didn’t apply.
You can look at the start of this reseach in the lookup tables for Appendix D of the CSS Cookbook. It’s available as a free download from the O’Reilly Web site.
To see which form elements and CSS properties did well, you can look into the presentation itself from my SlideShare account (see pages 33 and 37) or you skip down this blog post to read the lists.
In talking with one of the Mikes at the Dayton Web Standards Meetup about what topics people would like to hear at an upcoming meeting, I shot off an email half-thinking, “well, I would like a talk on HTML5 and CSS3.”
I’m not exactly sure what his response was, but at the next meetup I was standing in front of about twenty people wanting to hear what I found out about HTML5.
That Mike sure is a sly one. Well, one of them, at least.
To be honest, I wasn’t too thrilled about the prospect of HTML5. I’m a little weary of anything still in the larval stage of Web development after getting bitten badly by the poor Netscape Navigator 4 betas.
But, as I dove into a little bit of HTML5 and what bleeding edge browsers that support the unfinsihed spec. Below are my slides from the presentation that can help other people who were as clueless as I was about HTML5.