This article is an encapsulation of my life – and more importantly my career… or rather – my lack of one.
Stop working so hard — I.M.H.O. — Medium.
i can racapping shit. read it. you might just see yourself in it too… at least a little.
Updates from greg Toggle Comment Threads | Keyboard Shortcuts
-
greg
-
greg
The dangers of cross-browser testing with IE9′s Browser Modes
It’s 2013; we’ve come a long way. But there are no jetpacks yet, and we still have to test websites in older versions of Internet Explorer. While many of you probably haven’t had to open IE6 in a while, IE7 and IE8 are still with us. At Typekit, we still test our web fonts in all three (along with all the other major browsers), but today we wanted to discuss a potential testing pitfall that some of our customers encounter.
MORE @ The dangers of cross-browser testing with IE9′s Browser Modes | The Typekit Blog.
uh oh….
-
greg
the headphones rule
no headphones, you can talk to me.
1 headphone, you can talk to me if i like.
2 headphones, do not talk to me.
via the headphones rule.
-
greg
Placeit by Breezi Lets You Showcase Prototypes In Realistic Environments
Placeit by Breezi – Elegant And Modern Screenshots, Though A Little Apple-heavy
Placeit by Breezi is a web app that can be used absolutely free and without the requirement of any type of registration. 16 different professional photo environments can be chosen to present your next big (web) app project. After having chosen the appropriate environment you drag and drop the screenshot to be visualized into it. Placeit cares for fitting it correctly into the photo. Proportion and perspective is automatically adjusted.
Placeit’s photos show a wide variety of Apple devices from different angles and in different environments, such as iPhones, iPads, Macbooks and iMacs. Mobile devices are additionally shown in action, in the hands of their users. Each photo is equipped with a recommendation as to how large the minimum screenshot size should be. My own recommendation is to just use the largest possible screenshot. If you like to have the most authentic effect just stick to the recommended resolutions.
Check out Placeit by Breezi
-
greg
Conditionizr for jQuery – Conditional Loader For Scripts And Styles – noupe
I use modernizr on most of the scratch site builds and this will be used right along with it going forwards…
Conditionizr – Perfect Supplement To Modernizr
First things first – Conditionizr does not intend to replace Modernizr, nor would it be able to. Instead is has been developed as the perfect supplement, so that both solutions work best when used cooperatively. Conditionizr is based on the same classes approach Modernizr is, thus making integration seamless.
Through the use of javascript-based feature detection, Conditionizr is not only able to determine which browsers are in use on the client-side but also which OS they are running on and whether the device driving it is retina-capable or not. According to the found possibilities Conditionizr adds corresponding classes to the HTML elements and cares for necessary CSS and JavaScript to optimally support the findings.
Instead of adding the conditions to the markup, Conditionizr works completely markup-free. All you have to do is call the script right after jQuery and Modernizr (if you want to take advantage of that) and add a configuration part to the head of your document. All supported browsers can be configured to how far the influence of Conditionizr shall go. You can choose to en- or disable the use of specific classes, styles and scripts separately. In the same way you can define whether Conditionizr shall take care of OS and retina detection.
Conditionizr for jQuery – Conditional Loader For Scripts And Styles.
-
greg
10 Mobile Web Design Best Practices
Go to full site – the mobile website escape
Always include a link to the full site for your users. No matter how good your design, some people just want the experience they’re used to. The only thing that likes change is a wet baby.
Keep headings shorter than short
Headings that wrap over more than 2 lines push your content down the page and often out of frame for users. Keep them short, focused and descriptive without telling the whole story.
Use placeholder text on small, common form inputs
On small forms where context is obvious, use placeholder text instead of labels (eg. login forms, search boxes or address forms).
Place labels above form inputs
When you use labels they should be placed above form elements. Using top-aligned labels makes sure that if the mobile browser zooms in on the input, the user doesn’t lose the context of the input.
Pop-ups suck on mobile
Window management on mobile still sucks. YouTube, Maps, anything that opens native applications takes the user outside the website’s flow and out of context. Do your best to integrate these elements on the page so that users can stay with the website they’re viewing.
Save time with font-based icons
We (heart image) icons! They spice up your designs. To avoid managing a sprite sheet with both retina assets and smaller icons, opt for a font-based icon set like: Font Awesome; glyphish; iconsweets; or symbolset. Or, make your own. Here’s how.
Give your mobile website a mobile-first makeover
Going mobile is about more than just squeezing an existing website into a one-column format. Examine your analytics and your user feedback. Tackle the opportunity to re-imagine your website for mobile and to focus on the important elements. Reorganize content so that it makes sense to the user. Drop extra content blocks. Move elements up or down the page. Add new elements for mobile devices. It’s your site to make amazing.
Make your default font size at least 14 px
Even if that seems really big, it’s the right thing to do. The only time to go smaller (and just to a minimum of 12 px) is on very precise labels for forms.
Respect the fat fingers and tipsy taps of your users
None of us are as dexterous as we’d like to be on our mobile devices. We can all have a touch of “fat fingers” symptoms. So design your actions accordingly. Make the touch targets big. We recommend 40px by 40px.
Give targets lots of margin too. We recommend at least 10px margins around the targets. Primary actions should always be big and tappable.
Embrace the wild and wonderful world of device APIs
When making a desktop site mobile we sometimes forget that smartphones and other mobile devices access user location, can make phone calls, take pictures and much more. Don’t confine your creativity to what’s on your desktop site.
via 10 Mobile Web Design Best Practices | Get Elastic Ecommerce Blog.
-
greg
How to Add an App to your Facebook Page by using your APP_ID
Creating an app or selecting an already existing one is easy, but then I spend a few hours figuring out how to add it as a tab. Especially since it won’t show up in FB search so how do you actually achieve that?! For those of us trying to find documentation on Facebook Developers or on Facebook Help, you wont find out how to add your application. Or anyone else’s to your page.
There is one requirement to be able to do so, and that’s to know your APP_ID. You don’t have to be technical, anyone can do this! You just have to know what your APP_ID is before you are able to do so. (it does require you being a Facebook App developer or knowing one who’s an admin for that app)
How to locate your APP_ID:
- Navigate to this link https://developers.facebook.com/apps
- Summary –> App ID/API Key It should look something like this “125458965878548″
- Copy it
How to add an app to your page:
Use the URI below, replacing “APP_ID” with the ID of the app you want to add.
http://www.facebook.com/add.php?api_key=APP_ID&pages=1
Then simply select the page you want to add the App to, and you should be able to navigate to it easily!
-
greg
Google Analytics Individual Qualification test?
Obergine posted an interesting article recently about how best to go about preparing for and taking the Google Analytics certification exam. What caught my eye were the sites (in bold below) they cited – and how they might help us level up on Google Analytics.
from the article…
Conversion academy website: A great site to help you learn the basics of Google Analytics. The audio lessons run quite fast so pause according to your speed. It’s also a good idea to keep Google Analytics account open to practice whilst being taught.
Unfortunately this doesn’t include all the detail you’ll need to pass the exam but it’s a good place to start.
Google Analytics help centre: I found the Google help centre had more information than the Conversion Academy website. Also if you are visual learner like me, audio lessons can sometimes be harder to digest; therefore reading from the site made it easier for me to recall information and enabled me to make notes at my own speed.Google Analytics test website: Even though it is not recognised as an official study source for the exam, this website is one of the most useful practice tools for the Google Analytics Individual Certificate. It has some excellent content and most importantly the website can help you get used to the layout of the actual exam. Each question and answer is explained in detail here. However don’t hold your breath on having the same questions come up in the actual exam!
via How to pass Google Analytics Individual Qualification test?.
-
greg
The problem is as old as forms on the web are. The longer the form, the bigger the problem, potentially. The problem I’m talking about is one you have encountered more than once in your digital lifetime. It uses to occur only after filling out the most complex forms or while you are in a hurry and just wanted to submit this order you promised your wife to place today. There it is. Submission fails, the browser tab closes accidentally, for some reason you press F5 or whatever monkey business you achieve to perform. Result: the form is empty again, you are back to zero. The plugins for jQuery we have for you today, promise to avoid running into a situation like this ever again.
Garlic.js and Sisyphus.js: Save The Content Of Your Form To LocalStorage
If you run an ecommerce site you are aware of the problem. If potential customers have to fill in forms over and over again they will more likely than not lose their desire to buy. In other words: They will leave their shopping carts right in the middle of your warehouse and head for the door.
This effect is not limited to shoppers, of course. Every net citizen will have encountered the effect of having to fill in this large form yet again, I know I had to dozens of times. It is not always due to the disability of your fingers. Web designers have their fair share too.
Garlic.js and Sisyphus.js, two relatively fresh plugins for jQuery promise to be the solution. While Sisyphus.js is the older and more mature project, Garlic.js sees a lot of attention these days, as it is brand-new and backed by an ambitious developer open to suggestions and discussions in general.
via Garlic.Js and Sisyphus.Js: These jQuery Plugins Store Form Values With HTML5 LocalStorage – noupe.
-
greg
-
greg
IE10: How does it really stack up?
Most browser benchmarks, such as SunSpider, the V8 benchmark suite, and so on, focus on important but narrow low-level functionality, such as mathematical calculation speed. Our benchmark is not directly comparable to these other benchmarks, as we’re attempting to measure user-visible speed of an entire graphical application. We are measuring a much wider variety of performance characteristics to answer questions such as:
- How quickly does the canvas API execute?
- How does the browser perform when we are rapidly changing the size of canvases?
- How quickly can major number-crunching happen on a complex data set in Javascript?
- How quickly can a very complex DOM including tens of thousands of elements be laid out and rendered?
- How quickly can we reorder, re-Z-index, re-style, render to, and move around thousands of elements in the DOM?
While Chrome is still the fastest browser in the test – some of the results may surprise some. However, there were many instances where IE10′s speed times came at the expense of frame-rendering, etc.
Its probably something you need to read … IE10: How does it really stack up? – Lucidchart.
-
greg
Pinterest Introduces Business Accounts and Tools
Companies will now be able to create business accounts, which allows them to enter just a business name — rather than a first and last — and verify their websites using a hidden line of code. Once the code has been recognized, businesses will receive a verification badge on their Pinterest profile pages. It’s not quite as good as Twitter’s profile verification — it would still be easy for someone to impersonate a company on Pinterest by verifying a URL that was similar but not owned by the brand — but it’s a start.
Companies that already have a personal account on Pinterest will be able to convert it to a business account.
-
greg
Wieden+Kennedy » Why We’re Not Hiring Creative Technologists
By Igor Clark, Creative Technology Director
I’ve pretty much had it with the term “Creative Technology”. I’m a “Creative Technology Director” myself, and even I’m over it: already it seems clichéd at best, and at worst, bordering on the meaningless. Here’s why.
Not so long ago, the rise and rise of “digital” meant agencies having to come up with increasing amounts of interactive work. They didn’t know how to do it, so their developers got screwed, and the work suffered. Horribly.
Few outside the tech teams grasped what was involved in building the software needed for digital campaigns. Crazy deadlines, unrealistic expectations, ill-considered and even ill-advised requirements led to ever-more “inventive” technical solutions. Then, when the last-minute hack they had to cobble together failed to stand up to the traffic they never promised it would, developers were cursed and vilified.
But this wasn’t the really bad part. Software folk who found their way into agency-land either loved it, and stayed – or they didn’t, and left. For the ones who stuck around, and who felt the pain most acutely, the really bad part wasn’t the pressure or the deadlines: it was that their work wasn’t understood, so it wasn’t properly recognized.
Their work wasn’t purely science or technology; though grounded in both, it was far from the simple application of formulae or solving of equations. Developers knew that you couldn’t take a creative brief as a set of instructions and just “translate” it into software. You have to interpret it, and that takes an extra spark. A creative spark. They saw this was a fundamental part of the overall interactive creative process, and yet a parallel, creative process of its own. The naming perpetuated the misunderstanding, and so it had to change.
At the same time, people across agencies were recognizing that their existing creative model just wasn’t working out for “interactive”. Crews outside the fortress walls were doing innovative and engaging work, not only through using new and different technologies to do it (openFrameworks, Processing, robots and Arduino, computer vision & Kinect, projection mapping, the list goes on), but also by trying out different approaches and processes. Namely: the technology was the creative.
read the rest @ Wieden+Kennedy » Why We’re Not Hiring Creative Technologists. (not that anyone @ [redacted] will care)
-
greg
challenge: send this to leadership.
-
-
greg
-
greg
-
greg
The Unwritten Rules of a Great Design Critique
**not that anyone reads these articles…
For the most part, web designers work in teams or at least collaborate with other designers and/or developers. This means that at some point in your career you will be involved in many design critiques — some formal and some informal. Sometimes you’ll be the target and at other times you’ll be the one aiming so it’s vital to know how to handle, react and properly conduct yourself during these collaborative sessions.
Design critiques are awesome and they are a huge, gigantic educational opportunity for you, no matter what side of the fence you’re on. If held properly they are very good opportunities to collaborate and learn from other designers and developers. Some firms or companies have very specific guidelines and goals to follow during design critiques but what are the general unwritten rules of a great design critique?
We’ll talk about each one in more detail, but first let’s set the table. Here are ten unwritten (until now) rules you should keep in mind for your next design critique. They are written generally and should be applied to both sides of the equation.
- It’s Not About You
- Maintain Respect and Honesty
- Avoid Meaningless Words and Phrases
- Comparisons Should be Used Sparingly
- Be Specific
- Remember those Design Principles
- Understand the Design Approach and Context
- Ask Why
- Offer Suggestions
- Consider the Goals and Audience of the Design
via The Unwritten Rules of a Great Design Critique | Codrops.
-
greg
Browser Trends October 2012: the Calm Before the Storm? – SitePoint
Worldwide Browser Statistics August 2012 to September 2012
The following table shows browser usage movements during the past month.
Browser August September change relative IE (all) 32.85% 32.71% -0.14% -0.40% IE 9.0+ 17.57% 18.00% +0.43% +2.40% IE 8.0 13.65% 13.08% -0.57% -4.20% IE 7.0 1.16% 1.12% -0.04% -3.40% IE 6.0 0.47% 0.51% +0.04% +8.50% Firefox 22.84% 22.39% -0.45% -2.00% Chrome 33.65% 34.29% +0.64% +1.90% Safari 7.41% 7.70% +0.29% +3.90% Opera 1.64% 1.62% -0.02% -1.20% Others 1.61% 1.29% -0.32% -19.90% -
Bobby
What storm? am i missing something?
-
-
greg
BROWSERBITE
Another service… Browserbite helps you create web pages that look the same in all browsers…
BROWSERBITE | Browserbite helps you create web pages that look the same in all browsers..
-
greg
LukeW | Data Monday: Mobile Browser Use
Mobile traffic from BlackBerry devices plummeted 25% between September 2011 and July 2012. RIM’s smartphones and PlayBook tablet combined to account for as much as 5% of all mobile usage in the U.S. late last year but as of last month, that figure sank to just over 1%.
via LukeW | Data Monday: Mobile Browser Use.
But by all means, let’s allow a client’s prefered mobile device dictate design and development actions… cause that’s what we’re supposed to do, right?
-
greg
PhoneGap vs. RubyMotion
Interesting and well-done article examining the differences between the two mobile dev platforms. Still going with PhoneGap IMO.
The research for this article is premised on our simple application that we’ve written in both PhoneGap and Rubymotion, called Chatoms. The base concept of this application is fun enough to keep us developing it, but technologically simple enough to serve as an excellent example and exercise.
greg is discussing. 
i still struggle with pinterest … i know it has a place just don’t know where/how/what/when etc.