Wallpaper* is a Time Inc magazine which gives its readers an insight into architecture, design, fashion, travel, and lifestyle. Wallpaper* not only is the world’s most important design and lifestyle magazine brand but also happens to be a client of ours. Focusing on the luxurious creates an obligation for the magazine’s digital publications to look stunning as well, therefore Wallpaper* have chosen Froont to create custom pages for their online bespoke projects. In order to get the most out of Froont, Wallpaper* chose our Froont Publisher plan which gave them even more design freedom without being locked into rigid templates. That allowed Wallpaper* to create pages using Froont while still implementing their own menu navigation and header without the help of a developer, all thanks to the custom code export feature available in the Froont Publisher plan.

After creating multiple bespoke pages using Froont Publisher, Wallpaper* got in touch with us regarding Wallpaper* 21 Guest editors  —  the largest digital publication in the history of the magazine. The project was planned in order to celebrate the 21st birthday of Wallpaper* magazine in which they would showcase the 21 guest editors, including Karl Lagerfeld, Frank Gehry, Dieter Rams, Zaha Hadid, and others, who have contributed to the magazine in the last 21 years.

For the purpose of the project different custom-made components were built by the Froont team specifically for the new Wallpaper* campaign. From custom cursor images to background sound, these custom-tailored features were implemented in the campaign while still being built exclusively using the Froont platform. The Froont Publisher custom library feature allows Wallpaper* to save these custom-built parts and re-use them in future projects.

But don't take our word for it. This is what Fraser Clark, Senior Digital designer at Wallpaper*, had to say regarding the partnership:

“Froont was the perfect tool for our biggest ever online project. Flexible and fast, we were able to create 21 pieces of beautiful editorial, using our own typefaces and style treatments. It was also great to visualise pages across multiple breakpoints and the preview function allowed us to test thoroughly on various devices, with no assistance from developers, promoting a streamlined work flow.”

Froont Publisher has given Wallpaper* total control and freedom over the final design. All projects support native Wallpaper* page elements like navigation and footer, thus speeding up the process from an idea to a launched project. To engage with their digital audience of around 2 million unique monthly users, we ensure that the experience is flawless both on desktop and mobile devices.

Take a look at the finished campaign here.

If you or your company are interested in creating custom pages like these while maintaining your brand identity, check out Froont Publisher. It allows you to create custom, bespoke or tailor-made pages that easily integrate into your existing CMS. You can have total design freedom without being locked into existing templates, and the output is a static HTML. Contact us at sales@froont.com if you are interested in a demo!

We are happy to announce our new line of products for business. Froont Instant is all about integration with your existing services to help you add new capabilities to your products and grow your business. Both products – Instant Page Builder and Page Customizer can be embedded directly into your service with our powerful APIs. The user interfaces are intuitive and easy to use so that users can get the results instantly.

Froont Instant Page Builder

Now it's easy to extend your existing product or service by adding a page building feature to it. Simply connect to our API, and you're ready to go. Our default page components are optimized for lead generation pages, but the component library can be customized to fit your visual language or made completely from scratch to match with your data structure – static and dynamic. Your users can build landing pages for marketing campaigns, specialized microsites or publish digital books. As long as the page content can be divided into repeatable blocks Instant Page builder can handle it.

Froont Instant Page Customizer

Froont Instant Page Customizer is best suited for pages that are similar across the whole user base. For instance, you have a service that creates event landing pages. With the Instant Customizer, you can give your users the ability to personalize the design – either just by changing the colors and content or the whole layout.

Why to choose Froont Instant?

The end-user expects the ability to personalize the content she creates, but building and maintaining your own page builder or customizer in-house can take away the attention from your core business. Instant Builder and Customizer can save months of development time and give you a feature that's easy to use and your users will love. We are improving Froont Instant constantly, so that you can focus on what you are good at.

Features that make our Instant products stand out:

• Responsive from the start
• Data is stored on your side
• Custom tailored components for your business
• Easy to add new component blocks using Froont Designer
• Define the level of customization for users based on the plan they are on

Want to learn more? Check out Froont Instant.

About Froont

We started Froont responsive page builder in 2012. Since then we have built one of the most flexible page builders in the market. Now we bring the know-how we learned into the B2B market with our Froont Instant product line for businesses.

