After a few years of designing products for clients, I began to feel fatigued. I wondered why. Turns out, I’d been chasing metric after metric. “Increase those page views!” “Help people spend more time in the app!” And it kept coming. Still, something was missing. I knew that meeting goals was part of what a designer does, but I could see how my work could easily become commoditized and less fulfilling unless something changed.
I thought of how bored I’d be if I kept on that path. I needed to build some guiding principles that would help me find my place in design. These principles would help grow and would shape my career in a way that fits me best.
2017 is just around the corner, and the world is literally at its greatest technological peak in history. New innovations have opened the doors for creative minds to make their ideas a reality, especially on the webpage. Web design is a constantly morphing industry.
Exciting things are developing that could make 2017 a fantastic year for web designers. Keep an eye out for these eight web design trends in the new year:
Goodbye flat design, hello semi-flat imagery
Windows’ Metro UI style catalyzed the trend toward flat design, with drop shadows, textures, and gradients that cleverly provided the illusion of 3D imagery on a minimal background. While flat design was and still is popular, it has its drawbacks.
Many people call flat design’s usability into question. Users tend to like flat design, but they are often unable to navigate the page. Links aren’t conspicuous, and users hover over items in the hope of finding where to click. The solution at the forefront of web design in 2017 appears to be semi-flat design.
Semi-flat imagery uses subtle shadows, transitions, and cards to integrate dimension without confusing users. Semi-flat design rectifies the usability issues that have plagued flat design, striking an appealing compromise. It uses handcrafted illustrations that are not completely flat; creative grid design becomes fluid as the designer implements new ideas to develop the webpage’s framework.
This way of organizing graphic elements makes the site easier to navigate while still staying true to flat design. Using tiles for image placements is the popular semi-flat design trend moving into 2017.
One trend that remains on top in 2016 and won’t be fading anytime soon is custom-made illustrations on websites. Throughout history, custom-made has generally been preferred to mass-produced. It’s no surprise the same is true for web design. Creating your own graphics for the background of your site, the icons, and the menu is a unique way to grab attention and set your brand apart from the crowd.
While a custom-illustrated interface costs more time and money, the final effect is stunning. Take the Lighthouse Brewing Company’s website, for example. Its unique illustrations immediately pique users’ interest and makes them more inclined to stay and explore the website. The visual appeal of custom-made graphics is uncontestable and will continue to make waves in the future.
Brand storytelling has been important for a while, but as web design becomes more creative, so do the ways in which companies tell their stories. Now brands are not limited to simple text on their About Me pages. They can create videos, hybrid graphic novels, and interactive illustrations to capture their audiences’ attention.
Consumers are hungry to know a company on a deeper level. Creative, immersive storytelling is the perfect way to send a strong message. Take advantage of new ways to show instead of tell with unique videos, illustrations, photography, and typography.
Microinteractions were the buzzword of the year back in 2015, and today the cyber universe is replete with them. We encounter hundreds of microinteractions when we browse the web, many too small to notice. Microinteractions have one task, revolving around a single use case. Logging into a website or “liking” something on Facebook are two examples of microinteractions. Like a household appliance built for one main use – say, a toaster – designers build most apps today around a single microinteraction.
The next level of microinteractions is micro-mini interactions, or microinteractions that are increasingly more specific and granular. Individual actions are breaking down into even smaller segments with greater levels of interaction.
These microscopic interactions exist within one microinteraction. For example, a microinteraction is following someone on Instagram, but a mini-micro interaction is the act of tapping “Follow.” By 2017, many designers will be thinking in terms of micro-mini interactions.
If you haven’t transitioned to a mobile-first web design by the end of 2016, web design experts suggest you do so sooner rather than later. The rise of mobility has long-since been in full swing and is only projected to increase. With more and more consumers accessing websites via their smartphones instead of a desktop computer or laptop, it’s incredibly important for brands to utilize a mobile-first approach.
A brand must deliver a seamless, effective experience on mobile devices to stay relevant in 2017 and beyond. Designing for mobile first instead of trying to squeeze the content from your full-size website onto a tiny screen gives you the advantage of fully optimizing for mobile. Instead of forcing things to work for mobile and hoping for the best, design specifically for mobile for optimal user experience.
Hapnotic feedback will be a sensation
Haptic feedback is a user’s sense of touch on an interface. This includes the virtual keyboard on smartphones and other items the user touches to activate. As haptic technology advances and the costs of electro-active polymer actuators (EAPs) decreases, experts predict more sophisticated haptic feedback on high-end mobile devices.
Web designers will be able to use subtle haptic cues such as vibrations to direct users to an action, such as tapping “Purchase.” Designers can even create a pleasant-feeling webpage through pulses to encourage a user to stay on the page.
Hapnotic feedback is the conversion of haptic cues with subtle hypnosis. Hapnotic feedback is an emerging type of tactile interfacing that serves to subconsciously encourage users to do certain things. The science behind hapnotic feedback and mobile devices is still in its infancy, but expect to see more on this subject as we head into the new year.
Treating transition anxiety
Transition anxiety, or interstitial anxiety, is the second of tension the user experiences after making an action (tapping an icon) and the response (seeing the next page). Load times and latency creates this feeling of anxiety, which can translate into poor user experience and lost customers. The user feels powerless in this moment and confused as to what to do. Web designers have found a way to capitalize on interstitial anxiety and use it to their advantage instead of their demise.
Web designers can channel this state of high emotion into transition elements that allude to the next page the user will see. Thus, users can preview what to expect before the page loads. This eliminates the feeling of powerlessness and instead cultivates a feeling of pleasant anticipation. Transition animations that show what will happen if the user clicks a button creates a seamless experience for the user so, even during lag time, they are not left in the dark.
The statistics supporting video content as a content mainstay are overwhelming and indisputable. There is no longer any question of whether video content will fizzle out over time. Its power is only becoming more palpable as brands utilize video in new, exciting ways to capture user attention.
Live video, for example, has hit its stride and will continue to be a force to reckon with in the future. Consider creating a Vine or YouTube account for your brand if you haven’t already, and post videos as religiously as you post to your company blog. Video content is not a fad you can expect to fade. it’s the future, and smart brands are jumping on the bandwagon.
As 2017 looms around the corner, web designers have several exciting new prospects and technologies at their disposal. Savvy web designers will keep consumers on their toes with intriguing new interface ideas and take budding concepts to the next level. The world of web design will never be the same.
WordPress users like us love our CMS for its adaptability. It only takes a few clicks to have our websites look fresh and modern again. To let you revamp your WordPress this month, I compiled the ten best fresh and free WordPress themes that were just added to the official index.
Weblog is a blogging theme with an appealing appearance. It displays the posts on the overview page ordered in a grid. The theme provides a slider, an adjustable background as well as custom colors.
Created by: Acme Themes
License: Free for personal and commercial purposes | GNU General Public License
riseWP is a theme that pleasantly sticks out of the masses of multipurpose themes. Not only does it offer an appealing design, but it also comes with custom colors, a Google Fonts selector, large format hero images, and call-to-action buttons.
Created by: Acme Themes
License: Free for personal and commercial purposes | GNU General Public License
Editorial is a new magazine theme and provides a homepage that can be fully customized to suit your wishes. Custom colors and many options round off the image. This theme is definitely worth taking a closer look.
Created by: Mystery Themes
License: Free for personal and commercial purposes | GNU General Public License
Vertex is a theme for bloggers that like a unique touch. It has a pleasing design and enthralls the reader with large format photos. You also get to use a slider and a custom background.
Created by: DessignThemes
License: Free for personal and commercial purposes | GNU General Public License
VideoPlace is the right theme for everyone that likes videos. In this theme, all important functionalities are related to videos. The “Related Posts”, for example, are called related videos. The background, the header, as well as the logo, can be set to meet your requirements.
Created by: Jakob Martella
License: Free for personal and commercial purposes | GNU General Public License
Ryan is a minimalistic theme with a fully black and white design. It provides social media icons and comes with ten own widgets. The background, the header, and the logo are also customizable.
Created by: ThinkUpThemes
License: Free for personal and commercial purposes | GNU General Public License
The skin theme is labelled as a theme for many application areas, but it seems to be best suited for magazine and news websites. It offers a lot of options, like a slider, different layout settings, and a mega menu.
Created by: Ahmed Kaludi
License: Free for personal and commercial purposes | GNU General Public License
Rock Star is a professionally designed music theme for bands and musicians that would like to advertize their music and events. There are many functions to choose from regarding the theme configuration. Among other things, it provides a hero image, an own logo, a slider, and own widgets.
Created by: Catch Themes
License: Free for personal and commercial purposes | GNU General Public License
Styled Store is a lovingly designed theme for a WooCommerce online shop. Considering it’s a free theme with a paid pro option, you already have access to tons of functions and settings in the free version. In conjunction with the fresh layout, even the free version should enable you to set up a very unique shop.
Created by: Styled Themes
License: Free for personal and commercial purposes | GNU General Public License
Web Browser to View Website Across Multiple Devices. No Coding Skills Required.
One of the challenges web developers face when building a responsive website is making sure it looks great on all devices. I recently came across a web browser that is specifically built for web developers and allows you to see your website across multiple devices. The web browser is called Blisk and it can be found at https://blisk.io. In the video above I give a quick overview of the web browser and where to download it.
When building a fixed-width or fluid-width website in Adobe Muse this browser can be very useful. You can quickly test and see how your website will look across multiple devices as you are developing within Adobe Muse.
With the Blisk web browser you can see how your website will look on the following devices:
Phones:
Iphone 4
Iphone 5
Iphone 6
Iphone 6 Plus
Iphone 7
Iphone 7 Plus
Nokia N9
Samsung Galaxy S3
Samsung Galaxy S4
Samsung Galaxy S5
Samsung Galaxy S6
Samsung Galaxy S6 Edge
Samsung Galaxy Note 5
LG G3
Google Nexus 4
Google Nexus 6
Tablets:
Ipad Mini
Ipad Air Retina
Google Nexus 7
Google Nexus 10
The browser allows you to view the mobile/tablet version and the browser version of the site at the same time. This will allow you to test the site and see how it looks visually across different devices. Also clicking with the mouse is the same as touching the device on the mobile and tablet versions of the site. Along with showing the website on these phones it also gives you the dimensions of the phones within the selection panel. This can be useful when deciding where you would like to place breakpoints within Adobe Muse.
The concept of a multipurpose website template from TemplateMonster has won the world rather quickly. The popularity of web templates can be explained by many factors that are connected both with programmers and non-programmers. For a programmer, a multipurpose website template means less sleepless nights, less dirty job (meaning hand coding), and surprisingly more clients (we all know that clients do not like waiting). For a non-programmer, a web template from TemplateMonster is basically the only way to become an integral part of the web world. In addition, due to the 24/7 Support Team and affordable prices everyone can get a blog, a portfolio, or an online-shop that is fully customizable, speed- and SEO-optimized.
You would ask – what else can you ask for if everything is already this perfect? You would be surprised to know that there is the web template from TemplateMonster that is literally a programming wonder. And this wonder is called Intense. Designed as the first multipurpose website template, it got so popular that TemplateMonster has decided to create 10 more Intense-based templates. By the way, there is a rumor that TemplateMonster is not going to stop at number 10.
What is So Special About The Intense Multipurpose Website Template?
The answer is simple – everything. It could be said that the main unique feature of the Intense multipurpose website templates is their flexibility. It means that every Intense template can be easily transformed into 30 personal blogs, 20 different portfolios, or 10 authentic online-shops. Feel free to correct us, but as far as we know, this is the only template that can boast such flexibility.
What is also fantastic about the Intense multipurpose website template is the unbelievable amount of customizable elements that you can adjust to your needs. Numbers speak for themselves – 250+ HTML pages, 13 header and 4 footer styles, 60+ reusable elements, 2000+ Font Icons, 190+ PSD files and lots of other cool things. All this in one template. Outstanding, right?
One more breathtaking detail is that buying an Intense template means that you automatically sign up for the lifetime free updates from TemplateMonster. Knowing how productive the TemplateMonster programmers could be, there is a high chance that you would not need to wait for a long time before you see a better version of your Intense template. Yes, it is almost impossible to imagine that Intense could be better than it is now. But as people say, there is no end to perfection.
As one can see, the Intense templates is a profitable investment no matter what type of a website you are planning to launch. Or how well you know the latest trends in web development, or how big your expectations are. Also, Intense fits into any budget (see for yourself the prices for an individual Intense template or for the whole pack), into any company image and size. Enjoy the Intense multipurpose website template and choose the new look for your web project!
Chief Intense Template
This template has quickly become a bestseller due to its practical potential and amazing design. With Chief Intense your future website is equipped with all necessary tools not only to survive but also to thrive in the Internet world. While the valid semantic code, the parallax scrolling and the extended Bootstrap toolkit help this template to maintain its leading role in the Intense template family.
The main goal of this template for photographers is to concentrate all your visitors’ attention on your content. This is achieved thanks to the clever choice of colors and easy-to-use navigation. Also, the valid semantic code ensures that your portfolio loads quickly so your customers could be more than satisfied when visiting your site. Let Look and Love do all the job while you are taking breathtaking photos!
This template is designed the way your customers would want it to be designed. The white background that adds emphasis on your goods, different types of galleries with the photos that can stir anyone’s imagination. And social media buttons that help you to enlarge your clientele daily – this is what A Better Place offers. Finally selling property has never been easier!
All your visitors will be absolutely stunned when using your website for the first time. First of all designed as a restaurant template, Tasty Intense represents the whole new approach to food industry. Being ultra responsive and cross-browser compatible, this template offers limitless possibilities for creativity. Moreover, this templates can guarantee that your restaurant is as busy as it could ever possibly be.
If you need a job portal with the modern design and practical layout, then Hard-working is waiting for you. Equipped with the powerful search engine, this template allows your clients to find the jobs or employees of their dreams in no time. Due to the smart combination of black and white in the background accompanied by green highlights, your site looks positive and approachable.
This template effectively uses the white color as a means to attract all the attention of your visitors to your thoughts and experience. Cute social icons help your blog get more popular on the web. The minimalist design is combined with the best functionality ever and extraordinary technical features.
Looking powerful and ambitious, this template possesses all the qualities that the Intense family can be so proud of. The fully responsive slider, the speed optimisation and social feed widgets create the unforgettable image of your sports center. The drop-down menu helps your website look well-organized and clean.
This template is aimed at small businesses that deal with handicraft. Warm colors and the user-friendly layout of this template evoke an interest of your clients from all over the world. Also, sliced PSD and the drop-down menu look smart and welcoming.
This particular template is created to suit the need for fresh and cute websites for kids’ goods. The absolutely charming color scheme harmonizes with cute Google Fonts. In addition being SEO-optimized, this template can quickly turn your web project into a profitable business.
You can definitely rely on this template if you are planning to launch a successful medical business. Because of easy-to-navigate and cross-browser compatible, Heal can boast great practical potential. Furthermore, your clients know where to find you if needed thanks to the smart use of Google Maps and the fresh-looking Contact form. The sticky navigation bar and the back-to-top button help your visitors to find the information they need in no time.
This template is designed for consulting companies of different budgets, types, and sizes. The combination of the green background and yellow spots create the image of stability and prosperity. Moreover, being speed-optimized, Money Talks makes sure that your clients enjoy visiting your site.
Over time, developers have wrestled with forcing images into responsive layouts. Media queries and fluid grids are constantly employed to achieve visually flexible images. Achieving such flexible images as pointed out by Ethan Marcotte in the seminal first edition of his book is as easy as:
img { max-width: 100%; }
The image resources being served must be big enough to fill large viewports and high-resolution displays to make this code work effectively. Simply setting a percentage width on images is not enough, the images need to be resized as well, or else huge image resources will be sent to everyone which is a performance disaster.
Another way developers have combated images into responsive layouts is using the suite of new HTML features which allows images to transform in a way that allows users get tailored resources based on their context. These features provide adaptation via allowing authors to mark up multiple, alternate resources like so:
<img size=”100vw”
srcset=”tiny.jpg 320w,
Small.jpg 512w,
Medium.jpg 640w,
Large.jpg 1024w,
Huge.jpg 1280w,
Enormous.jpg 2048w”
src=”fallback.jpg”
alt=”To each according to his ability” />
The challenge with this method is that it can be very tedious and complex to always generate multiple alternate resources for every image. Cloudinary can help with the resource generation, but then the markup in our image tag will be overwhelming.
Considering JavaScript
Another method developers employ is using Javascript. JavaScript can directly measure the browsing context and when paired with on-the-fly, server-side resizing, it requests a single, perfectly-sized resource every time with little or no extra markup required. This post explains how to use JavaScript to achieve automatic responsive images.
Now there are challenges with this approach:
Setting up JavaScript infrastructure which might be complex
Inserting JavaScript between users and our page’s core content which might be tricky to do effectively.
Browser vendors use the speculative pre-parser to shed off as many image loads as possible before a page’s HTML has even finished parsing. And for JavaScript to load measured image resources, it must wait for page layout to be complete before it can measure the page.
This means we are faced with a choice if we wish to use JavaScript to load responsive images. Either:
Let the pre-parser do its work and set JavaScript to double-load all of our images, or,
Disrupt the pre-parser by authoring invalid src-less s so that our JavaScript can start loading our pages’ images last, instead of first.
Our major goal is performance, but these options above still present huge compromises that will impede our aim of simply loading appropriately-sized images.
Client Hints to the rescue
All the options we considered above either came bundled with a huge compromise or was just verbose and complicated. What other options do we have? Where can we shift this burden of complexity? I’ve got an idea, let’s put it on the server!
Front-end developers don’t have to sweat it anymore. Make responsive images somebody else’s problem.
Clicking through the link above (or on the photo), you’ll see an image, the URL of which delivers different resources to different users, depending on their context. In browsers that support Client Hints (at the moment, mostly Chrome), 1x devices will receive 1x resources, 2x screens will receive 2x resources. How is this possible? A little tag is placed in the of this page which looks like this:
<meta http-equiv="Accept-CH" content="DPR">
The code above tells the browser to send an extra HTTP header named DPR, thus advertising devicePixelRatio. Those DPR HTTP headers are Client Hints. So, when you send DPR hints with a little meta magic and dpr_auto appended to the URL, Cloudinary is able to deliver different resources to different users depending on their display density.
Automatic width
dpr_auto scales images to fit different display densities. Cloudinary provides w_auto which scales images to fit variable layout widths. A typical example is shown below:
<meta http-equiv="Accept-CH" content="DPR, Width">
[…snip…]
<img sizes="100vw"
src="http://res.cloudinary.com/demo/w_auto/on_the_phone_csmn8h.jpg"
alt="Obama on the phone with Castro." />
Chill, let me explain what’s happening here.
The meta tag instructs the browser to send another Client hint: Width in addition to DPR.
The img tag includes a sizes attribute which informs the browser about the layout width of the image.
The browser then broadcasts the width to the server via the Width hint
Note: If there is no width and no sizes, w_auto does nothing! Also w_auto images will be scaled based on DPR and width hints, no need to add dpr_auto in the URL.
Advanced w_auto usage
Let’s dive into a further use of Cloudinary’s w_auto parameter. w_auto can take two optional parameters like so:
:100 tells Cloudinary how big the difference between alternate resources should be. This parameter allows you to limit the number of possible responses by defining a rounding step between them. For example, if the target width is 323 pixels, Cloudinary will round up to the nearest hundred and return a 400 pixel-wide resource. Now, if you set the first parameter to :1, resources will be scaled to match the layout width exactly which is generally not a good idea.
:400 refers to the fallback width. If a browser doesn’t send a width hint, this parameter will be used to serve an image resource with that width.For example, in this scenario, browsers that don’t support Client Hints are served a 400 pixel-wide image. In case you are not aware, 400 is a mobile-first default. You can decide to serve a desktop-first default to non-supporting browsers, say 1000.
Note: If you don’t send a width hint or your browser doesn’t support Client hints, and this fallback parameter too is absent, w_auto will deliver images at their original size. Imagine an image that is about 12 megapixels been delivered to a Mobile Safari. This could potentially destroy a front end developer’s career .
Next, we’ll talk about one more awesome thing that w_auto can provide for you!
Automatic breakpoints
Four years ago, Jason Grigsby noted that it makes more sense to think about step-size in terms of bytes rather than pixels. Cloudinary went ahead to build the tool that brings Jason’s idea into reality: the Responsive Image Breakpoints generator. The same logic for this tool has been built into w_auto too!
Cloudinary servers can look at your images, see how they compress, and determine byte-size-based gaps between images for you if a special value :breakpoints is provided. This is just the steps parameter.
w_auto:breakpoints is a result of years of smart thinking and tremendous efforts to provide an impressive automatic responsive images solution that is smart not only about the images’ context, but also their particular content. However, :breakpoints require a bit of very technical set up at the CDN layer, so at the moment, you’ll need to contact Cloudinary to set it up for your account.
It is not news that other browsers are slow at implementing new web platform features including Client Hints. Browser vendors mostly want to implement features after they have seen a large demand for them. Authors also don’t want to use features on their web pages until they enjoy a wide browser support.
Cloudinary is advocating for the adoption of Client Hints in a wider range of browsers because dpr_auto and w_auto are, among other things, an attempt to encourage Client Hints usage. Simple, responsive, automated and performant images should be the norm these days!
Developer’s dilemma
Everyone should be thinking about responsive images when working on projects – either new or revisiting old ones. What is the best way to go about it? At the end of the day, the decision still lies with the developer or the team involved. A mark-up based solution will get you most browser support but then automating that could be complicated. JavaScript based solutions on the other end can easily come in handy, but operate within significant performance constraints.
Client hints paves a third option, which is both simple and performant. w_auto and dpr_auto are very useful right now even with the fair browser support of Client Hints.
Implementing dpr_auto and w_auto is just seamless and delivers to around half of your visitors worldwide. They provide incredible performance gains and those gains will grow as browser support improves.
Sign up for a free account today and start accruing performance gains today with automatic responsive image resolution!
[– This is an advertorial post on behalf of Cloudinary –]
Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables (“CSS Custom Properties”) for the same reasons. But there are also some important differences that should be made clear.
A simple example of preprocessor variable usage is like this:
That was the SCSS varient of Sass, but all CSS preprocessors offer the concept of variables: Stylus, Less, PostCSS, etc.
The above code would do nothing in a browser. The browser wouldn’t understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to:
This is now valid CSS. The variable was part of the preprocessor language, not CSS itself. Once the code compiles, the variables are gone.
More recently, native CSS has started supporting CSS variables, or “CSS Custom Properties”. It allows you to work with variables directly in CSS. There is no compiling.
A simple example of CSS custom property usage is like this:
will be orange, because any will be a child of , which has a higher applicable specificity.
You could even re-set variables within media queries and have those new values cascade through everywhere using them, something that just isn’t possible with preprocessor variables.
Check out this example where a media query changes the variables which are used to set up a very simple grid:
The variables that [preprocessors] use suffer from a major drawback, which is that they’re static and can’t be changed at runtime. Adding the ability to change variables at runtime not only opens the door to things like dynamic application theming, but also has major ramifications for responsive design and the potential to polyfill future CSS features.
He includes a demo where JavaScript changes styles. It doesn’t change the styles on elements directly, it’s just resetting some CSS variables on-the-fly:
Note there is a bunch of stuff about CSS custom properties I’m leaving out here. You can set fallbacks. You can use calc() with them. There are a bunch of cool tricks you can do with them. See the homework section below!
Why use preprocessor variables?
The big one: There are no inherit browser support considerations. They compile down into normal CSS.
Little stuff: Like you can strip units from a value if you had to.
You could use them together
There are pretty compelling reasons to use both. You could absolutely have a CSS preprocessor output CSS custom properties. Ivan Ivanov created a demo that allows you to write using the syntax of CSS custom properties, and through Sass, output code that has fallbacks:
I tend to think that once we can use CSS custom properties without worrying about browser support, that we’d just use them to do all our variable handling. We might still use preprocessors for other conveniences, but the variable handling in native CSS seems so good it’s probably worth just going all-in on that.
Browser support of CSS Custom Properties
This browser support data is from Caniuse, which also reports this feature is in W3C Candidate Recommendation status.
She covers plenty of practical applications, as well as some trickery like taking control of when variables cascade and some gotchas.
2) Watch David Khourshid’s Reactive Animations with CSS
David shares the idea that connecting DOM events with CSS variables can do some really awesome UI stuff with not much code. Check out his slides (starting from #26) that show off how awesome this is.
3) Read Harry Roberts Pragmatic, Practical, and Progressive Theming with Custom Properties
His article explains how user theming of sites gets a heck of a lot easier with CSS variables.
4) Read Roman Komarov’s Conditions for CSS Variables
Despite it being talked about every so often, there are no logical gates in CSS (e.g. @if (true) { }). We fake it sometimes with things like :checked, but that’s dependant on the DOM. Romans shows off a trick where you can use 0 or 1 on a variable and then use that with calc() to simulate boolean logic.
As a web developer, you are always in search of new tools. Not only do fresh solutions and plugins assist in sorting out mundane problems and transforming the daily routine into a pleasant pastime but they also let you keep up with the community and implement modern features without the hustle and bustle, enriching interfaces and enhancing the workflow. They are also great time-savers; nowadays time means money so that they are profitable as well. Today we have prepared two hands full of helpful instruments that were created to lend a hand to fellow web developers and aid in their work.
Materia is applicable for creating both mobile and web applications of various scale. It includes all the initial stages of the development assisting in crafting high-quality products in no time.
CSSAnimate is a small generator for building keyframe animations. It has lots of options that put you in the driver’s seat, letting you manipulate with such features as timing, duration, rotation point, etc.
Creator: CSSAnimate License: Declared as Free, no proper license given.
Mobile Editing is an open source page builder that offers a comfortable environment for creating responsive designs with a strong focus on mobile audiences.
Elementor is a handy feature-rich live page builder that helps create WordPress-powered projects with beautiful and high-end interfaces. No coding skills are required.
Creator: Ben Pines License: Declared as Free, no proper license given.
As you may have guessed, the tool is all about media queries and is simple and efficient to utilize. Here you will find specifications for a bulk of popular and not-so-popular devices.
Creator: Simplecss License: Declared as Free, no proper license given.
Reframe.js is a pretty lightweight JavaScript plugin (it weighs just ~1.3kb) that equips unresponsive elements on the website with an adaptive behavior. It is intended to work with iframes and videos
Creator: Dollar Shave Club Engineering License: Declared as Free, no proper license given.
This is a small tool to deal with CSS animations. It allows you to add custom delays between the animation’s iterations by accurately calculating the keyframe percentages. Here you will also find a set of pre-defined animations that you can copy and paste into your project right away
Creator: EggBox License: Declared as Free, no proper license given.
Tachyons is a prototyping tool (that in fact is just a collection of reusable modules) for crafting clean and neat fully responsive interfaces with a hassle-free and optimized code
Apostrophe is a basic CMS for building content-centered websites. It is constructed with the help of Node.js and MongoDB and provides high performance for different tasks.
Fontastic is a service for generating icon fonts from your material. If you do not have graphical stuff, you can easily use more than three thousand pictograms that are freely available on the portal.
Creator: Fontastic License: Declared as Free, no proper license given.
The term “responsive images” has come to mean “responsive images in HTML”, in other words, the srcset and sizes attribute for and the element. But how do the capabilities that these things provide map to CSS?
CSS generally wasn’t really involved in the responsive images journey of the last few years. That’s for good reason: CSS already has the tools. Responsive images was, in a sense, just catching up to what CSS could already do. Let’s take a look.
srcset in CSS
In HTML, srcset is like this (taken from the Picturefill site):
There is a difference here, though. As I understand it, the way srcset is spec’d out is a bit like a suggestion. The attribute and value provide information about what is available and the browser decides what is best at the moment. Or at least, it could, if browsers chose to implement it that way. With a @media query, what is declared shall be.
Resolution media queries are fairly well supported:
It’s much closer to srcset, not only because the syntax is similar, but because it allows for the browser to have a say. According to the (still in draft) spec:
The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.
There is no perfect 1:1 replacement for srcset in CSS, but this is pretty close.
sizes in CSS
The sizes attribute in HTML is very directly related to CSS. In fact, it basically says: “This is how I intend to size this image in CSS, I’m just letting you know right now because you might need this information right this second and cannot wait for CSS to download first.”
img {
width: 100%;
}
@media (min-width: 40em) {
/* Probably some parent element that limits the img width */
main {
width: 80%;
}
}
But sizes alone doesn’t do anything. You pair it with srcset, which provides known widths, so the browser can make a choice. Let’s assume just a pair of images like:
The information in the markup above gives the browser what it needs to figure out the best image for it. The browser knows 1) it’s own viewport size and 2) it’s own pixel density.
Perhaps the browser viewport is 320px wide and it’s a 1x display. It now also knows it will be displaying this image at 100vw. So it has to pick between the two images provided. It does some math.
375 (size of image #1) / 320 (pixels available to show image) = 1.17
1500 (size of image #2) / 320 (pixels available to show image) = 4.69
1.17 is closer to 1 (it’s a 1x display), so the 375w image wins. It’ll try to not go under, so 1.3 would beat 0.99, as far as I understand it.
Now say it was a 2x display. That doubles the amount of pixels needed to show the images, so the math is:
375 / 640 = 0.59
1500 / 640 = 2.34
2.34 wins here, and it’ll show the 1500w image. How about a 1x display with a 1200px viewport?
375 / (80% of 1200) = 0.39
1500 / (80% of 1200) = 1.56
The 1500w image wins here.
This is kinda weird and tricky to write out in CSS. If we just think about 1x displays, we end up with logic like…
If the viewport is less than 375px, use the 375w image.
If the viewport is larger than 375px but less than 400px, use the 1500w image (because otherwise we’d be scaling up).
At 400px, the image moves to 80vw wide, so it’s safe to use the 375w image for a littttttle bit ( (between 400px and 468px)
Over 468px, use the 1500w image.
Which we could write like:
img {
background-image: url(small.jpg);
}
/* Only override this if one of the conditions for the 1500w image is met */
@media
(min-width: 375px) and (max-width: 400px),
(min-width: 468px) {
main {
background-image: url(large.jpg);
}
}
In this exact case, a 2x display, even at a really narrow width like 300px, still requires 600px make that 1.0 minimum quality, so we’d also add that to the logic:
.img {
background-image: url(small.jpg);
}
/* Only override this if one of the conditions for the 1500w image is met */
@media
(min-width: 375px) and (max-width: 400px),
(min-width: 468px),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(large.jpg);
}
}
The complexity of this skyrockets the more breakpoints (sizes) and the more provided images. And it’s still not a perfect match for what responsive images (in HTML) can do, since it doesn’t allow for browser discretion (e.g. the potential for a browser to consider other factors [i.e. bandwidth] to choose an image).
Probably? I’d love to see a Sass @mixin that would take all these params, factor in the image sizes (that it figures out itself by hitting the disk), and spits out some quality responsive-images-in-CSS code. Maybe there is even a way to combine resolution queries and image-set() syntaxes?
Are we actually doing this?
I’m curious how many people are actively handling responsive images in CSS. Perhaps even in a middle-ground kinda way of just swapping out larger images at large breakpoints? I wonder if, because picture/srcset is often automated, that actually has a higher adoption rate than responsive images in CSS does?
.
