How to Open a Work Ticket so it Actually Gets Closed

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!

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.

iOS App Design Cheat Sheet

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:

<imagename><@2x for retina / nothing for standard><device_modifier>.<file extension>

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

This work includes the photo “Measuring time,” available under a Creative Commons Attribution license, © aussiegall.

Categories & Tags in Blogs

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

Categories

You will want to set a handful of main categories on your blog, then make sure you always mark a blog post with one of those categories. Generally when you first set up your blog you can make a decision on what your categories are going to be and set them then. We haven’t added a new category in over 3 years.

You can see on our blog we use these categories:

• Our Friends
• Our Work
• Random Thoughts
• Tutorial / Download
• What We Are Up To

Tags

Tags are similar to categories but are more granular, related to the article you are writing. You will want to add keywords as tags to your article.
In the Your Online Presence: Your Social Media Strategy post we wrote you can see we used the following tags:

Carrera & Company, Facebook, LinkedIn, Social Media Strategy, Twitter, WordPress, Your Online Presence

Tags are automatically created as links and anytime you use the same tag it will connect those blog articles.

These are some tags we use often:

• Your Online Presence
• Mobile Design & Development
• Design Critique

These are some we have only used once or twice:

• Many Sweaters
• she can spell Hors d’oeuvres without looking it up
• These Boots Were Made for Walking
• super funny group of engineers

Photo Credit: http://www.flickr.com/photos/blueace/389045328/in/photostream/