I’m a designer and co-founder of web design tool Froont. Building future tools is my work, and this is how I see the design tool landscape of 2016 and what to expect in 2017.

In the design world, we live in exciting times. It seems that the number of design tools in 2016 has started competing with a number of tools for developers. Finally!

Historically, developers had more tools than designers. Most likely because they can build things for themselves, whereas fewer designers can do it alone.

Design space is getting serious

2016 started to show some signs that the whole design tool space is maturing. InVision acquired Macaw, then Silver Flows, then Easee, Muzli and some more. Marvel acquired Pop, Google acquired Pixate and announced new set of tools  —  Gallery and Stage. Figma is working on some interesting things while Adobe tries to catch up. I have a feeling that 2017 will be fascinating.

The winning approach to design

Once there was a hope that design and code will merge and designers will be able to deliver it all. Apparently, we aren’t there yet, and the rise of prototyping tools proves the point.

There is no shortage of prototyping tools. The reason seems obvious now  —  making sure the project works on all screens and devices isn’t easy. Designers don’t want to take the blame when something goes wrong and prefer clickable prototypes.

A better workflow

Now it’s pretty clear  —  there won’t be one tool that can solve all problems. It’s rather a set of tools that integrate with each other. The Sketch is the ultimate example of that. It creates a new challenge, though  —  how to organize everything into one workflow where teamwork, client feedback, design deliverables and future improvements work together. Developers were first at solving that again  —  version control like Github is the core of any serious development, yet for designers, even working as a team needs lots of tinkering. Tools have tried to solve that before and some are in the making.

Design with real data

Another hope that took off in 2016 is design with real data. That makes lots of sense (Thanks, Josh!) as it helps us make better decisions and find the edge cases before development starts. What seems most amazing here is that it looks like one blog post created this whole paradigm shift. Wish more people would write about better solutions!

Content is the king

Design for various devices and screen sizes has lots of limits regarding how far we can go with layouts. Content is the king again! That means more emphasis on written words, meaningful photography, illustration, and typography. That makes even more sense knowing that the content we create must be consistent and able to survive across web pages, apps, blogs, and social media.

What’s missing or a wish list for 2017

Sketch started as a better, more focused Photoshop for UIs. Figma works to become a better Sketch and Subform joins the game. The new ideas that prove themselves end up in other tools. In any case, that’s evolution. It’s easy to see what’s happening, but let’s look at what hasn’t happened at scale.

Our tools aren’t smart

I wish more tools would guide us through the design process. Not only doing what we tell them to do, but notify us when we could improve. Or at least inform us of better options (improve accessibility, readability, basic design theory, etc.). Something like spelling suggestions or optical kerning but for design decisions. The same applies to smarter default values.

AI and machine learning

The design is a system, and humans aren’t great at seeing all possible options at once. We’re even less great at fixing problems we don’t see. If you ever wondered how an experienced designer could come to the solution faster than someone who is just starting, it’s because of experience, of course. A big part of this experience is about processing all the possible combinations, something that computers could help with.

Bringing atomic design principles to design practice

Currently our visual design tools have no clue about the context. We still draw boxes and pretend those are buttons. If there would be a way to merge atomic design principles with our design tools it would simplify a lot.

No matter how you look at the landscape of design tools one thing seems sure — there will be more of them, not less. Interactive design is evolving as we speak and new ways of using the web and apps bring new challenges.

If you feel that I overlooked your favorite tool, please add in the comments below.

Redesigning is overrated. It can seem like a quick and easy way to get rid of all of your problems, but it rarely is. Here at Froont we helped hundreds of different organizations and businesses create a new website, and being a startup ourselves this is what we learned.

Problem first, redesign later

Or as Hans Solo put it, “Escape now, hug later.” Redesigning is like hugging. It feels good, but you might die if you don't get your priorities straight. All design should have a clear goal or a problem to solve first. If your website was made 10 years ago, then looking outdated could be a valid problem. If your conversion rate is at its all time lowest, that is a valid problem too. Here are five examples that should lead you to seriously consider building a new website:

1. The current design isn't flexible enough

This is a big one and it's often misinterpreted. It's important that design is there to help move forward quicker rather than get in the way. Good design speeds up decision making, gives space for experiments, is easy to maintain and update. Good design is flexible but has a set of rules and limitations. The technology and visual side work together, not against each other. If you have to set up a meeting for each new section, you're doing it wrong.

