Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

★ “Busting Myths and Horror Stories Of Designing For The Web!” ★

Hear, hear! SmashingConf NYC 2016 is coming! A spectacular performance about failures, successes and superpowers in front-end and UX — now on Broadway! A flabbergasting show on fascinating endeavours in web design, with busted myths, horror design stories and wisdom gained from daunting real-life struggles! Don't miss the most remarkable show of the year!

Can you dispel the truth from the lies? Honesty from deception? Myths from heartbreaking real-life experience? Have you figured out responsive design, mobile, pattern libraries, SVG, flexbox, performance, HTTP/2 — and all of the other mischievous, erratic facets of designing for the web today?

Read more...

The New Smashing Mystery Riddle: Have You Figured It Out Yet?

Yep, one of those mystery riddles again? To celebrate the launch of SmashingConf NYC, we’ve prepared yet another riddle, and this time it will be a matter of patience and following clues. As usual, we've hidden secret keys hashtags in a series of animated GIFs.

Smashing Book Mystery
Seek out the address. Spaces are overrated. Watch out for file names. (View large version)

Below you'll find the first animated GIF, containing a location clue. To move to the next level, you have to find a hidden hash tag and follow a link in a tweet containing it. Once you've reached the last level (you'll know when), just tweet all of the keys in one single hash tag (or a screenshot if there isn't enough characters left!) to @smashingmag on Twitter! Not that difficult, right?

Read more...
Advertisement Advertise with us!

Responsive Image Breakpoints Generator, A New Open Source Tool

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. We can solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

Responsive Image Breakpoints Generation: Challenges, Mistakes And A New Solution

The lives of web developers aren’t getting any simpler as the number of different devices and potential screen resolutions increase. The high-resolution arms race seems to be never-ending as vendors try to top one another with innovations in laptop and mobile device screens. New devices such as TVs and smartwatches are entering the market, making the race even more complex.

Read more...

Combining UX Design And Psychology To Change User Behavior

Have you ever wondered why your users do not interact with your product the way you hope? Persuading people to perform a particular action, like signing up or buying a product, is a challenge in most industries, especially when you want that action to be performed repeatedly.

Combining UX Design And Psychology To Change User Behavior

As UX practitioners, we try to create the best conditions for users to complete their tasks, and yet even the most usable interface is sometimes not enough to engage users. Why is that? To understand the reasons behind what drives users to certain behaviors, we need to look at the psychology that underlies the process of initiating and performing a behavior.

Read more...

Web Development Reading List #121: The Illusion Of Completeness, Client Hints, CSS Subgrids

Over the last two weeks, I had the chance to review about eighty job applications for a front-end position. The position requires strong JavaScript knowledge, but it also requires HTML and CSS. And here’s a thing: nearly no one could show off substantial markup skills, not to talk about accessibility.

Anatomy of a web app attack.

Although I only had the chance to review their personal websites or GitHub profiles and this might of course not be a full show-off of their knowledge, it assured my lately developed opinion on web developers. Many are not able to choose the right HTML elements, to explain why and how a clearfix works, or what ARIA roles are for, but they can use React and Angular. If you got some spare time over the next weeks, learn semantics and re-read the basics (or specs if you like the challenge) of HTML and CSS from time to time.

Read more...

How To Create And Customize A WordPress Child Theme

The WordPress platform is a magnet for those who want to take matters into their own hands, who want complete control over their websites and want to be independent in running them. WordPress does make it really easily to completely customize a website. If you have a bit of knowledge of HTMl, CSS and/or PHP, there is nothing you can’t change.

How To Create And Customize A WordPress Child Theme

I mean, just compare the default themes, Twenty Fifteen and Twenty Fourteen. Hard to believe they are running on the same platform, isn’t it? Therefore, it is only natural for you to want to adapt the look of your website to fit your vision. I doubt there are many WordPress users out there who don’t constantly think about what to implement next. However, a problem arises.

Read more...

Designing for Kids Is Not Child’s Play

Chances are you’ve seen it: a child glued to a tablet or smartphone, swiping fearlessly with small, sticky fingers. From airports and restaurants, to homes and even schools, mobile devices are a ubiquitous part of childhood today. Apple launched a curated ‘Kids’ category in the App Store last year that already has more than 80,000 apps.

Sesame Street Touch & Learn TV

With so many apps for kids out there, you may have considered designing one yourself. “How hard could designing for kids be?” you might think. Well, don’t let appearances deceive you. Despite their simple storylines and silly soundtracks, designing for kids is serious business. It’s not just taking grown-up content and dumbing it down. In fact, there are many reasons why designing for kids is actually more difficult than designing for adults.

Read more...

The Issue With Global Node Packages

Node.js brought about a great revolution for JavaScript developers by allowing us to write code that runs directly on our machines; our skills were no longer limited to browsers alone. At first, many of us simply saw this as a way to write our application servers without needing to learn another language, but we all quickly caught on to the fact that we could also write tools for the command line that automate a lot of things in our development cycles.

The Issue With Global Node Packages

npm, which is bundled with Node.js, made this even easier by giving us quick and easy access to tools that others have created, which we install on our machines to access from wherever we are in our system. JavaScript was finally a “real” programming language. But with these new capabilities came a lot of best practices that needed to be discovered, because there were many new scenarios that wouldn’t be found in the browser. In particular, I’d like to discuss a practice that has been on my mind a lot lately that I think much of the community needs to evaluate.

Read more...

Leaner Responsive Images With Client Hints

Responsive images have been around long enough for most of us to have taken them for a spin, or at least to have learned from the experiences of those who have. Beyond doubt, the responsive images specification is a great win for the web. However, quite a few reports from the front lines suggest that responsive images can become pretty ugly.

Responsive Images

The good news is that there is a fix! No, not throwing JavaScript at the challenge, but by asking the web server for a helping hand. Enter Client Hints, an initiative spearheaded by Google that is already available in browsers (Chrome and Opera) and that is super-simple to use. Let’s see how Client Hints can reduce both image size and verbosity of the responsive images markup.

Read more...

Web Development Reading List #120: Safari 9.1, Chakra Core Open Sourced, ES6 Object Shorthand Syntax

One thing we should learn to embrace more this year is to enjoy the good things and focus more on the positive news than on the negative. I started to learn more ES6 this year and have scheduled 1 to 2 small learning modules of ES6 and 1 to 2 accessibility features I don’t know yet to study each week.

Can you make the switch to another data center within minutes?

This week, Apple announced the pre-release of Safari 9.1 which will introduce the <picture>-element, Fast Tap on iOS, changes to modal dialogs, CSS Variable support, all, unset, font-variant-* and will-change property support as well as unprefixed CSS filter. Let’s hope that shorter release-cycles are Apple’s new strategy for a more open, more responsive browser culture.

Read more...

↑ Back to top