I really enjoyed watching Jason’s talk. He starts out illustrating how the right font face matters. Pay special attention to last twenty or so minutes where he runs through a few quick tips on font selection (e.g. when in doubt between two font sizes, bigger is better.)
Paravel founder Trent Walton on the transition to building responsive web sites properly:
I believe this starts with a shift in perception. Whether massive or minute, this shift usually involves letting go of a lot of assumptions that center around desktop-centric browsing.
I found myself nodding a lot to Trent’s post. There’s no one simple solution for implementing responsive web design, but trying to just take an existing desktop workflow (e.g. fixed width psd comps, jamming a few CSS media queries on existing work) won’t do it justice.
Sometimes you want a super quick way to both identify core dimensions on your open web browser and, especially for mobile devices, what critical dimensions like device width, height, and pixel ratio should be. That’s exactly what this web site does; bookmark it and keep it for reference later.
Influential designer Andy Clarke gives a great talk, and his slide deck all about responsive web design has a lot of smart ideas I’ve never considered before. Granted it’s not nearly the same as a live talk or full day workshop, but it’s worth a quick scan for almost any web designer or developer who wants to refine their responsive skills.
If you’re writing a web app and care at all about the iOS market, startup images are important. Yet when searching around for more detailed help on my Blue Drop weather app, it was hard to get a definitive answer on both code and image requirements for different iOS devices.
But when I stumbled on Taylor Fausak’s site after a few Google searches, the answer was obvious. On this post Taylor goes over proper startup images for just the iPhone 5, but he also wrote earlier about how to handle other iOS devices.
The new gaming site Polygon made a big splash when it launched late last year, and deservedly so. Not only is the editorial content solid, but its web design is bold and well thought out. This post is a very detailed breakdown of the initial design planning workflow, with initial mood boards, wireframes, and sketches.
Steven Bradley of Vanseo Design examines how exactly auto in the context of CSS offset works. It’s an issue that can easily mess up the location of absolutely positioned elements, especially, as Steven highlights, for drop down menus and popups. Worth a read for almost anyone who works with CSS and page layout regularly.
Ask almost any front end web developer: once you get deep in a complex, ongoing project with a lot of CSS, unused selectors can be a problem. We’re naturally inclined to keep on bulking up our projects with cool CSS3 transformations and responsive media queries, but it’s decidedly unglamorous to prune what’s no longer needed.
That what makes this little Firefox plugin such a good start. It’s far from comprehensive – you only can really search for unused selectors in the immediate scope of the page you’re on – but it has come in handy.
Ask almost any web developer: a strong suite of development apps and plugins is central to our productivity. However, finding the right apps can be a frustrating experience because of the app selection has grown dramatically over the past year thanks to the Mac App Store, as well as the spread of GitHub and app news resources like Hacker News, Dribbble and Twitter.
To cut through the clutter, I thought it would be helpful to go over the most important tools to my daily web development workflow. Note that app usage stems from personal, idiosyncratic decisions; what works for me may not work for everyone else. Yet this is a solid toolbox and if you’re at all considering trying something new, consider an option from the list below.
A good text editor is arguably the most important app in a web developer’s toolkit; you’re only as good as your code, and you code in a text editor. I was a die hard TextMate fan for years, but TextMate’s development has reached a dead end. I had to look at alternative options, and while I toyed around with Espresso and BBEdit, Sublime Text 2 emerged as a clear choice. I love the editor’s speed, even with huge directories open, the TextMate-like Cmd+P fuzzy file search and the multiple selection mode. It also has full compatibility with TextMate bundles and themes which made the transition away from TextMate seamless.
Emmet – version 2.0 of the popular web developer plugin Zen Coding – is a revelation. I was admittedly bearish on the initial Zen Coding plugins; something about the syntax never clicked with me. But Emmet is different. It’s faster and far more refined than older Zen Coding tools. With the plugin’s HTML snippets and slick CSS resolver, I can code most HTML and CSS much faster. Even if you’ve been dissuaded by some Zen Coding quirks in the past, give Emmet a try over the course of a coding day; most developers should see a difference after just a few hours of use.
Any web developer who also designs or works off design comps has to frequently deal with alignment and size issues among images and HTML elements. I’ve seen coworkers try ad hoc measurements by using the top edge of an app window to measure alignment, or taking an actual ruler against the screen to compare the relative size of two elements. Don’t do this; there are far more accurate and faster dedicated measurement apps out there.
The most popular pixel measurement tool is inarguably IconFactory’s xScope. It’s an excellent app, but its separate mini tools never meshed well with my personal workflow. Instead I prefer Snap Ruler, an app that only focuses on tools I use heavily: a loupe and an on screen ruler. You can size elements and export CSS code in three clicks. It’s fast, lightweight and has solid keyboard shortcut support.
I bought ScreenFloat on a lark. It was on sale for $2 and I needed something simple to float a web page. Little did I know at the time how awesome this app is for web development. I use ScreenFloat almost exclusively for floating Photoshop comps and wireframes on top of the web browser as I write code. ScreenFloat’s secret weapon is its adjustable transparency; I combine mouse wheel movement to adjust comp transparency along with a global keyboard command to hide or show the comp entirely. These quick shortcuts allow me to focus on just the code instead of fiddling with the comp itself. Overall, the app greatly increases my development speed and accuracy, especially with high precision “pixel perfect” comps.
If you work with CSS, you need accurate, consistent hex colors in code to match your ideas and graphical comps. It’s true that you can generate hex colors via screenshots and the Photoshop eyedropper. Yet this workflow requires a lot of unnecessary clicks and Photoshop is a heavy app to keep open for just this purpose. Instead, get a dedicated hex color picker; there are many good ones on the App Store, but I like ColorSnapper the most. It couldn’t be easier to use: I click on an onscreen color with the app and a corresponding hex color gets pasted to my clipboard. It’s also retina display friendly and I can easily switch the code color format from hex to other popular options (e.g. rgb).
If you do any sort of file comparisons you owe it to yourself to try out Kaleidoscope. The app was originally developed by (the now Facebook owned) Sofa but is updated and maintained by Black Pixel. These are two crack design and development shops and the pedigree shows. There are many other file comparison apps out there, but I find none have the level of polish that Kaleidoscope has. I use it every day as a simple Git diff tool before my code checkins or rebases.
http://www.kaleidoscopeapp.com
Over the course of a full day of coding, the Refresh button on a web browser can turn into an annoying time sink. You’re constantly saving work, switching over to the web browser and tapping refresh to get your web content up to date. LiveReload takes that action out of your hands: HTML changes auto-reload the page when you save while CSS changes take their effect instantly, no reload necessary. It also can auto-compile pre-processor code like SASS and LESS automatically in the background. Note CodeKit tends to be the more popular auto-refresh app choice with its cleaner UI and extra customization options, but I found LiveReload to be a slightly faster experience overall.
Alfred is a bit of a cheat falling on this list given it isn’t really a web targeted app. Yet it’s such a productivity booster that I can’t imagine my Mac without it. Alfred is a keyboard ‘launcher’ app: hit a keyboard shortcut and a text box pops up where you can quickly launch applications, run shortcuts, search the web and much more. The Verge ran a great introduction to the app last month if you want more of a primer before diving in.
As I’ve noted previously here, a great design and development working relationship is essential. Developer Derrick Ko writes a great post on how to make that possible:
Plan your sprints with both engineering and design present. Give both sides a chance to be heard when deciding the priority of upcoming feature work. There’s a lot less friction when the team understands the tradeoffs at play.
Once things are prioritized, stick to it.