Avoid thinking purely about design features,instead spend time thinking about systems. Modular UI systems is one of the approaches that will solve this issue. Create a system where a designer can change the color of a button and a developer can design a new page.

2. The web changed before you did

So you missed that responsive web design thing, thinking it was soon to fade away buzzword. Change happens, sometimes very quickly. We all make mistakes and a redesign is a great opportunity to improve much more than just the visual side of things. So, when do you pay attention to trends? Here’s a checklist for that:

By improving loading speeds and making the page accessible on your visitor’s devices, you not only improve your conversions, but you’ll also rank higher on search engines. Google’s ranking algorithm rewards mobile friendly pages and soon loading speeds for mobile pages will influence your ranks as well.

3. Your product or service has changed

A major version update, a big pivot, a new headline product – all of this might be asking for a new design. It's also possible that your biggest change is simply your marketing message. For instance, you change the focus of your product from B2C to B2B. Simply put, make sure the tone and look of your website send the same message as your product and marketing does. Otherwise you can end up with the wrong audience for the right product.

4. You haven't updated in ages

This happens. You get busy building and selling your product and when you turn around, a few years have passed. It's totally fine to tell your audience that you're still alive and kicking. Following or even setting trends in this case is a great way to send the message to your audience that you care about them and about the quality of your service.

5. Be better than your competitors

There are times when you can benefit from standing out and there are times when you’re better off blending in. When you are just starting, following the market leaders can send a message that you are serious about your business. Visitors will be used to the patterns and design you're using.

Then again, standing out sends a message that you are different. There is no formula here. When Dropbox started, file sharing was ugly and cumbersome They went the opposite direction by standing out with simplicity in the design and the product. If you're building a similar product now, standing out with an archaic interface wouldn't be a good idea. Instead look for ways build upon what’s been set and improve it.

Design can set you apart from your competition, but blending in,in terms of simplicity, using patterns people are used to is always a good idea. Keep in mind that if you're doing a good job with your product or service, others will follow you.

When redesign isn't the solution:

“A friend of mine doesn't like it!” Opinions suck, as long as this “friend” isn't a customer of yours. For every “friendly opinion” you should consult with 9 customers. We wrote a full blog post on getting insight with interviews.

Website performs great, let's change something? Just say “No.”

Your website feels outdated to you. It's very unlikely that others have seen your page as much as you have. It's natural to get used to what you have and lose the initial sparkle . If you're lucky enough and most of your users visit everyday, then your site is most probably performing just fine as it is.

A competitor launched a new website. Instead of blindly following competitors or design trends, it makes sense to look deeper – what are the reasons for that redesign? What problem are they solving? Do you even have the same problem?

A new design will make people talk about my company. This could work. Look at Airbnb or Instagram – people do talk about this kind of news. Especially when the product has millions of users. Or the product is meant for designers. If neither is true for you, maybe start by improving the product, marketing and sales and get that growth in place.

Conclusion

Be prepared. Whatever the reason for redesigning your website, keep in mind to allocate enough resources. A redesign will take time to define the problem, come up with solutions, make the decision and measure the results, make conclusions and fix the mistakes. If you haven't made a mistake, you haven't been looking deep and hard enough. Including management in the redesign process is also a great idea and if you’ve never done it, it's worth following a framework. Design sprints from designers at GV is a great place to start.

Today we are excited to announce a new version of our responsive web design tool Froont. We've been working on it for quite a while. Focusing on the product itself is also the reason why we were keeping low profile in terms of the communication in the last months. Check out our new product video! There is a quick video of two new features – Animations and Popups:

What's new in v1.8

There are plenty of stability and performance fixes since our previous version update. As well as new features that allow building more sophisticated web pages. These are the major ones:

Main features:

• Popup (lightbox) view for images and any other type of content
• On load animations directly from the right hand-side panel (thanks, Dan!)
• Thousands of royalty free images from Unsplash right in the library
• Linea icons are added to the library. Now you have thousands of icons to choose from

Improvements

and fixes are made on a daily basis, this is a list of the main ones

