What your boss is doing today

I was having lunch with a client and fellow small business owner several weeks ago. We were talking about the age old issue of starting a business to do what you love then spending all of your time managing the business instead of doing what you love (unless you are lucky like me and love to manage your business). This is the same thing that happens when a great employee is promoted to management—they are no longer a great designer, they are a person who manages designers.

We were talking about how the people that we work with don’t really know what we do all day. I confess when I worked for a small company I didn’t realize everything my boss was doing all day. There is also a perception that we are messing around all day, goofing off on Facebook, chatting on the phone, etc while our coworkers are doing the “real work”. In my case the “real work” of my business is designing the mobile app, web app or corporate tool or being the person that gets to develop them.

So, what is your boss doing today while you are doing the “real work”?

She or he is worrying. We are worrying about you having food on your table. We are worrying about food on our own table. We are worrying about delivering on current projects and securing new ones. We are talking to people we may not want to talk to, we are getting dressed up and driving all over the valley to back to back meetings. We are promoting our business through social media. We are wistfully remembering that we wanted this business because we loved what we did and wanted to do it all the time.

If your boss is very lucky — every once in a while she or he gets to join you and do the “real work”.

Please take a moment to thank your boss for creating the security for you to be able to do what you love to do all day. Don’t wonder why you are the one doing all the “real work” while your boss runs around doing other things that you don’t see the immediate value in. Pay close attention and if you have the spirit to be an entrepreneur, learn all that you can because someday you’ll be the one on the phone, running around, spending more time than you want to on Facebook and sneaking in a few minutes to actually design.

This work includes the photo “Green Pastures and Blue Skies,” available under a Creative Commons Attribution license, © katmeresin.

To Give Anything Less than Your Best is to Sacrifice Your Gift

Photo Source

This is so true. Whether you consider your gift the opportunity to run your own business or the talent you were born with and then grew over a lifetime.

It’s great to be positioned in such a way to only give our best. It’s why we are careful about the projects we take on and why we price ourselves the way we do. We can’t give our best if we’re overtaxed and we can’t give our best if we can’t make ends meet. We’ve also found that we can’t give our best if we aren’t taking time to go to yoga and hit the gym.

Are there any changes you need to make to ensure you are giving your best and not sacrificing your gift?

Mobile + Tablet Device Test Kit

Have I mentioned my mother is an industrial seamstress? Let me tell you, it’s an awesome skill set to have in the family.

She just finished this bag for us to take our heap of mobile devices in to client meetings. Some highlights:

• Reenforced exterior protects all the cargo.
• Individual device sleeves in contrasting color.
• A sticker on the back of each device calling it out as a test device and a matching card in the device sleeve — that way everything gets back where it should go and we know what is out at a glance.
• Clear pockets lets you see each device.
• Each pouch comes out separately and then velcros to the spine like the pages to a book. This lets us change the configuration.
• Most of our devices are shown in this photo, there are two missing right now, but we have:
• iPad 1
• iPad 2
• iPad 3
• iPhone 3G
• iPhone 4
• iPhone 4S
• Galaxy Tab 10.1
• Acer Iconia A100
• Nexus One
• Droid X
• [we are looking for another Anroid mobile running Ice Cream Sandwich]
• There is a black bag without a window for all the various cords and cleaning cloths.
• We also made up and laminated a sheet we can walk through with clients to get them familiar with some device concepts at the beginning of a meeting. You can download it here.

All in all, it’s super awesome and we can’t wait to show it off this week. We are building more and more responsive sites and mobile apps — these are projects that work with the same base code across a myriad of devices—and this is a great way to review them with clients on various environments.

Thanks Mom!  

Social Media Tool Recommendations

We were recently received this email:

I’m evaluating a bunch of tools to help us manage our social media message/campaigns/presence.  I’m down to using desk.com and/or HubSpot but neither of them feel comprehensive or quite right.

I’m wondering if you could just rattle off the top of your heads the top 10 tools or so you’ve used so that I can broaden my horizon.

Thanks guys, hope all is well.  From what I hear business at Sawaya Consulting is keeping you plenty busy.

We used to focus more extensively on social media a few years ago, but honestly beyond some of the basics we’re leaving that up to the marketing people. We’re focusing mostly on responsive design and mobile work now.

That said, we do still still present our social media workshop and have recently revised our own social media strategy. So we do  have a decent base to give some recommendations.

#1 – Hootsuite

This is *THE* program we recommend using. We use it religiously after trying and tossing a bunch of others, these are the features I like:

• Ability to manage a slew of accounts (multiple twitter feeds [ours + clients], Facebook pages, LinkedIn Accounts, Blog posts, all of it) from one interface.
• You can easily read twitter conversations.
• With multiple team members you can see who responded — or assign items for them to work on.
• You can schedule posts (so you don’t send out a long block of tweets). You can view this schedule as a calendar.
• You can set up searches to watch for tweets that match.

Setting up searches has been a huge help for us in the past. When our partnership with the other founders of our first startup crashed and burned we had no clients, no projects and no money. One of the things we did to scrap our business back together was to create a search for anyone within 50 miles that used the phrase “looking for” (we also watched for geolocated ‘web design’, ‘web developer’, etc, but the ‘looking for’ story is more interesting). We read through this stream a couple times a day, and yeah, it was full of “looking for a babysitter” and “looking for my lost dog” but then we hit pay dirt when someone was “looking for a web designer for an iPad app”. We reached out to that person and it’s turned into a friendship and a bunch of work — and a big project when we needed it most.

Hootsuite has some analytics, I’ve not done much with them, so I don’t know how good they are. They’ve seemed clunky when I’ve looked at them, but I haven’t had reason to really dig into them.

