“Quantity Queries” in Sass
March 19, 2015As i wrote before i really liked the concept of “Quantity Queries” in CSS to style elements based on their quantity. It was only a matter of time until someone took the idea to Sass.
Mike Monteiro Keynote at interaction15
March 14, 2015interaction15 is a three day conference held by the Interaction Design Association in San Francisco. Mike Monteiro gave another fantastic talk about selling design, which should be mandatory for every designer. It’s a little over an hour, but definitely worth every minute.
CSS-Tricks – Polylion
March 13, 2015
Maybe you’ve seen this awesome animated SVG Polylion from Dennis Gaebel. Just saw that he wrote an article on CSS-Tricks where he shares how he built it. Hope i find some time soon to play around with this technique and with SVG’s in general.
A web browser for the Apple Watch?
March 11, 2015On this weeks Keynote Apple revealed some more infos about the Apple Watch. The one thing that interested me most as a web designer (and would have made a very good reason to justify buying one) is if there will be some form of a real web browser. Unfortunately there’s not a whole lot of information about that and i cannot remember Apple saying a single word about it.
Peter Paul Koch mentioned in this article back in September 2014 that there will be Apps with WebViews, but nothing like a full featured browser, which still seems to hold true. He speculated that the reasons behind this are mostly hardware and user experience.
It’s possible that the current Watch hardware isn’t yet powerful enough to run a full browser, and that Apple will make sure that any app using the WebView doesn’t do anything heavy such as running JavaScript or animations. Even if that’s the case right now, the problem will go away as hardware matures, and I don’t think it’s the fundamental reason why the Watch doesn’t have a browser.
Instead, consider the user experience. How do you enter a URL on your Watch? How do you fill out a form? You don’t, as far as I can see — there may not even be enough space on the display for a Back button.
I quite agree with him, the technology/hardware side will mature fast and won’t be the problem here. But to be able to solve the UX of web browsing on smart watches will take some time, because we just don’t know yet how people will react to new ways of interaction. Will “Force Touch” enable useful new ways of interacting with a website? Will speech and motion recognition play a bigger role in tomorrows web design? We don’t know yet, but it’s completely imaginable that somewhere in the future we won’t even need to manually enter URL’s or filling out forms anymore.
CSS Wizardry – Can CSS be too modular
March 9, 2015Harry Roberts from CSS Wizardry answers a question he got about Atomic CSS and the proper amount of abstraction in your CSS.
That is to say, having
padding: 6px;appear in your CSS 50 times is no big deal. You will feel no performance impact. Gzip will crunch the bejeezus out of it.However, manually typing out
padding: 6px;50 times in your Sass (or LESS, or whatever) is a problem.
CSS-Tricks – Moving to HTTPS on WordPress
March 8, 2015If you intend to make the move to https, there are a bunch of things you need to think about so that you don’t get any warnings and everything works smoothly. Chris Coyier shared the steps he took on CSS-Tricks to take it “HTTPS everywhere” with many WordPress specific tipps.
There are many different options in terms of pricing our services as freelancers. Curtis McHale wrote a post in which he goes through many of them from Hourly, Daily, Weekly to Flat Pricing to Value Based to Conversion Based. I personally used pretty much all of them except the last and i am still experimenting with different pricing options. Here’s what Curtis says about pricing your work by the hour:
Hourly turns the freelancer in to some sort of robot in that it’s about how many hours you put in not how much value you produce. You are simply there to type for you client and that’s about it. The times I’ve had clients try to argue down an invoice is when I’m pricing hourly and they want to know what I spent each minute doing.
While it’s true that an hourly rate can lead to such discussions and some clients may try to argue, i found that one small changes on my invoices as well as my quotes helped a lot in reducing those discussions while still invoicing hours. It’s actually rather simple: I just don’t specify the exact time. Everything’s still calculated the same way, it’s exactly the same hourly rate, and that rate is still declared on the invoice. But removing that column which stated the exact “hours/minutes” shifted the focus from how long i will have for each item to the value each item delivers to the client.
Styling Elements based on their quantity in CSS
March 6, 2015It’s a situation we all know too good: You have that beautiful design turned up into a living prototype, media queries take care of all those different viewports and everything works just perfectly together. And then the client realizes that he needs two more items in the main navigation and suddenly your nice navigation starts to break apart and you start tweaking everything again and again. At least thats how i did it before. Not very flexible.
Heydon Pickering just wrote a great article on A List Apart about Quantity Queries for CSS which will make all of the above a thing of the past.
The
@mediaquery is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the quantity of content that can put pressure on space.Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for. This makes Photoshop mockups of web pages doubly obsolete: they are snapshots of just one viewport, with content in just one state.
With a clever combination of of nth-child() and first-child() pseudo-selectors he achieves to count elements in CSS. This makes it possible to apply different styling to navigation elements, when there are equal to or more than what you specify. If you haven’t read this article yet, you seriously should do that right now!
You might not need jQuery
March 5, 2015We often use jQuery just because we’re used to work with it. This page nicely demonstrates how easy some common functionality could be replaced with plain JS.
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.
If you’re developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you’re only targeting more modern browsers, you might not need anything more than what the browser ships with.
Definitely something i will come back to next time i’m tempted to implement jQuery just to switch some classes easily.
When your avatar takes on a life of its own
March 2, 2015Looks like some people won’t stop at nothing to make a few bucks. Chelsea Otakan experienced it first hand when her portrait showed up on different websites, complete with testimonials she never wrote and sometimes even a completely made up biography.
The search turned up 203 results and none of the results on the first page were actually me. There were dozens of fake testimonials bearing my likeness
Maybe you should take that next testimonial you read with a grain of salt.
Loved that last sentence.
Perhaps if you can’t get your customers to say good things you can put on your website, you need to make a better product.