• Improved code export
• Auto alignment improvements pressing horizontal and vertical alignment buttons
• A better grids mechanism, that allows easy adding new columns, reversing the order and having equal height columns
• You can add color overlays on background images
• Enhanced navigation widgets that allows adding logo and make it stick on the top of the screen
• Text and object classes (styles) allow changing the look of multiple elements at once
• Enhanced library widgets that automatically update to the document classes
• Alt and title properties for a better control over SEO
• Improved paste/delete performance and stability
• Resetting changes in the widget or resetting the whole breakpoint is easier (new UI)
• Updated dragging/resize engine – by visually resizing elements, minimal width is changed instead of the width
• Updated the mechanism that handles corrupted projects so that it always reverts to the latest backup
• Borders and shadows pane is added for easier access

What's next

Froont 2 is already on the way and we are rolling out beta version soon. Some of the features are a native multi-page support, advanced galleries that allow easy switching between different gallery types and much more. You can sign up on the beta list here.

The most relevant source of inspiration and considerations when designing things are people. This inspiration can be deeper than understanding what people do, why they do it and what they say they need; it is ultimately about understanding what they truly value. Building empathy with the users can be inspirational and help define the overall experience.

Have a conversation, don’t interview

There are numerous books and articles out there explaining how to do interviews, observations, surveys and etc; the user research does not have to be that complicated. Designers can simply go out, meet people in the real context and have a friendly chat with them. It will be more valuable if you have a “conversation” with people instead performing an “interview”. The longer, the more friendly and the deeper the conversation, the more you learn about their values.

Uncover the values not the needs

The challenge for designers is not only to understand what people see, feel, and experience but to uncover what they value. People may be willing to express their needs but they don't usually verbalize what they truly value. It's the designer’s job to learn about the needs and use them to realize the values. These Human Values are transformed into the Design Values with which the design is guided.

“I need to see what happens to my info after I click on Submit”
The user values Transparency

Meet extreme users, avoid average ones

Instead of going out and talking to 30 people, you can select a handful of people and have a deeper conversations with them. It is, however, important to choose the right person to talk to. Usually “Extreme Users” are the ones that best emphasis the desires and needs, even though we are not designing for them but we can learn a lot from them. Extreme can be extremely for or even against the topic you are designing for. We need to give people the opportunity inspire us and even do ideation for us.

Pull out stories, not opinions

The best question to ask is not asking anything, just let people talk! Of course you want to guide the conversation so you remain focused on the topic, but having a list of questions could take away the opportunity to hear things you would never have thought of. Instead of trying to arrive at a conclusion, look for stories. Statistics or trends are mainly useful for marketing purposes, design is all about storytelling.

Tell me about yourself?
Cool tell me more
Really, any other story?
How about …..?

Seek user feedback earlier in the design journey

It always helps to share design ideas with the users and ask how they feel about it. The mistake we usually make is that we present our polished design ideas to the users and then ask them what they like and what they don’t like about them. Alternatively, you can use low fidelity sketches or prototypes for user testing earlier in the design journey. This would allow people to give you honest feedback on the bigger picture and the values rather than details such as colors or the shape of the buttons.

Why do we need to think of the user again?

Regardless of how user research is done, the final goal is to make a personal connection with users and remain informed and inspired by them. There is no one formula for user research, and we don’t always need to start from the users. As long as you feel you have built empathy with the users, any design decision that feels right is probably a good decision.

One of the great benefits of digital design is that it can be tested and measured. Yet so many aren’t doing that. Partly we can blame the workflow, where the client buys the design from the designer and focuses on aesthetics, not the results. But what if that could be included into our deliverables? What if we provided the designs and helped improve them? I admit it's scary, since the new design might perform worse that the previous one. Then again, what if we improved the design based on the data we gathered and ended up doubling or tripling the conversions? The gains seem to be way bigger than the scars to your ego.

To test or not to test

Although testing is a powerful tool used by pros, there is no reason why you shouldn’t test simpler sites even if it's a portfolio or a marketing landing page. The more abstract and high level the design the more value you get from your tests. If you use simple rough wireframes, the focus is on the product and its values rather than details and visuals.

There are three main types of testing:

• Testing the IF. Is there an interest for your yet non-existing product or feature? Are people interested in the feature? Will people buy it? It is way more efficient to start testing before building the product.
• Redesigning an existing page or a part of it, like revamping a landing page design or testing a new price. Colors and micro interactions don't usually need much testing at the beginning, they need a smart designer!
• Optimizing an existing product or page. Can be applied to the visual design or the whole user flow funnel. Big impact can be achieved by changing the placement in the funnel, for instance, by showing registration form after visitors have actually tried the product.

