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.
:-D
On 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.
One thing that i haven’t implemented into my grunt workflow up until now is automatic image optimization. grunt-respimg looks like a pretty neat plugin that does just that.
What do you use to optimize your images?
Harry 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.
If 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.
It’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!
We 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.
Perfmap is a pretty cool Chrome Extension which displays the loading time for a page right in your browser as an overlay using the Resource Timing API.
The heatmap colours and the first ms value indicate at what point in the page load did the image finished loading. It’s a good indicator of user experience. “It took 3450ms before the user saw this image.” The second value in brackets is the time it took the browser to load that specific image.