SAWAYA Consulting

Staying Up To Date with Technology

amber — Tue, 15 May 2012 12:47:56 +0000

The other day we met someone who asked us, “how do you guys keep up to date on all the new technology?”

Well, we pick and choose. While we do read through all sorts of tech news — and we have a lot of techy friends so the conversations usually revolve around what is going on in that realm. It comes down to picking and choosing.

Luckily focusing on a few things at a time gives us a general knowledge of many things — and specific expertise on a handful of others.

Right now we are focusing on:

This work includes the photo “Sad Cartoon versus Technology,” (although he looks more inquisitive than sad to me) available under a Creative Commons Attribution license, © Sean Loyless.

Work Less to Get More Done

amber — Tue, 08 May 2012 13:50:20 +0000

I read an interesting article about how Woody Allen works the other day. This was my favorite part:

4. Productivity. To put out a movie every year or so, plus plays, magazine stories, books. you would think Woody Allen works around the clock. From a 1980 interview, “If you work only three to five hours a day you become very productive. It’s the steadiness of it that counts. Getting to the typewriter every day is what makes productivity.”

That is how we have structured our days. We don’t work 80 hour weeks, but we sprint every time we sit down to our work, great focus and great productivity ensue.

This work includes the photo “The Time,” available under a Creative Commons Attribution license, © bingham_becky.

How to Open a Work Ticket so it Actually Gets Closed

amber — Tue, 01 May 2012 13:19:43 +0000

So you have a bug or task you need to report to a ticket tracking system. How can you put it together in a way that the developer can actually address it and get the problem solved and the ticket closed?

First off, make sure you are reporting an actual problem. Sometimes there is a difference between what you think should happen and what someone else thinks should happen. You’ve probably seen the tire swing cartoon .

Usually a quick email or conversation can clear this up, don’t open bugs that say things like, “The color on the homepage is green.” Yes, it’s supposed to be green according to someone else. Why open a ticket to state a fact?

Secondly, a bug assumes you can reproduce and explain the problem and the steps taken to create the problem. If something happens once, it’s not a bug, it’s an anomaly. If you can explain the steps taken to get it to happen again, then you should do so. Describe all the steps from the beginning to where you encounter the bug and what the bug looks like. And then make sure you can reproduce it again.

Third, once you can reproduce the bug make sure and take a screen shot or two. A picture is worth a thousand words so help everyone out and show us what you are seeing.

Forth, report your environment. When you take your car in to a mechanic and you explain a problem—the mechanic has a great advantage over a developer—they are working in your actual environment (a 2010 Honda Civic for example). You need to tell your developer which environment you are using. Is it a computer or a tablet? Mac or PC? Firefox or Safari? OS 10.7.3 or 10.5? Here is a handy tool for getting all of that information together in one shot: http://systemandbrowser.com/

Once the bug is closed or reassigned to you to close take a minute to walk through the reproduction again and make sure it’s fixed in a way you think it should be fixed. If it isn’t, comment on it explaining what you are expecting and reassign it. If appropriate follow up with a thank you – either as a comment when you close the bug or when you see the developer.

To Recap:

Report problems only.
Make sure you can document how to reproduce the bug.
Provide screenshots.
Report your environment.
Check it over and say thanks.

Go forth and squash some bugs!

What your boss is doing today

amber — Tue, 24 Apr 2012 12:55:13 +0000

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

amber — Fri, 20 Apr 2012 12:42:26 +0000

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

amber — Sun, 15 Apr 2012 21:23:14 +0000

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

amber — Tue, 10 Apr 2012 13:27:09 +0000

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.

I can also recommend some people to help you out if you are looking to outsource.

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

amber — Tue, 03 Apr 2012 16:25:50 +0000

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:

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:

Device	Pixel Density
desktop/laptop/normal computer screen	72 dpi*
standard iPhone	136 ppi
retina iPhone	362 ppi
standard iPad	132 ppi
retina iPad	264 ppi
Galaxy Tab 10.1	149 ppi
Droid X	228 ppi

* 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.

iOS App Design Cheat Sheet

amber — Fri, 30 Mar 2012 12:55:21 +0000

This is one of those articles that is much for my toolbox as to be helpful for others.

iPhone size: 480 x 320 at 163 ppi
iPhone retina size: 960 by 640 at 326 ppi
iPad size: 1024 x 768 at 132 ppi
iPad retina size: 2048 x 1536 at 264 ppi

Saving files:

<@2x for retina / nothing for standard>.

imagename~iphone.png
imagename@2x~iphone.png
imagename~ipad.png
imagename@2x~ipad.png

Remember to use “nearest neighbor” as the resample setting in Photoshop.

Categories & Tags in Blogs

amber — Tue, 27 Mar 2012 15:03:03 +0000

We often disucss with clients the difference between Categories and Tags in a blog post. Here is a handy reference.