With the last big design adaptions of the STYLIGHT homepage, we finally committed to go completely mobile-first in our design & development process. Starting with Sketch files, over prototypes, to CSS & JS – the mobile viewport is always the starting point. It helps to focus on the core of your products and delivers more benefits! Nevertheless, it also introduces some issues if you want to support a good experience on legacy browsers like IE8.
The problem, Javascript-based solutions & more issues
As we know legacy browsers like IE8 don’t support media-queries. So when choosing a mobile-first development approach, the browser displays the mobile version since the CSS for bigger viewports is simply interpreted as unknown code and gets ignored. A current solution is CSS3 media query polyfills e.g. respond.js or css3-media-queries.js. These solutions rely on Javascript, which introduce performance issues and cross-domain security issues. When we gave it a try, it rendered our homepage completely messed up.
Why not ignore IE8 completely?
It’s not my problem that these people use a 6-year old browser, you might think! It’s a minority anyway! True, but compared to frameworks like Bootstrap or Foundation, which act user-independent, you shouldn’t ignore your users by making decisions on worldwide user statistics. The user is king and when your business is profit-based, you should pay extra attention to please these “minorities”.
Supporting legacy browsers eats up much of a developer’s time and slows down innovation. It’s indeed one of the hardest things to find a solution that works for your team. In the end it’s a tradeoff.
Our solution
In our current web app we rely on LESS files structured according to the ATOMIC Design introduced by Brad Frost.
Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
Up till now our media-query specific CSS was laying directly in the corresponding files. To support IE8 we copied the necessary CSS manually into our HTML header. The problem is that this code is not updated automatically, so it simply doesn’t scale.
[code language=”css”]/** pagination.less **/.pagination {
width: 100%;
margin: 20px auto;
}
@media (min-width: 768px){
.pagination {
max-width: 700px;
margin: 0 auto;
}
}
[/code]
[code language=”html”]/** In the HTML header **/
<head>
<link href=”stylight.css” rel=”stylesheet” type=”text/css”>
<!–[if lt IE 9]>
<style>
/** CSS from media query copied by hand **/
</style>
<![endif]–>
</head>
[/code]
So instead of including the CSS directly into the media-query we replaced it with an import. The code of the media-query is moved to another file named e.g. pagination768.less – the number in this case is the breakpoint. This file then can be imported in an additional stylight-ie.less file which is loaded dependently in the header. So every time the LESS files are changed, the IE8-specific file is updated automatically. Besides that it also prevents you from generating spaghetti-code.
For structuring issues, the component specific LESS files are grouped in another folder under the ATOM folder. Of course this means that another HTTP-request is necessary, but since most people don’t use IE8 on 3G networks anyway this is neglect-able in my eyes.
[code language=”css”]/** pagination.less **/.pagination {
width: 100%;
margin: 20px auto;
}
@media (min-width: 768px){
@import “pagination768.less”;
}
[/code]
[code language=”css”]/** pagination768.less **/
.pagination {
max-width: 700px;
margin: 0 auto;
}
[/code]
[code language=”html”]/** In the HTML header **/
<head>
<link href=”stylight.css” rel=”stylesheet” type=”text/css”>
<!–[if lt IE 9]>
<link href=”stylight-ie.css” rel=”stylesheet” type=”text/css”>
<![endif]–>
</head>
[/code]