#2 – WordPress

For blog posts, it’s easier to manage from there than Hootsuite.

#3 – Cross the streams

This isn’t a tool, just a practice. We try to cross post things where it makes sense. Like our blog posts to LinkedIn.

Hootsuite doesn’t do a great job of posting blog posts to Facebook on a schedule. The WordPress plugins we’ve tried don’t do a great job posting to Facebook, but they are ok.

I put this more in to remind you to look at your strategy of what posts where and how it trickles down.

And Also

Those are my solid recommendations. I would also look at:

• Twilert – we use this a little bit, you can set an email alert for when someone says something you are watching — similar to the stream searches in Hootsuite, but works better if you aren’t actively checking.
• Buffer – we don’t use this because we schedule tweets in Hootsuite, but we wish other people would use this. Load up what you want to say and this will send it out in intervals.
• Social Mention – it’s social analytics, we started to get into it with a client but then the project changed course.
• Google Analytics – I have heard they are doing more social analytics.

And one final piece of advice. I saw that on your twitter feed you respond to a lot of people — which is awesome to get your engagement up. However if people aren’t mutually following you and the person you respond to they won’t see those tweets. You may want to preface them with a period “.@sawayaconsult have you looked at…” so that everyone sees them if they contain valuable information for other people to see as well.

This work includes the photo “Soviet printed stationery 1962,” available under a Creative Commons Attribution license, © sludgegulper.

Responsive Design Links + Pixel Density vs Pixel Dimensions

This Focus Topic: Responsive Design post centers on some links we found helpful and a test we did to wrap our head around resolutions for desktop screens, iPhones and iPads.

Responsive Design theory links:

• A Better Photoshop Grid for Responsive Design
• Responsive Images: How they Almost Worked and What We Need
• Improve Responsive Designs & Re-Use Images With CSS3′s Background-Size Property
• Inspiration: Fluid & Responsive Design
• Responsive Web Design, Most Complete Guide
• Multi-Device Layout Patterns
• Device-Agnostic Approach To Responsive Web Design
• Deciding what Responsive Breakpoints to use

Testing out resolution — what does it all mean?

Now, before anyone gets up in arms with my examples, please understand that we are designing and developing in a device-agnostic way and are basing our media queries on size mostly (with a consideration for the switch between tablet and desktop, i.e. finger tip input and mouse input).

If I’m wrong about anything I’ve said here, please [politely] let me know in the comments or via another contact method. This stuff is new to me, and it’s actually new to everyone, so we’re all figuring it out.

I was asking questions like:

Can you create higher resolution images on the web so they look better in a retina iPhone or a retina iPad?

The short answer is yes, you can. The long answer gets more complex.

This is something you want to be careful with — using media queries and fancy code to choose which image to display so you aren’t bogging down standard smartphones and desktop screens with HUGE IMAGES.

First off, let’s set down some concepts and numbers:

• There is a difference between dimension — which is measured in pixels — and density which is measured in pixels per inch (ppi).
• You have to combine these two numbers to hit the target output of an image.
• I use Photoshop to work up app / web designs — so if I start with a 2048 x 1536 at 264 ppi Photoshop file I can faithfully use this to create retina iPad apps.
• If I am doing non-retina apps I cut the file in half – both in dimension and ppi to be 1024 x 768 at 132 ppi.
• If I have the same thing going to a webpage I can change the ppi in Photoshop which will refigure my dimensions to be 559 x 419 at 72 ppi
• There is more to know about scaling between sizes, that is for another time though. You can start with this article.
• Some baselines are:

* DPI is dots per inch, and old print term.

You can see a whole bunch more pixel density numbers here ›

iOS Cheat Sheet measurements are here ›

One reason the new devices are a higher density is because you hold them closer to your face, so they need to be cleaner. A billboard resolution when viewed from the same distance as a magazine won’t hold up. Standing as close to your TV as you do to your phone just won’t work for resolutions.

The thing we are actually trying to learn:

Devices with a higher density mash more pixels into an inch. 

So you can’t actually have a PNG file that is 500 px by 500 px at 72 dpi and another one that is 500 px by 500 px at 264 dpi. It just doesn’t work that way. For one thing, you can spool out those images — but when you open them back up in Photoshop you’ll just have several 500 px by 500 px images that are all 72 dpi. I know this because I tried. Maybe it’s the way Photoshop handles it, maybe it’s that PNGs are always 72 dpi, I’m not clear on the reason.

But when you go back to the fact that a higher DENSITY means that more pixels are mashed into a smaller space you want your images to be:

• 72 dpi = 500 px by 500 px
• 132 ppi = 917 px by 917 px
• 264 ppi = 1833 px by 1833 px

How did I figure out the dimensions? Easy, I just changed the ppi setting in Photoshop and let it handle the dimensions.

Then I dropped the three images onto an HTML page, but then instead of letting the images be three different sizes I made them all 500 px by 500 px and this is what you get:

http://www.sawayaconsulting.com/resolutiontest/

On a computer screen you won’t see the difference, on an iPhone you can start to see it. On a new retina iPad you can see it more.

Conclusion

There are so many concepts to understand when building responsive design. How you want to structure you content breaks. How you want them to flow and where the cut off pieces live. What kind of anomalies are you going to encounter in a the normal course of web design – Safari, Firefox, IE – and what added complexity do you get with Safari Mobile and Android.

This article confuses the lines a bit between straight up responsive, device agnostic design and mobile resolutions. This is something that will make more sense in future posts, but this is a good basis to get a few things understood.

This work includes the photo “Pixel-Spatz,” available under a Creative Commons Attribution license, © _Tasmo.