Misconceptions of testing

Testing can give a lot of insights and data if done right, but also there are plenty of ways to screw it up. First of all, testing and gathering data is not a replacement for decision-making. An initial hypothesis will help a lot, otherwise you might drown in data. There are also situations where you are better off using your instincts.

Additionally, instead of approaching your average users, it's more interesting to talk to “extreme” users who really love or hate your product. Even though you are not designing for them, they emphasize the strong and weak aspects of your product more strongly.

A/B testing

A/B testing or split testing is something you hear most often. The concept here is simple – all your traffic is split into two equal parts where one sees design version A, and other sees version B. The version where the goal is accomplished more often is the winner (e.g., more users sign up).

A/B testing can be used at any stage and usually on bigger websites several tests run simultaneously all the time. It's great to test an idea to optimize what you already have built.

Heatmaps and scrollmaps

Heatmaps and clickmaps can show you where the users are clicking. It can help to understand which are the most prominent areas on your page and where an extra link can be added. It also makes sense to test how far users scroll and what are they're actually reading – this is where scrollmaps can help.

Heatmaps are great if you're testing an existing page and want to improve conversions. One thing to keep in mind – check if the service you're planning to use supports responsive web design.

User testing

One of the oldest techniques is to sit down with a person and learn how they're actually using your page or product. Set up some goals to achieve and watch if they get stuck somewhere. Great help can come from recording the session (we use ScreenFlow a lot, as it will record not only the screen, but also the expression and voice of the user). Another trick is to use tools that record sessions secretly, like Inspectlet. No matter what you use, having video recordings will help when you're having discussions with your team or the client.
Another great process comes from the guys at Google Ventures. They took it to the next level and are calling it a Design Sprint. The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers

Great for strategical decisions, helps create a hypothesis for improvements.

Surveys

Another great and simple technique is to send out surveys. There are plenty of tools out there but in most cases Google Docs will work just great. The most important part are the questions and to take in account the size of your audience. The bigger the audience and more precise the questions, the smaller the chance to be biased by your own assumptions. A simple starting point can be to measure your users' net promoter score, i.e., how likely people are to recommend your page or product to others. We use Fan Exam for that.

Surveys are a quick and easy way to confirm a hypothesis or determine the general “mood” of your users, but they are less valuable for strategical decisions.

Summary

Testing by itself isn’t the goal – making a great, high performing design is. There are plenty of reasons why not to test – it might cost some developers time, results might come in too slowly, sometimes it's simply painful to see that your assumptions were so wrong. Yet I would suggest to test as soon as you can, just choose the technique that you can manage.

In FROONT our two favorite testing methods are A/B tests, as they are quick and easy to make decisions on, and user testing in smaller groups. We learned that it takes just a few users to diagnose the main product issues and that helps us to form a hypothesis for future tests.

Understanding how positioning in the web works is crucial for responsive web design, as it allows us speak the same language with developers and helps make better design decisions. Compared to static design tools (Photoshop, Illustrator, Sketch) it's more complex as well, because the position depends on everything around it; scrolling, screen size and other factors.
To complicate things even more, different types of position in the web have names that are quite confusing – Static, Absolute, Relative and Fixed – where static isn’t really static and absolute depends on the placement. Therefore here is a short, visual manual of what is what.

The Z-index

Before we jump to positioning, lets explain what the Z-index is as it affects all types of positioning in some way. So Z-index is a simple way to tell which element is in front of another one, similar to layers in the static design apps.

DO: Use for buttons, clickable stuff.
DON'T: Avoid text being on top of that clickable stuff as it becomes unclickable...

Static position

Static is the default positioning type. Although the name suggests that nothing is moving it isn’t the case. Static means elements are static to the flow – if one moves, another will move as well.

DO: Your safest bet it will scale on all browsers well. Adding Min and Max limits horizontally and vertically will help to keep the design perfect.
DON'T: Watch out for text blocks with changing content as it can break the design.

Absolute position

Absolute positioning defines the element based on X and Y property. The tricky part is that it will be absolute to the parent element that has a position of Relative, Absolute or Fixed. If there are none, it will be absolute to the page. Absolutely positioned elements don’t care much about the flow, meaning they live in their own universe and aren’t affected by anything around them. It will appear on top of any static positioned element.

