Dear Friends,
Internet Explorer 8. Probably the most annoying word in the world, considering how much effort we used to put into making our websites work in that browser. While IE8 Countdown is running, the browser still has around 10% of worldwide share. So how do we deal with it to minimize our effort, keep our code base lean and clean, and provide those sad IE8 users with an acceptable user experience?
Well, it's all a matter of setting priorities right. IE8 doesn't have to mimic advanced experiences of modern browsers — it just has to be functional. So we can use px as fallback for rem units, and instead of Respond.js, serve a fixed-width layout with extra ie8.css styles. For rgba(), hsla(), we can fall back to solid colours. Lack of :last-child(), :nth-child, box-shadow, border-radius and background-size is usually perfectly acceptable, and we have to serve .eot instead of .woff for web fonts. In order to generate ie8.css, we can either serve a lowest common denominator (mobile view) or a "desktop" view using Conditional Comments, with sass-mq mixin or LESS mixin which collect all styles up to the desktop experience (when built "mobile first"). Last but not least, don't forget about the good ol' shiny * { box-sizing: border-box } that saves the day in RWD anyway.
This should be enough. And that's the strategy we've been following for the last few months as well. Depending on the number of IE8 users, you could put more or less effort into your IE8 strategy, but serving a basic experience isn't that difficult, and doesn't have to take up too much of your time or cost too much money — if the client plays along, that is.
Happy coding!
– Vitaly (@smashingmag)
Table of Contents
1. Advanced SVG, CSS, JavaScript Techniques
It's quite remarkable how far we've come in front-end over the past few years. What seemed to be quite difficult in the past, can now be solved so easily today (think about responsive image maps, for example). Every other day, there are new techniques that come up — shared and explained publicly — and that is amazing.
So what about Masking SVG animations using clip-path? Or perhaps using background-clip for transparent borders? Or perhaps cross-browser custom-styled select menus, creating CSS hexagons with transform and calc()? using smart radio buttons? Just a few techniques for your toolbox to have nice, scalable, and fast solutions ready for your next project. Handy! (vf)
2. A Quite Different Background Pattern Generator
Let's suppose a friend of yours wants to create a background pattern, but doesn't know where to start. Well, you could definitely recommend Gerstnerizer and ask them to give it a try. Based on the idea of the book "The Forms Of Color" by renowned Swiss graphic designer Karl Gerstner, this tool creates repetitive patterns with just a few mouse clicks, and even exports them as SVG!
Getting started with Gerstnerizer is easy. You set up a grid, choose a line thickness, opacity and, finally, decide on a pattern on which your grid shall be based (square, triangle or hexagon are at choice). Once set up, it's time for some magic: you connect the dots in your grid and the tool instantly generates a repetitive pattern from it. A nice and quite different alternative to your conventional design process. After all, playing around often brings the best results, right? (cm)
3. How Much Should You Charge?
If you're a freelancer, you've probably caught yourself scratching your head too many times while pondering over a particular question. Which question, you ask? Oh, you know it very well! Remember the times a client asked you to state your proposal for a design project and you had to name a price? Yes, that question! So, how did you set your price? Did you ask Google, your friends, or just named what you've charged in the past just to get over with it?
Whatever the price you named was, it might have not been a reasonable amount for that particular project. Remember, the pricing is all about your time and energy invested in the work, and you are not a robot. You're a human being with your own set of motivation, values and feelings. There are some things you'll happily do but never ask for money, and then there are things you wouldn't do for a million bucks. Stop asking Google for the answer and start including yourself in the picture. Just answer 5 questions to know how much you should charge. It's high time you started pricing like a pro! (ea)
Advertisement
4. PerfMap: A Front-End Performance Heatmap
While participating at the WebPerfDays meetup in New York a few weeks ago, Mark Zeman and Steve Souders took the first steps to whip up a little Chrome bookmarklet that has the makings to simplify the workflow of a lot of front-end ninjas out there: PerfMap. Using the Resources Timing API, it overlays the page loaded in the browser with a front-end performance heatmap.
Colors and ms values on the heatmap indicate the time it took until the user sees an image, as well as the time it took for the browser to load that specific image. A legend attached to the bottom of the page also shows timings for the full page load. PerfMap is still in its early stages. In fact, the first proof of concept was pushed only a week ago, and Mark has some more plans for it, e.g. dealing with fixed position elements or crawling iframe images. So, if you have any ideas on how it's best to do this, your advice is sincerely appreciated! (cm)
5. The Infamous Hamburger Icon Revisited
The infamous "hamburger" icon. You'll find it on more and more responsive websites, yet many designers are undecisive about whether the icon is actually universally clear. Findings are quite widespread. While Booking.com came to the conclusion that changing the icon to the word "menu" had no significant impact on the behaviour of our users, James Forster had a very different experience, with the icon not performing that well, and Jonty Sharples has come up with an interesting compromise for everyone.
Tom Woolley, on the other hand, believes that the "hamburger" icon problem is actually valid for all kind of recent icons. He observed that all icons used for navigation purposes can cause confusion and leave the user uninformed about the action they'll perform. According to Luke Wroblewski, the only option left is to keep a clear label text, with a button shape. Well, perhaps the "hamburger" icon isn't that tasty after all. (ml)
6. A Trusty Companion Through Your Mobile Front-End Adventures
Let's face it: mobile is quite a beast to tame. However, once you understand exactly why those annoying bugs come up, you can handle them more effectively. To make sense of it all, we just recently released Peter-Paul Koch's new Mobile Web Handbook, a practical book that helps you prepare for the big and small challenges that mobile brings along.
224 pages dedicated to performance issues, weird browser bugs, inconsistent CSS/JavaScript support, and other tricky nuances that are known to give web developers and designers a headache. Developing websites for mobile is pretty much the same as it has always been, but it does require you to learn a few new things, and some of them are quite confusing. So, are you ready to embark on the journey and conquer that mountain? Get the book right away. (cm)
Advertisement
7. Reducing Latency With InstantClick And FastClick
Despite our bandwidth growing every day, websites don't really get that much faster. This is because the biggest bottleneck in loading web pages is latency. InstantClick is one of those JavaScript libraries designed to tackle this problem and make the loading just a bit faster. How? The tool does this by preloading links you are guaranteed to click on.
The time it takes for a user from hovering over a link to clicking on it is between 200 and 300 milliseconds. InstantClick makes use of this time to preload the page while the user is hovering over the link. On mobile devices, preloading starts on touchstart. Sounds like a lot of performance overhead? Well, to prevent requests flooding to your page, you can set a delay or preload on mousedown. The library works well in modern browsers and you can use it as progressive enhancement, i.e. if a browser doesn't support it, your site will work as usual. Also, if you want to reduce that 300ms delay on mobile, you might want to look into FastClick as well. (ml)
8. Get Better And Smarter: Upcoming Smashing Workshops
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.
Half-Day Workshops In Bath, UK (Oct. 27):
Full-Day Workshops In Whistler, Canada (Dec. 9/12):
Upcoming Online Workshops (Nov/Dec):
Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy!
9. New on Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
UX Designer at Fire Eye (New York, NY)
We're looking for a talented UX designer who can help design bleeding-edge web applications that solve real problems in the cyber-forensics space.
-
Senior Web/Graphic Designer at RateHub (Toronto, ON)
We're looking for a senior designer to execute a variety of branding, marketing collateral, and web User Experience (UX) and User Interface (UI) projects for RateHub.ca and its other web properties.
-
Front-End Developer at Create + Conquer (Boston, MA)
We're looking for an experienced and multi-faceted Front-End Developer to join our rapidly growing interactive agency. Our Front-End Developers are tasked with bringing digital experiences to life on an array of devices.
10. Smashing Highlights (From Our Archive)
-
Design Something Every Day!
As designers, we're all trying to get better at what we do. We surf the Web daily for hours trying to find useful tips and tricks to enhance our design skills. But what if we spent less time surfing the Web looking for inspiration and more time creating and designing things?
-
An Introduction To Full-Stack JavaScript
Nowadays, with any Web app you build, you have dozens of architectural decisions to make. And you want to make the right ones: You want to use technologies that allow for rapid development, constant iteration, maximal efficiency, speed, robustness and more.
-
Free Halloween Icon Set (22 PNG Icons)
This special Halloween icon set was inspired by classic cartoons. Spice up your website or application with a spooky Halloween atmosphere.The set was designed by the creative folks behind IconCreme for you to use on your website at Halloween time.
Recent Articles On Smashing Magazine
