Nothing is perfect on the web. We can’t make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren’t that easy to break — both in terms of interface design and security. Yet neither resilience nor flexibility are usually reflected in our deliverables and mock-ups.
In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn’t really exist. A good example for it are “optimal” usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It’s not realistic. We need to work with dynamic content in our prototypes, with both average and extremes being represented.
This week I mostly spent time on fixing bugs, improving a deployment workflow and on getting another new front-end project structured. One major takeaway from this was that it’s good to have a proper deployment workflow in place already in the early stages of a project.
To document appropriately in git what has been done in a commit instead of sleazily writing “changed [XY] because of [some arbitrary reason]”. By doing so, it becomes easier for myself, or someone else, to identify bugs at a later stage.
background-clip is one of those properties I’ve known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn’t even use pseudo-elements on it. Even though that does work in certain browsers, the fact that it works is actually a bug and I didn’t want to rely on that. All this meant I ended up using backgrounds, borders, and shadows a lot. I also learned a lot from doing that and this article shares some of those lessons.
Before anything else, let’s see what background-clip is and what it does.
In the following image, we have an element’s box model.
the box model
If the padding is 0, then the padding-box is exactly the same size as the content-box, and the content limit coincides with the padding limit.
with padding: 0
If the border-width is 0, the border-box is the same size as the padding-box, and the border limit coincides with the padding limit.
with border-width: 0
If both the padding and the border-width are 0, then all the three boxes (the content-box, the padding-box, and the border-box) have the same size, and the content limit, the padding limit, and the border limit all coincide.
with padding: 0 and border-width: 0
By default, backgrounds cover the entire border-box (they are applied underneath the border as well), but their background-position (and also %-based background-size) is relative to the padding-box.
In order to better understand this, let’s consider an example. We take a box with random dimensions, give it a simple gradient background of background-size: 50% 50% and a hashed border (using border-image) so we can still see through the hashes what’s underneath the border:
In this demo, we can see that the gradient background covers the entire border-box (it’s visible underneath the hashed border). We haven’t specified a background-position, so it takes the default value — 0 0. We can see this is relative to the padding-box because it starts from the top left corner (the 0 0) of this box. We can also see that the background-size set in % is relative to the padding-box.
by default, backgrounds cover the entire border-box, but start from the top left corner of the padding-box
When setting the background-size for a gradient (but not for actual images), we usually need two values for consistent results across browsers. If we use just one value, Firefox takes the second one to be 100% (per spec), while every other browser incorrectly takes the second value to be equal to the first. A missing background-size value is taken to be auto and since gradients have no intrinsic dimensions or intrinsic proportions, the auto value cannot be resolved from those, so it should get treated as 100%. So unless we want both dimensions of our background-size to be 100%, we should use two values.
Using just one value for setting the background-size doesn’t produce consistent results across browsers (live test); left: Firefox (per spec, takes the second value to be 100%); right: Chrome/ Opera, Safari, IE/ Edge (incorrectly take the second value to be equal to the first)
We can make the background cover just the padding-box or just the content-box with the help of background-clip. Clipping means cutting out and not displaying what falls outside the clipping region, where the clipping region is the area inside the dotted line in the illustration below.
illustration of what clipping is
In the default case of background-clip: border-box, the clipping region is the border-box, so we have the background underneath the border as well.
background-clip: border-box
If we set background-clip: padding-box, the clipping region is the padding-box, meaning that the background is only displayed within the padding-box limit (it doesn’t go underneath the border).
background-clip: padding-box
And finally, if we have background-clip: content-box, the clipping region is the content-box, so the background is only displayed within the content-box limit.
background-clip: content-box
These three situations are illustrated by the following live demo:
We also have another property called background-origin that specifies which of the three boxes the background-position (and background-size, if expressed in %) is relative to.
Let’s consider that we have an element like before, with a hashed border and, this time, a visible padding. We layer an actual image and a gradient on the background. Both have background-size: 50% 50% and are not repeating. In addition to this, the image has background-position: 100% 100% (we leave the default 0 0 for the gradient):
The 100% 100% specified by the background-position of the actual image is the 100% 100% of the box specified by background-origin. At the same time, the 50% 50% specified by the background-size means half the width and half the height of the box specified by background-origin.
In the background shorthand, background-origin and background-clip can be specified in this order at the end of the layer. Since they both take a box value, if just one box value is specified, then both are set to it. If two box values are specified, background-origin is set to the first and background-clip is set to the second. If no box values are specified, they just take the default values (padding-box for background-origin and border-box for background-clip).
All right! Now let’s see how we can use this to our advantage!
Transparent gap between border and background
Some may remember we can get semitransparent borders with background-clip. But, we can also introduce a space between the border and the area with a background without introducing an extra element. The simplest way to do this is to have a padding in addition to a border, and also set background-clip to content-box. By doing it in the shorthand with just one box value, we’re also setting background-origin to content-box, but that’s fine in this case, it doesn’t have any unwanted effect.
Clipping the background to content-box means it doesn’t extend beyond the content limit. Beyond that, we have no background, so we can see what’s underneath our element. Adding a border means we see that border between the padding limit and the border limit. But, if the padding is non-zero, we still have a transparent area between the content limit and the padding limit.
highlighting the border, padding, and content area via dev tools
Prefix reminder: I’ve seen a lot of resources adding -moz- and -ms- prefixes for CSS filters. Please, don’t do that! CSS filters have been unprefixed in Firefox ever since they were first implemented (Firefox 34, autumn of 2014) and now they’ve landed in Edge behind a flag – also unprefixed! So CSS filters never needed the -moz- or -ms- prefixes, it’s completely useless to add them, the only thing they do is bloat the stylesheet.
We can also get a cool looking effect if we use a gradient for both the background-image and the border-image. We’ll make a gradient that starts from a solid orange/red at the top, then fades down to complete transparency. Since only the shades are different and otherwise the gradients used are identical, we create a Sass function.
This approach of using the padding to create the space between the background and the border is not the best unless we only have a short text in the middle. If we have a lot more text… well, it looks crappy.
The problem is that the text starts right from the edge of the orange background and we cannot add a padding because we’ve already used it for the transparent gap. We could add an extra element… or we could use box-shadow!
box-shadow can take 2, 3, or 4 length values. The first one is the x offset (determining how much to move the shadow to the right), the second one is the y offset (how much to move the shadow down), the third is the blur radius (determining how blurry the edge of the shadow is) and the fourth is the spread radius (determining how much the shadow expands in all directions).
The following interactive demo allows playing with these values — click any of them and a popup with a slider shows up.
Note that, while the blur radius has to be always greater or equal to zero, the offsets and the spread radius can be negative. A negative offset simply moves the shadow in the negative direction of its axis (left or up). A negative spread radius means the shadow shrinks instead of expanding.
Another important thing to notice here — because it’s convenient for our use case — is that that the box-shadow is never visible underneath the space occupied by the border-box, not even when that space is (semi)transparent.
If we keep the offsets and the blur radius to zero, but give the spread radius a positive value, then we get what looks like a second solid border of equal width in all directions, starting from the limit of the actual border and going outwards.
emulate border with box-shadow
Note that this kind of border doesn’t necessarily need to have equal width in all directions. We can give it different border widths by tweaking the offset values and the spread radius, with the restriction that the sum of the widths of the horizontal borders equals the sum of the widths of the vertical borders. Using multiple shadows could help us get past this restriction if we don’t need the border to be semitransparent, but this would be the kind of solution that complicates things instead of simplifying them.
Returning to our demo, we use the spread of the box-shadow to fake the border, use the actual border to create the transparent gap, set background-clip to padding-box, and let the padding do its job:
We could also fake a border by emulating an inset shadow. In this case, it starts at the padding limit (the limit between the padding and the border areas) and goes inwards as much as the spread specifies:
emulate a second border with an inset box-shadow
Because we can have multiple box shadows, we can fake multiple borders this way. Let’s take the case where we have two, one of them an inset one. If the actual border of the element is non-zero and transparent and the background-clip is set to padding-box, then we get a fake double border with a transparent area (the actual border area) between its inner and outer components. Note that this requires also increasing the padding to compensate for the space taken by the inset box-shadow.
border: solid 1em transparent;
padding: 2em; // increased from 1em to 2em to compensate for inner "border"
box-shadow:
0 0 0 0.25em #be4c39 /* outer "border" */,
inset 0 0 0 1em #be4c39 /* inner "border" */;
background: #e18728 padding-box;
It can be tested live in this Pen, where we also have a drop-shadow() filter for a glow effect:
Single element (no pseudos) target with smooth edges
Let’s say we want to get a target like the one below, with the restriction that we can only use one element and no pseudo-elements.
the target we want to CSS
The first idea would be to use a repeating-radial-gradient. Our target is structured something like this:
target structure illustration
So half the target would be 9 units, meaning the horizontal and vertical dimensions of the target are each 18 units. Our repeating radial gradient is black for the first unit, then transparent until the third unit, then black again and then transparent again… and this sounds like a repetition. Except we only have one unit from 0 to 1, the first time we have a black region, but then the second time we have a black region, it goes from 3 to 5 — that’s two units! So… we shouldn’t start from 0 there, but from -1 instead, right? Well, that should work, according to the spec.
The first problem here is that IE has a different opinion on how this should work.
repeating-radial-gradient with negative first stop: expected result (left) vs. IE (right)
Luckily, this has been fixed in Edge, but if IE support is needed, it’s still a problem. One that we can solve by using a plain radial gradient because we don’t need that many circles anyway. It’s more code, but it’s not that bad…
The circles are now distributed the same way in all browsers, but we still have another problem: the edges may not be as far from smooth as in the original image in IE/ Edge, but they look ugly in Firefox and Chrome!
original (top left) vs. IE/ Edge (top right) vs. Firefox (bottom left) vs. Chrome (bottom right)
Well, this improves things in IE (where the result already looked good) and Firefox, but the edges still look ugly in Chrome.
original (top left) vs. IE (top right) vs. Firefox (bottom left) vs. Chrome (bottom right)
Maybe radial gradients are not the best solution after all. What if we were to adapt the background-clip and box-shadow solution from the previous section to this problem? We can use an outer box-shadow for the outer circle and an inset one for the inner circle. The space between them gets taken by a transparent border. We also set background-clip to content-box and give the element enough padding so that we have a transparent area between the central disc and the inner circle.
I first got this idea when trying to style a range input’s thumb, track and, for non-WebKit browsers, progress (fill). Browsers provide pseudo-elements for these components.
For the track, we have -webkit-slider-runnable-track, -moz-range-track and -ms-track. For the thumb, -webkit-slider-thumb, -moz-range-thumb and -ms-thumb. And for the progress/ fill, we have -moz-range-progress, -ms-fill-lower (both to the left of the thumb) and -ms-fill-upper (to the right of the thumb). WebKit browsers don’t provide a pseudo-element that would allow styling the part before the thumb different from the part after.
These look inconsistent and ugly, but what’s even uglier is that we cannot list all the browser versions for the same component together to style them. Something like this won’t work:
input[type='range']::-webkit-slider-thumb,
input[type='range']::-moz-range-thumb,
input[type='range']::-ms-thumb { /* styles here */ }
We have to always write them like this:
input[type='range']::-webkit-slider-thumb { /* styles here */ }
input[type='range']::-moz-range-thumb { /* styles here */ }
input[type='range']::-ms-thumb { /* styles here */ }
Which looks like a very WET style of writing code and it actually is in a lot of cases—though given the many browser inconsistencies when it comes to sliders, it’s also useful for leveling things across the field. My solution to this was to use a thumb() mixin and maybe give it arguments for handling inconsistencies. Something like this, for example:
But let’s go back to how we can style things. We can only add pseudo-elements to these components for Chrome/ Opera, which means that, in reproducing their look, we have to get as close as possible to it without relying on pseudo-elements. This leaves backgrounds, borders, shadows, filters on the thumb element itself.
Let’s see a few examples!
Soft plastic control
For a visual example, think something like the thumb of the slider below:
slider with soft plastic thumb
First thought would be it’s as simple as a gradient background and a gradient for border-image, then just drop a box-shadow there and that’s it for such a control:
What should we do then? Well, use background-clip! We first give the element a non-zero padding, no border and make it round with border-radius: 50%. Then we layer two gradient backgrounds, the top one being restricted to the content-box (note the clipping is being applied as part of the background shorthand). Finally, we add two box shadows, the first one being a dark one that creates the shadow underneath the control and the second being an inset one, that should darken a bit the bottom and laterals of the control’s outer part.
Something like the thumb of the slider in the following image:
slider with matte thumb
This looks pretty similar to the previous case, except now we have a lighter line at the top and an inset shadow for the middle part. If we use an outer box-shadow to create the lighter line, the whole thing wouldn’t be round anymore unless we also decrease its height to compensate for the shadow. That would mean we need to do more computations to determine the position of the inner part. If we use an inset one instead, then we can’t use that for the dark shadow of the inner part. However, we could emulate that with a radial-gradient that gets conveniently sized, positioned, and clipped to the content-box. This means the same strategy as in the previous case, except we have an extra radial-gradient layered on top of the other backgrounds. The actual background-size of the radial gradient is larger than the content-box so we can shift it down without bringing its top edge within the content limit.
This one is a bit more complex and requires that the three boxes (the content-box, the padding-box, and the border-box) are all different, so that we can layer backgrounds and use background-clip to get the desired effect.
So for the main part of the slider, we have a gradient background clipped to the content-box layered on top of another clipped to the padding-box, both of them over a third linear-gradient clipped to border-box. We also make use of inset box-shadow to highlight the padding limit (between the padding and the border):
Now what’s left is the little round part. This is one case where I felt a pseudo-element was really needed. I did end up taking that route for Blink, but managed to get a decent-looking fallback for the rest of the browsers by layering two radial gradients on top of the linear ones:
We might be able to get even closer to what we want with better chosen shades, extra radial gradients, or even using background-blend-mode, but I don’t have the artistic sense needed for something like that.
With a pseudo-element, it’s a lot easier to get the desired result — we first need to position and size it properly, make it round with border-radius: 50%. Then we give it a padding, no border, and use two gradients for the background, the top one being a radial one clipped to the content-box:
For the actual slider thumb, I used the same thumb background with the radial gradients on top everywhere, and added the pseudo for Blink right on top of the radial gradients. This is because thumb slider styles in Safari get applied via ::-webkit-slider-thumb, but Safari doesn’t support pseudo-elements on the thumb (or track). So if I were to remove the fallback from the styles applied to ::-webkit-slider-thumb, then Safari wouldn’t display the round part at all.
Illusion of depth
The track of the following slider illustrates this idea:
slider with track having depth
Just like before, we do this by giving the element a non-zero transparent border, a padding, and layering backgrounds with different background-clip values (remember that those with content-box values need to be on top of those with padding-box values, which need to be on top of those with border-box values). In this case, we have a lighter linear-gradient to cover the border area, a darker one plus a couple of radial ones which we make smaller and non-repeating to darken the ends even further for the padding area, and a really dark one for the content area. Then we give this a border-radius equal to at least half the height of the content area plus twice the padding and twice the border. We also add an inset box-shadow to subtly highlight the padding limit.
Due to the way border-radius works — the radius for the content area being the one we specify minus the border-width minus the padding, which ends up being negative — there is no rounding for the corners of the content area. Well, we can fix this! We can emulate the shape we want by using both linear and radial gradients for the content area.
The way we do this is by first making sure the width of our content area is a multiple of its height (in our case, 15.75em = 9*1.75em). We first layer a non-repeating linear-gradient positioned in the middle that covers the entire height of the content area vertically, but leaves a space of half the content area height at both the left and the right ends. On top of this we add a radial-gradient with a background-size equal to the content area height both horizontally and vertically.
For example, something like the button illustrated below:
metallic control
This is a bit more complex, so let’s break it down. First of all, we make the button circular by giving it equal width and height and setting border-radius: 50%. Then we make sure it has box-sizing: border-box, so that the border-width and the padding go inwards (get subtracted from the dimensions we have set). Now the next logical step is to give it a transparent border and a padding. So far, this is what we have:
It doesn’t look like anything yet and that’s because the entire look is achieved with the help of just two properties we haven’t added in yet: box-shadow and background.
Before doing anything else, let’s deconstruct the control a bit:
deconstructing the metallic control
Starting from the outer part and going inwards, we have:
a thick outer ring with LEDs
a thin inner ring
a perforated area (that includes the cyan glow around the following inner part)
a big central part
The thick outer ring is the border area, the central part is the content area and everything in between (the thin inner ring and the perforated part) is the padding area. We create the thin inner ring with inset box shadows:
box-shadow:
/* discrete dark shadow to act as separator from outer ring */
inset 0 0 1px #666,
/* darker top area */
inset 0 1px .125em #8b8b8b,
inset 0 2px .25em #a4a2a3,
/* darker bottom area */
inset 0 -1px .125em #8b8b8b,
inset 0 -2px .25em #a4a2a3,
/* the base circular strip for the inner ring */
inset 0 0 0 .375em #cdcdcd;
We also add two more outer box shadows, one for the lighter top highlight of the outer ring and the second for the discrete dark shadow below the control, so we now have:
Now we have to layer three types of backgrounds, from top to bottom: limited to the content-box (creating the central area), limited to the padding-box (creating the perforated area and cyan glow) and limited to the border-box (creating the thick outer ring and LEDs).
We start with the central area, where we have some discrete circular lines created with three repeating radial gradients stacked one on top of the other, with the values of the stops based on the cicada principle and conic reflections created with a conic gradient. Note that conic gradients are not yet supported in any browser so we need to use a polyfill at this point.
We move on to the perforated area. The cyan glow is just a radial gradient to transparency in the outer part, while the perforations are based on the Carbon fibre pattern from the gallery Lea Verou put together some five years ago – still damn useful for artistically challenged people such as myself.
Every LED is made up of two non-repeating radial gradients stacked one on top of the other. The top one is the actual LED, while the bottom one, slightly offset vertically, creates the lighter highlight in the lower part of the LED. It’s pretty much the same effect used for the holes in the perforated area. The bottom gradient is always the same, but the top one differs depending on whether the LEDs are on or off.
We take the LEDs to be on up to the $k-th one. So up to the point we use the cyan variation for the top gradient, while after that we use the grey one.
We have 24 LEDs that are positioned on a circle passing through the middle of its border area. So its radius is the radius of the control minus half the border width.
We generate all these gradients with Sass. We first create an empty list of gradients, then we loop and, for every iteration, we add two gradients to the list. Their positions are computed so they’re on the previously mentioned circle. The first gradient depends on the loop index, while the second one is always the same (only at another position on the circle).
Consider the case of controls being in the vertical plane of the screen, for which we want to have a shadow in a horizontal plane below. Something like in the following image:
controls with shadow in a horizontal plane below them
What we want is to recreate this effect using just one element and no pseudo-elements.
Layering backgrounds with different background-clip and background-origin values does the trick in this case as well. We create the actual button with two backgrounds, the one on top clipped to the content-box and the one under it clipped to the padding-box and use a radial-gradient() background with background-clip and background-origin set to border-box to create the shadow.
The basic styling is pretty similar to that of the metallic control in the previous section:
We give it a thickish transparent border all around, so that we have enough space to recreate that shadow in the bottom border area. We do this for all borders, not just for the bottom one because we want the same kind of symmetrical rounding for all the corners of the padding-box (if you need a refresher of how this works, check out Lea Verou’s excellent border-radius talk).
The first background from the top is a conic-gradient() one to create the conic metal reflections. This one is clipped to the content-box. Right underneath it, we have a simple linear-gradient() clipped to the padding-box. We use three inset box shadows to make this second background less flat – add another shade all around with a zero blur, positive spread shadow, make it lighter at the top with a semitransparent white shadow and darker at the bottom with a semitransparent black shadow.
For the shadow, layer a third background for which we set both background-clip and background-origin to border-box. This background is a non-repeating radial-gradient() whose position we attach to the bottom (and horizontally in the middle) and which we shrink vertically so that it fits into that bottom border area and even leaves a bit of space – so we take it for example to be something like .75 of the border-width.
According to several popular reports around the web, it seems like GitHub is having internal issues about the direction in which the company should go forward. This news comes shortly after the famed open letter, which addressed the manner in which GitHub has been treating the non-premium projects hosted through it.
The debate seems to revolve around two heads: on one hand, the upper management of GitHub is keen on focusing more on enterprise contracts, whereas there are some at GitHub who wish to develop the service to make it more suited for the average developers and coders around the world.
Of course, if either side wins the argument, it will mean a gigantic policy change for GitHub. Looking solely at the enterprise clientele would mean GitHub might lose out on its apex position as the developers’ best friend, whereas targeting less of enterprise and more of development would mean GitHub might face profitability issues somewhere down the line. It is also worth noting that GitHub has, so far, been profitable by offering solutions for enterprise clients, whereas keeping its services free for the average user.
Viewing these reports in the light of the recent open letter written by GitHub users, these internal debates do seem to have legitimacy. As a $2 billion startup, GitHub is surely not in the game purely for the sake of helping developers, and profitability does matter. However, GitHub’s fame rests quite a bit on the fact that it offers a good set of features and hosting options to users free of cost, and if it were to rethink its strategy and steer more towards paid enterprise offerings, the average developer might be compelled to seek an alternative.
To learn more about the background of these development, read the Dear GitHub open letter that addresses some of the key issues that developers face when working with GitHub.
Sam Loyd (1841–1911), American chess player and puzzle maker, created the sliding tiles puzzle in the 1870s. The puzzle is represented by an m×n grid, where m is number of columns and n is number of rows, and each cell can be any imaginable value (number, letter, image, and so on.)
The purpose of the puzzle is to rearrange the initial configuration of the tiles to match another configuration known as the goal configuration. The rearrangement task is achieved by swapping the empty tile with some other tile in all possible directions (up, down, left, and right).
Flat design has taken the design world by storm in the few years it’s been around, but no design movement ever stays 100% pure to its roots and ideals. That’s exactly what’s happening with flat design: It’s gradually seen subtle-though-meaningful changes to its original iteration.
These changes were enough to make watchers and experts dub the new iteration as Flat Design 2.0. 2.0 is very interesting because it strikes the fine balance between just enough changes to alter the user experience and staying true to its original principles.
The evolution of Flat into 2.0 was inevitable, though: As designers got more comfortable with Flat, they could see that, for all of its popularity, some issues weren’t being properly addressed. And now we have 2.0 to address some of these shortcomings.
Origins of Flat Design
Look at flat design as a sort of rebellion against the then-popular design style of skeuomorphism. It relied on 3D effects to copy the real-life properties of 3D objects as a way to use familiarity to help the user experience. For instance, in initial iterations of Amazon’s Kindle Fire, there was a 3D bookshelf in the background to reinforce the purpose of the tablet for reading.
When Apple, a huge proponent of skeuomorphic design, decided, in 2012, to abandon skeuomorphism, that heralded a full swing to flat, which has remained very popular for the last few years. Its emphasis on minimalism has also helped to propel it to its current ubiquity.
Flat is characterized by its absence of:
raised elements that signify to users that they can be clicked;
hollow or sunken elements that signify to users that they can be filled (think search fields and other input fields).
Transition to 2.0
In spite of flat’s success, some designers started noticing legitimate flaws that weren’t being addressed in the design community. While flat gained a lot of steam due to its welcome minimalism, it went a bit too far in the austere direction. The characteristics of some 3D effects turned out to be excessive and adversely impacted the user experience.
Thus, it was inevitable that another change would occur. That’s where we are today with the dawn of flat design 2.0.
Flat Design’s usability problems
All of flat’s usability problems can be summed up in the following statement: Flat typically trades in a user’s needs for hip aesthetics.
In other words, designers designing for an interface to be “flat” will put a greater emphasis on keeping things minimal, non-3D, and vibrant/bold instead of putting the user experience first. That’s usually where all bad things in the design world start, and that’s why flat has evolved to 2.0.
Here are the common usability problems with flat:
absence of all-important signifiers (gradients, shadows, underlines, etc.);
absence of familiar patterns (blue, underlined text for links, etc.);
absence of contextual indications (CTA placement, actionable copy, etc.).
Perhaps the most notorious example in recent memory of all of flat’s usability problems was Microsoft’s release of Windows 8, with its so-called Metro UI. That design was the epitome of flat because everything was flat to the extreme.
The user experience was so bad because a completely flat design means that users aren’t being given the necessary clues to tell them what can be clicked and what can’t be on an interface. As a result, users are naturally forced to spend extra time figuring this out by experimentation or, worse still, perform actions out of error that they didn’t want in the first place!
As you can see, the Windows 8 screen is so flat that it’s impossible for people to tell what to click and what not to click. Even if users are already familiar with basic site navigation, that doesn’t mean that it’s a good idea to remove all signifiers (clues that tell users that they can interact with page elements) and hints of affordances (indications of how users can interact with page elements).
Great examples of Flat Design 2.0
2.0 is a subtle change or improvement over flat, so it may take more concentration to spot true 2.0 in websites and interfaces. That’s why we’re going to walk you through some current, big examples of 2.0 that are already in full operation.
The Dropbox Guide
Dropbox’s guide may at first look really flat, but if you look more closely, you’ll see 3D suggestions that clearly communicate to users that some elements are raised over others. This is primarily evident in images of the boy’s head (on the left side) and the screwdrivers (on the right side). Both images have strong, though subtle, black borders, which communicate depth and the impression that they’re sitting on top of the background instead of blending in with it.
Tolia Ice Cream
Tolia’s site is full of subtle, raised effects that give the distinct impression of 3D while the overall design is still flat and minimal. The raised impression is present in the headline, the sub-headline and the description (ie., the page copy). It’s also present in the call to action button and the CTA copy inside the button. You can thank the subtle use of fine shadows all around the edges of these elements for giving this raised impression.
Google Santa Tracker
Unsurprisingly, Google is on the 2.0 bandwagon, and its Santa Tracker page shows off how one can integrate 2.0 in a fun and useful way. The subtleties of 2.0 abound on the page in everything from the gradients and shadows on the various buildings and pop-up bubbles (when users hover on any building) to the headline’s 3D impression at the top of the page.
Publicis Groupe
Publicis Groupe’s 90th anniversary page boasts 2.0 influence in a pretty obvious way. If you look at the left side of the page, you’ll see the combination of shadows and gradients coming down and radiating outward from the pale circle and on the blue section beneath it. The stark minimalism also indicates that its design aesthetic is still strongly rooted in pure flat.
Jumeirah
This site for a luxury hotel in the United Arab Emirates is mostly dominated by giant video in the background, yet don’t let that distract you from taking in the subtlety of its 2.0 contribution. The “Jumeirah Inside” headline features oh-so-subtle shading that successfully gives the impression of 3D while still retaining the overall, flat look.
An evolution by demand
In the design world, things usually change because there’s a demand for it. Someone will notice that something’s lacking and find a way to improve things, or somebody else will take a concept and take it to another level that logically builds on a certain concept.
As far as 2.0 goes, it’s definitely a combination of both, as flat’s usability shortfalls are fixed by extending the original concept in a way that still honors the principles of minimalism that flat’s defined by.
Smashing Magazine is known for lengthy, comprehensive articles. But what about something different for a change? What about shorter, concise pieces with useful tips that you could easily read over a short coffee break? As an experiment, this is one of the shorter “Quick Tips”-kind-of articles — shorter posts prepared and edited by our editorial team. What do you think? Let us know in the comments! —Ed.
The Internet is the foundation of our craft. But what do we actually know about its underlying technology? How do DNS, networks and HTTPS work? What happens in the browser when we type a URL in the address bar?
With consumers using devices of multiple sizes – from smartphones and tablets to laptops and desktops, responsive web design is no longer a luxury, it’s a necessity. More and more users are browsing the web via mobile devices, requiring websites to support an increasing number of screen resolutions. In order to deliver the best user experience possible, developers are increasingly adopting responsive design. Websites must now adapt and select the correct image sizes and resolutions to cater to each user’s device, and the key to doing that effectively is responsive breakpoints generation.
Responsive Image Breakpoints Generator: A Free Tool For Responsive Images
What are Image Breakpoints?
When building a responsive website, you need to keep in mind the needs of different devices, which all come with various image sizes and resolutions. It goes without saying that your website needs to render well and look great regardless of which device your visitor is using.
To do this, you must be able to display the same image in different dimensions, depending on the screen size and resolution of your user’s device. Naturally, it is impossible to have one new image for every significant change in pixels, as you will probably end up creating an infinite number of copies of the same image. In addition, you cannot overlook image resolution either, because advancements in smartphones and tablets, the number of standard image resolutions has become too high.
You can, of course, select any JavaScript library or rely on HTML5 attributes. But even after doing so, you will need a mechanism that enables your code to decide which image dimension should be used for a given screen resolution. Determining the optimal image dimensions for every picture is what we call responsive image breakpoints.
Finding the best number of responsive breakpoints for your images is not an easy task. If you are looking for the best way to address this challenge, the Responsive Image Breakpoints Generator will enable you to generate the optimal number of responsive breakpoints for your images.
What Does it Do?
Responsive Image Breakpoints Generator is a free tool powered by Cloudinary, the leader in end-to-end image management.
The Responsive Image Breakpoints Generator enables you to upload your images and specify the settings that you need. Then, you can define the image dimensions for your design project, and generate responsive breakpoints for your images within minutes.
This tool also creates an HTML5 image tag that you can copy and paste in your code. The srcset attribute of the tag lists the image versions and width values as per the selected breakpoints. It will enable web browsers to automatically process the image tag and then figure out which version of the image to use based on the required responsive layout for the given device.
Responsive image generation is useless in the absence of smart art direction. For most mobile devices, the aspect ratio of the images needs to change, especially when the screen size is smaller and resolution is lower. In these cases, the Responsive Image Breakpoints Generator tool lets you appropriately crop images, specifying multiple aspect ratios for your images and generating the breakpoints for each aspect ratio, independently.
To help you better understand this tool, let’s put it to work and see what it can do.
How Does it Work?
First up, you need to upload your image to the Responsive Breakpoint Generator Tool, and then specify the settings for the image breakpoints.
After that, you can alter the aspect ratio and crop the picture to meet your unique needs.
Once done, you can download the zip file with the generated images, and you can grab the code for the HTML5 picture tag and img tag.
It’s that simple. If you are an existing Cloudinary user, you also can make use of Cloudinary’s API to directly upload your images to the cloud and then automatically generate breakpoints. To become a Cloudinary user, you can sign up for an account for free.
Verdict
When designing a responsive website, to do justice to your design, you need to find the optimal number of image versions and breakpoints. Of course, you could generate images for all possible values, but that would be overkill.
By relying on compression mechanisms and automated image breakpoints generation tools such as this one being offered by Cloudinary, you can save a good deal of time and also ensure that your website’s images render well on all devices, irrespective of the screen resolution and dimensions.
The number of devices and screen resolutions is only likely to increase, and as a result a web developer’s job will only become more complicated. You cannot overlook the importance of images in your design, because the majority of today’s websites rely heavily on images. If your pictures do not perform well on mobile devices, the user experience and the performance of your website will suffer. Responsive image breakpoints can ensure that your images scale appropriately, and perform well, whether it’s on a mobile phone or a tablet. The free tool Responsive Image Breakpoints Generator by Cloudinary is a blessing for anyone looking to build a responsive design.
Responsive Image Breakpoints Generator is fully open sourced and comes with an MIT License. The code rests over at GitHub, but the actual algorithm for image breakpoints generation and image cropping, resizing and other manipulation runs in the cloud.
Now and then, Jetpack by Automattic is dug out, and new features are added. While you can think whatever you want about Jetpack, you cannot deny that some features are very useful. A brand-new feature is the WordPress desktop app, which can be used for every WordPress website that has Jetpack activated. Today, we’ll take a look at this app together, and decide if and which advantages it offers.
The WordPress Desktop App
Of course, you need to download the app first. It is provided for free for all operating systems, including Mac OS X, Windows, and Linux.
As said before, an activated Jetpack plugin on the self-hosted WordPress website, and, of course, a WordPress.com account is required to use the app. After the installation, you need to log in using your WordPress.com account. If you already have Jetpack installed or if you own a VaultPress account, you also own a WordPress.com account.
Afterward, you gain instant access to self-hosted WordPress websites and your WordPress.com websites, if you have some. The app attempts to be an all-in-one solution, and can manage all WordPress activities as well as create articles for all websites. Your website is displayed within the app after logging in, and daily statistics will be shown as well. If you happen to own multiple websites, you can switch between them using the menu item »My Websites”.
The Error Messages
The app will notify you if an error occurs on one of your websites. In this case, the app can not access my site »Democratic Post”, but the reason for that is my security settings, and I want it to be like that. Two of my other websites can be accessed, which the app displays correctly. If you click on the exclamation mark next to the site on error, the app will show you a more detailed error message.
What You Can do With the WordPress App
The app enables you to manage your WordPress. You can also use it to write new articles or pages. Existing articles and pages can be edited and deleted.
Writing and Publishing New Articles and Pages
Once the app is connected to your WordPress and the current data has been updated, which can take a moment, you can write new articles and pages directly within the app. Existing articles and pages can be managed entirely.
The app downloads all of your content to maintain your current articles and pages. These are ordered chronologically and are displayed in an appealing way. It only takes one click to edit them or to move them to recycle bin. Clicking the button »Add” opens a text editor to write new articles.
Here, you can write and publish your new article. You don’t need to be logged into your website to use this feature. If you didn’t set particular settings that affect the security, this works smoothly. Of course, writing new pages is possible as well, you just need to click the »Add” button in the menu section »Pages“.
Managing Your WordPress Website
The app allows for almost complete management of your WordPress. To manage it without any errors, the Jetpack feature »Jetpack Manage” has to be activated. Additionally, the XML-RPC interface mustn’t be deactivated, as otherwise the management of your WordPress doesn’t work.
Managing Themes
From within the app, you can search new themes, view your existing themes, and activate a different current theme. If you want to adjust the settings, the app directs you to your website. This is not possible from within the app. Your website and the Theme Customizer will be accessed. Searching and installing a new theme, however, is no problem.
Editing the Navigation Menus
You can fully manage navigation within the app. Assigning new menus and altering existing ones can be done rather fast.
Managing and Installing Plugins
Plugins can be managed and installed directly from within the application. What’s useful is, that you can turn the automatic updates for each plugin on and off. This gives you the opportunity to test individual plugins for compatibility before updating them. New plugins can be searched and installed from within the app as well.
Changing the Website Settings
All of your relevant WordPress website’s settings can be altered and saved directly within the WordPress app.
Changing Your User Account’s Data
Using the app, you can list up all user accounts and change certain settings. The app doesn’t allow you to add new accounts. The link will redirect you to your admin access.
More Features
There are more features. However, they are only relevant for users of a WordPress.com website. Thus, I won’t go into detail on them.
Pros and Cons of the WordPress App – is it Useful?
Pro WordPress App:
The app can do a lot. It is comfortable to use and looks neat. You can tell that the folks at Automattic put a lot of effort into its development. It has the advantage that all of your WordPress websites can be managed with just one application. If you happen to own a WordPress.com website, it can also be managed easily with many additional features. The plugins of each installation can be updated comfortably with just one click, and you can activate or deactivate automatic updates for every single plugin. This is a very useful feature as it allows you to check every plugin for compatibility in advance.
If you’re using the Jetpack statistics, you can take a look at detailed statistics for each of your website. The app also allows you to switch between your websites with just a click. This can come in handy if you want to publish new articles on multiple blogs in a row. You don’t have to log into all the websites individually to write articles. So you can safely say that the app provides a good amount of solid advantages.
Conclusion: The app allows you to do almost everything that can be done from your WordPress’ backend. Plus, all of your WordPress websites can be managed in one central place.
Contra WordPress App:
The app requires you to activate the Jetpack manage feature. It also demands a working XML-RPC interface. The manage feature may prove to pose a security threat, and the XML-RPC definitely does. The XML-RPC interface fulfills two main purposes: The Pingback API allows for some »networking” between blogs and, at the same time, serves as an interface to allow WordPress to be managed via external software. Bruteforce attacks on the interface are, unfortunately, daily reality, and thus, it shouldn’t be active. WordPress is especially often hacked with attacks to this interface.
You have to decide for yourself whether you want to use the app despite its risks.
My Conclusion
The app is definitely capable of a lot, and it’s comfortable to use. I’m sure that it can be a relief to many people. Especially when you need to manage multiple websites, the app shows its potential. On the other side, there are security aspects. Whether you want to take the risks or not is your decision. I already know that I won’t use the app.
(dpe)
* You might also be interested in the following articles
For the past couple of years, Sketch has been rising in popularity among designers around the world. While it still has not replaced Photoshop as a viable design tool, it has earned a spot for itself in the design workflow of many creatives around the world. Available for only Mac users, Sketch is easy to use and has an intuitive interface, making a bloat-free solution for anyone looking for a powerful design app.
Owing to its popularity, finding extensions and plugins for the Sketch app is not a tough task, and a quick Google search can get you hundreds of Sketch extensions, both free and paid.
That said, there was an empty space in terms of an official repository for Sketch extensions so far; this void has now been filled: Sketch now has a dedicated page meant for Sketch extensions.
Currently, the Sketch Extensions repo is divided into two broad categories: integrations and plugins. Integrations are few in number, with currently only 10 official app integrations being offered. Plugins, however, are rising in count as we speak, and more and more third party developers are encouraged to create and submit their plugins for inclusion in the official extensions page.
Our new Extensions page is live featuring Plugins and Integrated apps from the fantastic developer communityhttps://t.co/jDSHVdXXeT
Much like WordPress repositories for themes and plugins, Sketch Extensions page too features plugins that are developed by the community and submitted to the repo. You can use the search function to look for specific plugins, or browse through the popular and featured plugins.
Among other things, Sketch has also released detailed developer docs for folks who might be interested in building plugins for the Sketch app. So far, due to lack of an official channel, many developers were publishing their Sketch plugins on GitHub, but it is now expected that more and more developers will be shifting towards the Sketch Extensions page.
You can visit the Sketch Extensions collection on this page. Also, if you are interested, you can learn more about plugin development for Sketch in the documentation.
What do you think of the Sketch Extensions page? Share your views in the comments below!
* You might also be interested in the following articles