DO: A menu or logo that needs to be always on the top of the page? Go for it!
DON'T: Absolute and Responsive aren't best friends.

Relative position

Relatively positioned elements behave exactly like static ones, but they serve as a local frame of reference for absolutely positioned child elements.

DO: Use on a parent container for absolute positioned elements.
DON'T: If a logo or a badge has to always sit on top of the screen, don't wrap them in a relative element.

Fixed position

Fixed means the position will always be locked to the size of the browser's window (viewport).

DO: Navigation that is always visible on the top of the screen? Yes!
DON'T: If something is behind a fixed element it won’t be clickable.

Real life

In real life the type of position is often changed as we go and they are mixed together. For example if you want a banner be scrollable until it reaches the top, then at first it will be absolute, but then it will become fixed by adding some JavaScript.

These are the basics, but there is more. What if you want to align two elements side by side? This is where float properties, inline blocks and margins come into play (we'll explain about those soon). In FROONT we mainly combine static positioning with margins as it is easier to maintain the code later.

My interest in coding my designs was lost at the the moment I realized how much trickery had to be done to make it happen. Seemingly simple issues could be solved in so many ways. Yet it still might not have worked on some browsers.
One thing that always made me wonder is why there's a division between design and code. Why difficult things become more simpler, but simple things become more difficult?
So instead of debating whether designers should learn code or developers should learn design, let's set some common ground on how design for the web evolved and how we could bridge the gap between code and design.

The dark ages of web design (1989)

The very beginning of web design was pretty dark, as screens were literally black and only few monochrome pixels lived therein. Design was made by symbols and tabulation (Tab key). So let's fast forward to the time when Graphic User Interface was the main way of surfing the web – the Wild West era of tables.

Tables – The beginning (1995)

The birth of browsers that could display images was the first step into web design as we know it. The closest option available to structure information was the concept of tables already existing in HTML. So putting tables within tables, figuring out clever ways to mix static cells with fluid cells was the thing, started by David's Siegel's book Creating Killer Sites. Though it didn’t feel totally right since the main purpose of a table is to structure numbers, it was still the common method to design the web for quite some time. The other problem was the difficulty to maintain these fragile structures. This is also the time when the term slicing designs became popular. Designers would make a fancy layout, but it was up to developers to break it into small pieces and figure out the best way to make that design work. On the other hand, tables had some awesome features like the ability to align things vertically, be defined in pixels or in percentages. The main benefit was that it was the closest to a grid we could get back then. It was also the time when so many developers decided not to like front-end coding.

JavaScript comes to the rescue (1995)

JavaScript was the answer to the limitations of HTML. For instance, need a popup window, want to dynamically modify the order of something? The answer was JavaScript. However, the main problem here is that JavaScript is layered on top of the fabric that makes the web work and has to be loaded separately. Very often it is used as an easy patch for a lazy developer, yet it is very powerful if used wisely. Nowadays we prefer to avoid JavaScript if the same feature can be delivered using CSS. Yet JavaScript itself stays strong as in front-end (jQuery) as on the back-end (Node.js).

The golden era of freedom – Flash (1996)

To break the limitations of existing web design, a technology was born that promised a freedom never seen before. The designer could design any shapes, layouts, animations, interactions, use any font and all this in one tool – Flash. The end-result is packed as one file and then sent to the browser to be displayed. That is, as long as a user had the latest flash plugin and some free time to wait until it loads, it worked like magic. This was the golden era for splash pages, intro animations, all kinds of interactive effects. Unfortunately, it wasn’t too open or search-friendly and certainly consumed a lot of processing power. When Apple decided to abandon it on their first iPhone (2007), Flash started to decay. At least for web design.

CSS (1998)

Around the same time as Flash, a better approach to structuring design from a technical standpoint was born – Cascading Style Sheets (CSS). The basic concept here is to separate content from the presentation. So the look and formatting are defined in CSS, but the content in HTML. The first versions of CSS were far from flexible, but the biggest problem was the adoption rate by browsers. It took a few years before browsers started to fully support it and often it was quite buggy. This is also the time when one browser had the newest feature, while another was lacking it, which is a nightmare for a developer. To be clear, CSS isn’t a coding language, it is rather a declarative language. Should web designers learn how to code? Maybe. Should they understand how CSS works? Absolutely!

Mobile uprising – Grids and frameworks (2007)

Browsing the web on mobile phones was a whole challenge in itself. Besides all the different layouts for devices, it introduced content-parity problems – should the design be the same on the tiny screen or should it be stripped down? Where to put all the nice, blinking ads on that tiny screen? Speed was also an issue, as loading a lot of content burns your internet money pretty fast. The first step to improvement was an idea of column grids. After a few iterations, the 960 grid system won, and the 12-column division became something designers were using every day. The next step was standardising the commonly used elements like forms, navigation, buttons, and to pack them in an easy, reusable way. Basically, making a library of visual elements that contains all the code in it. The winners here are Bootstrap and Foundation, which is also related to the fact that line between a website and an app is fading. The downside is that designs often look the same and designers still can’t access them without knowing how the code works.

Responsive web design (2010)

A brilliant guy named Ethan Marcotte decided to challenge the existing approach by proposing to use the same content, but different layouts for the design, and coined the term Responsive web design. Technically we still use HTML and CSS, so it is rather a conceptual advancement. Yet there are lot of misconceptions here. For a designer, responsive means mocking up multiple layouts. For the client, it means it works on the phone. For a developer, it is the way how images are served, download speeds, semantics, mobile/desktop first and more. The main benefit here is the content parity, meaning that it's the same website that works everywhere. Hope we can agree on that, at the least.

The times of the flat (2010)

Designing more layouts takes more time, so luckily we decided to streamline the process by ditching fancy shadow effects and getting back to the roots of design by prioritising the content. Fine photography, typography, sharp illustrations and thoughtful layouts is how we design now. Simplifying visual elements or so called Flat design is also part of the process. The main benefit here is that much more thought is being put into copy, into hierarchy of the message and content in general. Glossy buttons are replaced by icons and that allows us to use vector images and icon fonts. Web fonts deliver beautiful typography. The funny thing is, the web was close to this from the very beginning. But well, that’s what the young years are for.

The bright future (2014)

The holy grail of web design has been to actually make it visual and bring it into the browser. Imagine that designers simply move things around the screen and a clean code comes out! And I don't mean changing the order of things, but having full flexibility and control! Imagine that developers don't have to worry about browser compatibility and can focus on actual problem solving!

Technically there are a few new concepts that support the move into that direction. New units in CSS like vh, vw (viewport height and width) allow much greater flexibility to position elements. It will also solve the problem that has puzzled so many designers – why centering something vertically in CSS is such a pain. Flexbox is another cool concept which is a part of CSS. It allows to create layouts and modify them with a single property instead of writing lot of code. And finally web components is an even bigger take. It is a set of elements bundled together, i.e. a gallery, signup form etc. That introduces an easier workflow, where elements become building blocks that can be reused and updated separately.

What are your thoughts on the future of the web?

Note: Years in brackets indicate the beginning. It all evolved with a different pace over time. Therefore 1998-2007 aren't empty at all, it is where the evolution took place.

Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we'll focus on layouts (yes, responsive goes way deeper than that and if you want to learn more this is a good start).

Responsive vs Adaptive web design

It might seem the same but it isn't. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.

The flow

As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.

Relative units

The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That's where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).

Breakpoints

Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution – it can get messy quickly when it's difficult to understand what is influencing what.

Max and Min values

Sometimes it's great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don't go over 1000px.

Nested objects

Remember the relative position? Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don't want to scale, like logos and buttons.

Mobile or Desktop first

Technically there isn't much of a difference if a project is started from a smaller screen to a bigger (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first. Often people start from both ends at once, so really, go and see what works better for you.

Webfonts vs System fonts

Wanna have a cool looking Futura or Didot on your website? Use webfonts! Although they will look stunning, remember that each will be downloaded and the more you'll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except when the user doesn't have it locally, it will fall back to a default font.

Bitmap images vs Vectors

Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or a gif, for vectors the best choice would be a SVG or an icon font. Each has some benefits and some drawbacks. However keep in mind the size -- no pictures should go online without optimization. Vectors on the other hand often are tiny, but some older browsers won't support it. Also, if it has lots of curves, it might be heavier than a bitmap, so choose wisely.

Feel that we left out something important? Let us know in the comments!