Create better walkthroughs and Apple designer lessons
Creating walkthroughs can be challenging at times, so here’s some help to write better walkthroughs for your product using a the 3×3 method. It’s said that “if you can’t explain it simply, you don’t understand it well enough”. In line with this idea, you boil down the what, why, and how of your product. From this foundation you can then build up your walkthrough, turning back to the fundamentals that you have honed in on with the above technique.
Over at Apple, we learn that the biggest lesson learned as an Apple designer is that even though we get the impression that Apple has no deadlines, there is actually a highly structured set of internal deadlines, and even deadlines for deadlines that have their own deadlines. The secret though is that they’re not publicised, so that deadlines can be pushed or adjusted when needed to allow a product to be as good as it can be, before its given an official launch date. It’s an interesting insight in to an unknown aspect of such a large company.
Sordid legacy of browser context-sensitive menus
Burke has an excellent rundown on the sordid legacy of browser context menus. Now that we’re creating apps within the web browser, it’d be great to have context menus similar to non-browser apps. The link provides a good history of context-sensitive menus, and says what we can do to develop our own custom solution.
Also around this week, how to create better photo filters where techniques are explored on how to develop a better interface with which a user can more easily compare different photo filters.
Animating CSS and making it last.
Alex caught our attention this week with a challenge to recreate this GIF image using just HTML and CSS, where a green square morphs to a blue triangle and then to a red circle. It’s quite the challenge, which has me tempted to use Marka for beautiful icon transformations.
We’re also seeing that CSS can be used to achieve a beautiful front cover of The Hobbit bending open and closed, with access to the CodePen code to see how it’s done.
Much of the above is achieved using strange tricks and techniques. If instead you want your CSS code to endure without needing to be updated, here’s how you can write long-lasting style sheets for rapidly changing, long-lived projects.
Welcome to this week’s On Our Radar, a weekly round-up of trends and themes that have come to our attention in the ever-changing world of web development.
Every week, we’ll put together a collection of articles and resources that will make your lives as designers and developers easier, and help you you stay up-to-date in this fast-paced industry.
Responsive Web Design
First up, Responsive Web Design has been a preferred technique recently, but it does have some drawbacks in terms of speed and bloat. As a result, Dave Rupert has performed an investigation in to responsive web design bloat, and Brad Frost took a look at The New Yorker, Adobe, and Harvard Law Review to learn more about the responsive web design landscape and how to speed it up. He also delved further to explore the principles of adaptive web design.
Sublime Text packages and an MVC investigation
Sublime Text has made it much easier to develop code and its packages only make things easier. Here are some recommended Sublime Text packages for front-end web design that will help to give you an even more streamlined and enjoyable way of doing things. On the PHP side of things, Jeroen asked whether the MVC design pattern is a problem or a solution, and delved in to situations where the MVC pattern is useful to use.
Developing a Better Experience
With the wide variety of devices people use to browse the web today, steps are being taken to try and maintain peoples quality of experience. Google are now calling out pages that will not work well on your device with messages like: “Uses Flash. May not work on your device.” After news that China has over half a billion people who access the web from their mobile devices, this is an even larger impetus to improve our techniques.
If you’re a freelancer developing sites you may want to think about moving from responsive design to adaptive design, or using A/B testing to improve your click-through rate. Responsive design has a beneficial place, as is nicely demonstrated by these responsive logos of famous companies, but as you can see in this Media-Query Mario, you can take things too far. Finally, here are 5 ways to never run out of freelance work.
Improve your Design
“Creating Distraction-Free Reading Experiences is a highly instructive read about how to improve your design, and if you’re after more, here is a comprehensive reading list for designers. When you want to jump in and try out some designs, Kite is a simple and flexible layout helper that can help you layout your design horizontally or vertically, nest groups and justify content, or fill sections across an area. Mind you, native CSS is proving to be highly capable too when it comes to layout, as is masterfully demonstrated in this A List Apart article on 10 CSS one-liners to replace native apps.
Getting started After last week’s Web Starter Kit from Google, a nice intro came out showing how web technologies work together. On SitePoint we have a good look at the time element, and we also a comprehensive look at HTML5′s track element to add further detail to your videos. Design a better experience Web design […]
Welcome to On Our Radar, a weekly round-up of trends and themes that have come to our attention in the ever-changing world of web development. Every week, we’ll put together a collection of articles and resources that will make your lives as designers and developers easier, and help you you stay up-to-date in this fast-paced […]