The Bleeding Edge of Web Design
Starting new a website project is always an exciting time.
But unfortunately, what designers and clients have in mind for the look of a website may not be possible depending on how strictly they need to support older browsers.
We tend to always have the latest and greatest smartphone, and may even splurge on a new personal computer every three or four years, so avant garde web layouts are the norm for those with state-of-the-art devices.
So what makes them cutting-edge? Exclusivity; the reliance on advanced technology.
So without further ado, here are a few cool, new web design features available now in modern browsers, but aren't quite supported in older ones:
SVG
What it is: SVG stands for Scalable Vector Graphics.
It's an image format. You might be familiar with other image formats like PNG or JPG, which are raster image formats — meaning they are made of pixels.
SVG images are vector graphics made of mathematical points so they can be scaled to look great at any size and any screen resolution.
It's important to note that photographs are the only images that cannot be converted to a SVG format. Icons, logos, charts and graphs however are perfect as SVG images.
Why you should care: SVG images can be significantly smaller in filesize than a raster JPG or PNG images. Hello, faster load speeds!
SVG images can also be any size, making them perfect for mobile and desktop usage. One image that can be gigantic, average, or teeny tiny. Perfection.
The downside: SVG images are not supported in Internet Explorer 8 or lower, requiring a PNG or JPG fallback if older browser support is necessary.
Animations
What it is: Things don't have to be so static anymore. We can make things glow, pulse, shake, grow, shrink, and much more with animation-type styling.
Don't worry, these animations are not Flash-based. Flash was a technology used to make animations online a few years ago that has since fallen out of favor.
When we talk about these animations, though, we're not talking about full-length movies or 30-second ad snippets. These are more or less interactive perks that happen when a user clicks on or mouses over an element.
Why you should care: Animations can help add a bit of flair to your site and even help indicate the importance of something.
They also make for great storytelling, and some web designers even work exclusively in web-based animation.
The downside: Animations are pretty new to the web and are not supported in Internet Explorer 8 or Internet Explorer 9.
They can also be harmful for someone with vestibular issues, so accessibility should be kept in mind when the decision is made to use an animation.
Use them sparingly if you have to support older desktop browsers. They should be treated more as a subtle enhancement rather than a necessity for usability. However, if you are seeking to build a mobile-only web app, they're perfect.
Gradients
What it is: It used to be that if you wanted a gradient on your site, it would need to be a long, repeating image, which worked OK in most circumstances, but had it’s drawbacks – especially in cases where content could be dynamically changed.
Now, it’s super easy to make all kinds of gradients, and even overlap them in some cases, completely without the use of images. This has led to some nifty effects online.
Why you should care: Clients will often ask for colors to fade or blend into each other, which would require a decent amount of work.
The downside: Like animations, gradients are also relatively new to the web, and browser support is strictly limited to modern browsers so they should be used in very rare occasions.
Support for Internet Explorer 9 and lower is lacking, so understand that something with a gradient will probably be just a solid color for those on outdated systems unless a fallback image is in place.
Don’t worry, users will still get the same content and be able to use your site just fine. They just won’t see all the extra bells and whistles.
Flexible box model
What it is: The concept of the box model is beyond the scope of this article, but essentially, it’s how page elements behave when it comes to layout.
The flexible box model, known as Flex Box, makes it so elements are less rigid and more fluid to fit available space as the browser window becomes larger or smaller – a huge win when it comes to responsive design.
Why you should care: Coding out the visuals of a site can sometimes be unpredictable, which leads to hacks, things that work but aren’t inline with best practices. These hacks aren’t detrimental to your site, but if another web designer or developer would happen to see the code, they’d shake their heads.
Flex Box would eliminate a good number of these issues and help make a lot of complex layouts easier to implement.
For example: Say you have a widget that falls in line well with the layout on a desktop screen but ends up at the top of a page when viewed on a smartphone. It’s not the most important thing on the page so it should really be positioned down further.
With Flex Box, you can change the way page elements are ordered.
The downside: Like the last few items, support for Flex Box is limited to modern browsers, including Internet Explorer 10 and up.
It’s possible to create workarounds, but generally, if your site calls for using Flex Box, you probably don’t need to support older browsers – or at least they are not much of a concern.
Fun fact: border radius, or rounded corners, is not supported in Internet Explorer 8
Crazy, right? Something so ubiquitous as rounded corners being so new to the web?
I didn’t know about this until earlier this year, so beware of leaning too heavily on things that seem like common styling features without proper fallbacks in place.
