Hello, Readers! This month, we have the usual mix of minimalist sites, traditional-feeling sites, more than a few asymmetrical sites, and a couple of wildly experimental sites that look really cool, but are practically unusable.

I mean, things get wild in here: Hell freezes over; oil and water mix; I say something nice about a parallax effect—it’s mayhem, I tell you. Mayhem!

pixelindustry

If pixelindustry’s agency portfolio looks a whole lot like a theme, that’s because they make themes. So while it may not be the world’s most original design, it certainly plays to their strengths, and showcases their talents.

This may be the only case where a site “feeling like a theme” is a positive thing.

David Alexander

David Alexander’s portfolio throws you right into the work with a large, image-focused, fully-screen-friendly layout. If your content is light on text, and heavy on imagery, this is one great way to do it.

Martine aimait les films

The portfolio site for Martine aimait les films, a video production company, embraces that divided-in-half feel that I love. Combined with the short, high-quality clips used as video backgrounds, the whole site feels modern and professional, and seems to fit the style of the videos presented.

Aycan Elijah Yilmaz

Aycan Elijah Yilmaz’s portfolio is the second one I’ve seen embrace the “galaxy beard”. Galaxybeards aside, this is a pretty, minimalist site with a lot going for it.

Chris Cook

Chris Cook’s portfolio is simple, largely monochrome, with decent typography. The thing I really like about it, however, is the use of a subtle background pattern. I know that background patterns were basically abandoned along with skeuomorphism, but this is a site that does it right.

I’d like to see more subtle patterns used here, and there. We might even wean ourselves off of our near-complete dependence on huge (and thus slow-to-load) photos.

whitelist

The site for video production studio whitelist goes full 90s multimedia presentation, but with modern technologies and style. I’ve often railed against the usability problems this kind of design presents, but that doesn’t mean it isn’t pretty.

You could drop most of the fancy JS and animation, and what you’d have left is a beautiful, minimalist site. I especially like how it makes use of less-common geometric shapes both to decorate, and to draw the eye to UI elements and important content.

4musketier

I’m forced to assume that 4musketier is a design agency, because though I can’t read German, that’s what’s in the portfolio section. It’s not too imaginative. It’s really a textbook flat design that seems dedicated to a pastel version of the rainbow itself, rather than a specific color scheme.

Still, it looks good, with excellent typography, generous white space, and more. The whole design feels like it was executed with precision, and that alone is worth a look.

Lachlan Kincaid

Lachlan Kincaid’s portfolio brings us back into the world of minimalism, with a more literal definition of “white space”. It’s a simple site that shares the emphasis between the text and imagery, in an effort to give proper context for all of the work presented. It’s an effort that I appreciate.

Electric Enjin

Electric Enjin’s portfolio site starts off with a bang, by presenting a polygonal 3D globe that zooms in and… well I’m not going to spoil it. Suffice it to say that, potential usability problems aside, this is what all those Flash site designers were going for, but couldn’t quite manage. It’s quite something to see.

The rest of the site is decidedly simpler, and not too spectacular, though certainly pleasing to the eye. But that home page… that will definitely give customers something to think about (if it works in their browser).

Olle

The studio portfolio site for Olle combines minimalism with a streak of Bauhaus style. The pages weren’t just designed, they were art directed.

Designers take note: art isn’t just about fancy layouts. Simply changing small details on the page, or the entire color scheme, to match the content… that counts too.

Locomotive

Locomotive’s portfolio site is a fantastic example of a site based on Material Design that doesn’t look all-Google, all the time. Yes, certain elements retain that very specific Material Design feel, but the site very much has its own personality.

AREA 17

Combine a modern aesthetic, a strictly black and white color scheme, a bit of asymmetry, and you get AREA17. Now, I love my greyscale sites, as you know, but it’s not often someone can actually pull off a design with near-solid black (it will look solid black on most screens, anyway), and a lot of it.

C RCL

C RCL’s portfolio site makes a risky choice with using a full-screen carousel in the middle of their one-page site. Well, the risk comes from the fact that it’s the only way to see their work. Still, it fits in with the aesthetic. Great typography too.

Whitehall

Whitehall is an interior design studio in New York City. They leave all the sales work to the excellent photos of their projects, which are presented full screen. The rest of the site is kept simple, giving you just enough information, and no more.

The asymmetry on the “About” page surprised me, but it still seems to work, even if it’s nowhere else on the site.

Uzik

Uzik’s agency portfolio site is another one of those that’s not too original, but too well-executed to ignore. It just has fantastic use of imagery, type, color, and everything else. There’s something to be said for following the formula once in a while, and it’s working for Uzik.

It’s a pretty site. Go look.

Dunlop Builders

The portfolio for Dunlop Builders is another great example of a minimalist business site. It looks very familiar, in terms of structure and the elements used, yet still retains its own distinct personality. Some of that personality comes from the imagery, but a lot comes from the use of layout and type.

David Schweitzer

Composer David Schweitzer’s portfolio isn’t a one-page website, but it might as well be. All of the most important information is on the home page.

Almost random colored geometric shapes are used to spice up an otherwise monochrome website to great effect, although they make the text a bit less legible where they overlap with it. What I love, though, is that you can click on any of his musical projects for a full case study, or just listen to a sample right there, with the provided mini media player.

The whole site is efficient like that, while also providing more details for anyone who wants them.

Geordie Wood

Ok, Geordie Wood’s portfolio is, to be perfectly honest, an unusable mess. Take a glance and tell me where the main navigation is. No, it’s not the arrow in the upper right. It’s revealed on hovering over the photographer’s name.

That mess aside, I love the use of typography, and the way the text stays on top of the hover-images until you click through. I love the way each photo is given a different ratio of white space. It’s feels experimental, a little unpredictable, like the photography it’s showing off.

I love that. (They still should fix that navigation, though.)

Sam Lord Flavin

And we keep getting experimental with Sam Lord Flavin’s portfolio. And it kind of has to get experimental. After all, he’s using this site to showcase three major, and majorly different, skillsets.

Well, the combination of asymmetry and parallax effects works incredibly well, here. (Yup, there it is.)

Villa Böhnke

Villa Böhnke’s one-page poortfolio feels, at first, like more of a collage than anything else. I’d say it works for them, even with, gasp, drop shadows. Okay, it really is mayhem out here. But for the content, this is perfectly appropriate.

Jon Montenegro

Jon Monttenegro’s portfolio gives us another decidedly minimalist one-page portfolio. This one is targeted at… people impressed by really long lists? I mean ok, I’m actually impressed. That’s a lot of work done.

So, if anyone wants social proof, that’s one way to show off. I just wish he hadn’t used those clicking sounds when you hover over a link.

HOO KOO E KOO

HOO KOO E KOO has a name I don’t even want to try to say out loud because I just know I’ll get it wrong. It also gets off to a great start with what might be the most modern-feeling animated depiction of Pong that I’ve ever seen. Scrolling down gives us a change in background color that never feels awkward, so that’s cool too.

Humans & Machines

The portfolio for Humans & Machines brings us more asymmetry, more minimalism, more goodness.

Pilote

Pilote’s portfolio presents their portfolio in just two photos. They showcase their print and graphic design by zooming in on each product as you click through the menus. It’s a bit “Flash-y”, but still fairly unique, and an interesting way to do it.

Brave People

Brave People’s portfolio site is another that’s not too original, but still beautiful. Have a look at that typography, especially. It’s pretty.

Microthemer Visual CSS Editor for WordPress Themes & Plugins – only $17!

Source

For some time, we’ve run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS that force us to reach for CSS preprocessors, plugins and other tools to help us write the styles that we’re unable to write with CSS alone. Even still, we run into limitations with what current tools help us accomplish.

Think for a moment of a physical structure. If you’re building a large edifice with weak material, a lot of external support is required to hold it together, and things have to be overbuilt to stay sturdy. When you’re building a website out of HTML, CSS and JavaScript, this external support might look like frameworks, plugins, preprocessors, transpilers, editing tools, package managers and build processes.

The post The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today appeared first on Smashing Magazine.

There are numerous ways to represent the prototype of an upcoming project to the client. You can stick to the traditional path and overwhelm the client with a bulk of paper material and digital sketches accompanied by extensive descriptions. Or you could go for modern tools such as Adobe After Effects, Framer.js or MarvelApp that will make the future interface look pretty realistic, alive, much more friendly and approachable. The latter is a preferable option nowadays: a bit of interactivity has never hurt anyone and in case of displaying work proves to be pretty effective . One of such modern tools are the animated Gif walkthroughs. They are not precisely a brand-new solution (they have been with us for several years), nevertheless they are still attention-grabbing.

Despite looking like an excellent instrument for a pastime, it has a potential to benefit any project by improving and enriching the way of introducing it to the potential customers. It is small, lightweight, easily generated and most importantly engaging. It presents the concept in an unobtrusive and playful manner that naturally wins over the client.

Today we have collected 20 great examples of animated interfaces.

Gif for Sport App

Creator: Sergey Valiukh for T U B I K

City Intro Animation

Creator: Vasjen Katro for Fabric

Speedcam App Animation

Creator: Jakub Antalík

Weather Dashboard / Global Outlook

Creator: Studio–JQ

Android Wear – Clock App

Creator: Ramotion

Madvad Landing Page

Creator: Hoang Nguyen

Time Tracking App

Creator: Hanna Jung

Star Wars App Concept

Creator: Konstantine Trundayev for Yalantis

Strada Cafe App

Creator: Nick Buturishvili for Leavingstone

UX Pattern – Gif Hints

Creator: Virgil Pana

Bob Web Player

Creator: Pivotal

Moves App for Watch

Creator: Jakov for Unity

Weather Rebound

Creator: Chris Slowik

Ramen Ninja App Animation

Creator: Walker Reed

Mood Control Animation

Creator: Veronika Bass for Cleveroad

Plastique Mobile Launch

Creator: Rachel Blank

Portfolio Website Redesign

Creator: David Moore

Dribbble App for Apple Watch

Creator: Artem

Tapdaq – Creative Template Process

Creator: Jan Losert

UI8 Wireframe Kit

Creator: Creativedash

(dpe)

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

10 CSS Rules Every Web Designer Should Know:

Complex UI Inspiration

Buno: Simple, Minimal Note-taking

How Well do You Know CSS Display?

ColorDrop.io – The Last Color Palette You’ll Ever Need

The :Target CSS Trick

Flat Design Vs. Material Design

Site Design: Kaseta.co

How to Interview for a Design Job

The *designer* is in the Details

Free Landing UI Kit

Work/Life Balance is Bullshit.

Vintage Colour Wheels, Charts and Tables Throughout History

How to Declutter your Design

Apple’s New “Shot on iPhone” Campaign

Modulr: A Fast and Modular Approach to Building Powerful UIs

Gravit.io: In-Browser Design Tool

Try to Guess the KOLOR as Fast as Possible!

All New Framer Meetups

Visual Studio Code 1.3 Released

Snapchat is Ruined

Cognitive Load: Brain Gems for Product Designers

SEO is as Dirty as Ever

Design Needs More Women

The UX Secret that will Ruin Apps for You

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: Pinto Font – A Gorgeous Family of 14 Hand Drawn Fonts – only $9!

Source

Today, you’ll get to read an unusual article, sort of an outing. Only very few people can claim that a website has changed their life. I’m one of them. And the site that I’m talking about is Dr. Web. It has changed my entire life and turned it upside down. What was left is my destiny.

The Prolog: Webdesign, WordPress Themes, and WP Security

In early 2011, I went freelance again, after a long time in a day job. My company at that point, “HechtMediaArts”, offered custom web design, mostly based on WordPress, premium WordPress themes and, as a unique feature, WordPress security, mainly because as a result of my own stupidity one of my WordPress websites got hacked in 2009.

I didn’t want that ever to happen again, so I started dealing with WordPress security excessively.

All three pillars of the business started growing step by step, above all others, the security area of our beloved CMS WordPress. I’m positive that I secured about one hundred WordPress websites, and protected them from hacking. At the same time, I was working on my ebook “WordPress Security“, which is currently available in its third edition, and is still selling well, while still being very up to date at that. You will need to understand German should you want to read it, however.

The company was constantly growing, as well as my income. In 2013, I was already able to subsist on, and look after my family with my small business as a full-time job. Everything could’ve been fine. But – basically -, nothing was fine. My health was fading, slowly, but constantly.

The End: Significant Health Issues. The Death of a Company.

The first signs already showed up in 2011. But I’m a master when it comes to ignoring things I don’t want to see. I ignored all the symptoms of my illness and went even deeper into my work, much deeper than what would’ve been good for me. Maybe everything would have been different had I taken it slower at the right time.

However, cutting a break is nothing for me. God has created me as a working animal that doesn’t know breaks, no weekends, and no holidays. I dropped deeper into the abyss, and worked increasingly harder as if it was the cure for all diseases.

Around mid-2013, I couldn’t keep ignoring the symptoms and told my doctor about my issues. He immediately redirected me to a specialist, who was able to make a diagnosis after only five minutes. I suffered from depression, which was steadily getting worse, even though I was taking medicine. It became so bad that I had to close my business in 2014.

Hospitalizations and a Light at the End of the Tunnel

In 2014, nothing worked anymore. I was finished and had to stay in specialized hospitals for about six to eight weeks per stay. It was the final visit that helped me find my way back into my life. The realization that my life had to change helped a lot with my recovery.

Additionally, I started doing sports in a nearby park. Walking in the morning in conjunction with a superb therapy helped clean out the clouds of depression very quickly.

I still remember my first day of walking. I was so weakened that I was only able to walk for one and a half kilometers. My energy increased slowly and after a while, I was able to walk for seven kilometers every morning. I quickly went back to feeling fit and vital, enjoyed life, and had the power to take it as it comes.

Why Am I Outing Myself?

If you ask yourself why I’m telling you about a part of my disease’s history, let me answer this: today, many people suffer from depression or burnout. But only a few of them have the courage to admit it in public. I have this courage because it was a part of me, and I continue to overcome it a little more with frankness.

I also don’t mind when people know that I was sick. Maybe my story encourages other people to stick through everything and work it out. There’s a life after the illness and depression can be cured.

The Email That Changed my Life

During my final hospital stay, I was thinking about my life a lot and asked myself what I should do to pay my bills. Web design was out of the question, as the constant stress with clients and my workaholism were two of the reasons why I became sick.

Then, I received an email that changed my life. The sender was Michael Dobler, the owner of the websites Dr. Web and Noupe, who asked me if I could start writing for Dr. Web more frequently again. Emails were sent back and forth, as I explained my health situation to him. Michael didn’t just show understanding; he absolutely wanted me to get back to writing. I had already written three articles for Dr. Web in 2012.

This was a real silver lining in my darkest hour. It didn’t take long until I regained the ability to care for my family by my own efforts.

Writing. My Destiny, My Passion

Writing for Dr. Web quickly turned into a business, a job that I could live from. That allowed, and still allows me to contribute to feeding my family. Of course, I had to learn to my cost and got criticized by our chief editor Dieter – for good reasons – over and over again.

But you only grow from constructive criticism. You get stronger from it. I have learned a lot from our experienced Dieter already, and I’m not done yet.

The most important thing that writing taught me is that you can make money without being exposed to extreme stress. Of course, I was under stress in the beginning. Dieter was rightly annoyed because I made certain mistakes again and again. I was annoyed because I made these mistakes repeatedly.

But the more you write, the less – stupid – mistakes you make. The quality of the delivered articles improved, and routine set in. Along with it came an increasingly deep feeling that I found my destiny. Today, I decide how much stress I want to be under.

Every new day gives me the feeling to have found my destiny. My true (professional) love. The thing I always wanted to do. Not being able to write again is something unthinkable for me. I write. Therefore I am.

A New Life Full of Vocational Joy and Health

Today, I live a life without limits, full of work-related joy. I enjoy being able to write for you. On top of that, I’ve written three ebooks this year, with a fourth one being almost finished, and a fifth one scheduled for this year. On the side, I have revived my own blog, and I started writing for myself again, utilizing everything that doesn’t seem to fit on here.

Everything is fine regarding health as well, as I can enjoy life without restrictions, and I learned that there’s a life aside from work.

Of course, I still like to work a lot and sometimes, undertake a bit too much. But when that’s the case, I feel it and apply the brake in time.

No matter what’s to come, Dr. Web is and will always be an important part of my life.

By the way, I follow these ten steps very carefully:

Noupe: Avoid These 10 Things That Kill Your Creativity

(dpe)

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Outdated designer

Smart car assistant

Postdated check

Can you relate to these situations? Please share your funny stories and comments below…

20 Creative Brochures from Kovalski Design – only $14!

Source

The search for suitable fonts for a web project is not always easy. Many fonts have a unique character, and thus, don’t suit every case. However, there are a lot of free fonts with a very general design, allowing them to be used in almost any web project. We call them everyday fonts and have gathered some for you.

“Source Sans” and “Source Serif” by Adobe

“Source Sans” and “Source Serif” were the first open source families by Adobe. Both families are available as so-called Pro fonts. This means that they support all European languages, also including Eastern European languages such as Turkish. Thus, they are an excellent choice for international designs.

In addition to that, there are plenty of ligatures like small caps, medieval numerals, proportional and tabular numerals, as well as breaches. Even though Adobe developed the font as an open source, it can be compared to Adobe’s commercial fonts regarding aesthetic quality as well as the character set.

The “Source Sans” is available in six different cuts, from “Extra Light“” to “Ultra Bold”, each of which is also available as italics variant. The “Source Serif” has half as many cuts. Just like every open source font, you can find the source files on Github (“Source Sans” and “Source Serif“), allowing you to edit and advance the font.

Aside from that, you’ll also find the font at Typekit and Google Fonts, as well as for download at Font Squirrel. By the way, there is a third family called “Source Code,” which is used to display – well – source code.

“PT Sans” and “PT Serif” by ParaType

The font families “PT Sans” and “PT Serif” from the foundry ParaType, are similarly well-developed. Both of these families are also available as Pro versions. However, these aren’t free. The free versions don’t support all languages. Nonetheless, they still include plenty of European and Asian languages.

As the “PT Sans” is based on a Russian sans serif from the 20th century, the main languages that are supported are Russian minority languages. Many western European languages are also included, however.

Small caps and other alternative sets are not available in the families’ free versions. In return, both families are provided in standard cuts, meaning “regular,” “bold”, and “bold italic.” On top of that, there is a “caption” cut for large headings.

Moreover, there is an equidistant font called “PT Mono,” which is useful for the display of source code, for instance. All three families are provided as desktop and web fonts at ParaType. They can also be found at Typekit and Google Fonts.

“Roboto” and “Roboto Slab” by Google

Originally developed for the Android operating system, the “Roboto” is also available as a desktop and web font. With six cuts, ranging from “thin” to “black” (with an italic version of each), you’ll receive a well-developed family. A plethora of western, central, and eastern European languages are supported.

Corresponding to the sans serif “Roboto”, there’s the “Roboto Slab”, which is less extensive with four cuts from “thin” to “bold”, but still is a perfect addition.

You also have access to a very tightly cut version called “Roboto Condensed.” For this one, there are three cuts and italic versions. All three fonts can be downloaded at Font Squirrel.

By the way, in 2014, there was a revision of “Roboto”, where individual letters, like the capital R were designed differently. You have access to both the original family, as well as the 2014 version. Furthermore, you’ll find the fonts at Google Fonts.

Conclusion

All three of the presented font families have a rather modest design. The well-developed character set and the multitude of cuts make them universally usable. On top of that, all fonts have versions with serifs, and sans serif versions, letting you combine them perfectly.

Especially those that aren’t sure which fonts fit together will find completed, well-matched families with a large variety.

(dpe)

In the last couple of years we’ve noticed more and more websites following the same basic format. This is typically referred to as design convergence; two designers, approaching the same problem, might reasonably arrive at the same solution—even more so, if they’re aware of each other’s work.

It’s common to hear complaints from designers (rarely clients) that all sites look the same, and that web design has become “boring”. But another word for “boring” is “predictable”, and predictable is good for users.

Design convergence is a process driven by widespread adoption of design patterns. At some point, cobblers decided that the best way to secure a shoe to a foot was laces—yes, other types of fastening are available, but most footwear uses laces. Those cobblers didn’t hold some kind of clandestine meeting, over time cobblers who didn’t favor laces either found another niche, or went out of business. Design patterns stick, because they work.

As an industry, we’ve been here before. From Web 2.0, to Flat Design, via Splash pages, every design solution is definitive until it’s surpassed. Inevitably, technology moves on, and as the question changes, the answer changes too. However, despite the continuing march of technology the current crop of design patterns has proved to be unusually persistent.

Part of the reason is that business (always blame the client) is heavily invested in current solutions; we might also blame the design community, blogs (such as this one), Medium, Dribbble, all reinforce a status quo; we might also blame our own expectations, I recently caught myself referring to Material Design—a whole two years old—as “dated” (because it is). We’re acutely aware of design trends, we’re always looking for the next idea, and a watched pot never boils.

Still, the one characteristic of every revolution is that it is preceded by a period of stagnation. The current design convergence may be the maturation of design patterns that will continue for decades, or it may be we’re about to experience another momentous change in the design landscape.

Friendly Rounds Condensed Font Family of 10 Typefaces – only $9!

Source

One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end developer. Perhaps that’s why it’s such a fun job!

Because the front end developer is this central hub position and dealing with lots of different people doing lots of different jobs, the job can be done better if they are aware. Aware of everything else that makes a website tick.

A front end developer is aware of design. If they aren’t a designer themselves, they know how important design is. They have good taste in design. They know about the tools involved. They know where the design role fits into the process.

A front end developer is aware of the back end. If they aren’t a back end coder themselves, they know how important the back end is. They know what the back end is capable of delivering and what it isn’t. They know the responsibilities back end developers have. They know the languages involved. They know how to ask for what they need on the front end.

A front end developer is aware of the network. They know that websites are delivered over the internet, a network, and that that network is a wild and sometimes unpredictable place. They know networks can be on or off, fast or slow, and reliable or unreliable.

A front end developer is aware of performance. If they aren’t entirely performance focused themselves, they know that performance is vital to a website’s success. They know performance is a complex world onto itself. They know there are quick wins and long term struggles. They know that so long as the back end is fast, the other 80% of the time a website is loading is a front end concern.

A front end developer is aware of content strategy. If they aren’t a content strategist themselves, they know that websites live and die by the content on them. They know that the lack of a content plan can cause problems that you may not be able to develop your way out of. They know that the people that use the website is what matters and those people need to find what they need and expect it to be in good shape.

A front end developer is aware of databases. The content lives there. The content must be in good shape. The front end developer can only work with what comes out of those databases. The front end developer needs to combine what comes out of those databases with templates to make the website happen.

A front end developer is aware of testing. So many kinds! Integration testing. Regression testing. User testing!

A front end developer is aware of systems. They might be responsible for implementing a design system, or an icon system, or a coding style guide. They might have to create those systems themselves. They might need to document those systems. They

A front end developer is aware of devops. They are writing and committing code along with every other coder on the project, so they need to adhere to the same setup as everyone else. If they didn’t write the build system themselves, they know what it is, what it does, and what it is capable of. If they didn’t set up deployment themselves, they know how to use it.

A front end developer is aware of servers. Without them, there is no website.

A front end developer is aware of accessibility. If they aren’t well versed in building for accessibility themselves, they know that it’s important. They know how to test for it. They know who to talk to about it. They know there is quick wins and long term struggles regarding it.

A front end developer is aware of the device landscape. They know the web is everywhere these days and a good website needs to meet users there. Big screens, little screens, touch screens, far away screens, black and white screens. The front end developer is aware of the unknown.

---

That’s just a handful of the things a great front end developer should be aware of. The more the better.

All this, of course, on top of their own direct job. HTML, CSS, JavaScript, responsive design, libraries and frameworks, communication… this list is scary-long itself!

---

A Front End Developer is Aware is a post from CSS-Tricks

Hard as it is to believe, it’s been over 20 years since the World Wide Web has become a mainstream part of our collective culture. It has played a major part in changing how we communicate and how we work. There aren’t many aspects of our lives that haven’t been changed by the web and its seemingly limitless collection of information.

As for designers, we’re certainly thankful for the role the web has played in our lives. It has provided us with a means to make a good living, after all.

But, the web can be a very trend-obsessed place, especially when it comes to technology. It has always been difficult to keep up with all the latest must-have bells and whistles that clients are asking for (even if they weren’t so great). The past is littered with examples of gimmicky “features” that we implemented and limited technologies we’ve had to work around.

Here are a few of those items that were once all the rage. In hindsight, they turned out to be clunky technologies that were once a necessary part of our job. While you might still find a few examples of them in the wild, they are rapidly becoming extinct.

Proprietary code and formats

Back in the 1990’s, as use of the web was rapidly growing, companies were aiming to create websites that were more entertaining and consumer-friendly. There were a plethora of new browser plugins and companion software that allowed for this. What stood out, though, was that a lack of standards meant most of this technology was closed and proprietary.

Microsoft looks to win the browser wars

When Microsoft Internet Explorer launched back in August of 1995, its main competitor was the upstart Netscape Navigator. The software giant from Washington State was looking to put Netscape out of business and dominate the market share for browsers.

Among their many ideas was to create proprietary, non-standard HTML that would work only in IE. That led to sites that could look radically different in other browsers. As it turned out, many designers weren’t keen on using code that rendered their site useless (or just plain ugly) for a significant chunk of users.

Multimedia choices

Both video and audio formats used to be a complete mess. Well before HTML5 standards allowed browsers to handle multimedia on their own, there were a bevy of proprietary formats and software needed to watch or listen to anything.

Setting up a site with any of this content meant you had to choose between competing formats. Plugins for QuickTime, RealAudio/RealVideo, and Windows Media Player were among the most-used. And, of course, they were in no way compatible with each other. So whichever formats you posted to a site, the end user had to have compatible software installed to access the content. What’s worse, using the RealAudio/RealVideo platform meant you’d have to install a server-side software package to enable multiple, simultaneous streams. This made live events quite costly.

Much of this also came at a time when broadband connections weren’t so common. While software companies boasted about their product’s ability to work well with very little bandwidth, the quality of streaming media was generally poor. Videos were tiny and pixelated, while audio (especially live streaming audio) sounded on par with a cheap AM radio.

Interesting side note: My first ever online purchase was for the “premium” version of the RealPlayer. It promised the use of high-end codecs that improved the quality of streaming content. That said, I didn’t notice any improvement. Maybe that 56k modem had something to do with it…

Flash

I know, Flash is still used a bit for video. But there was a time when Flash was the go-to platform for interactive media and animation. Just about any site that wanted animation, games, audio or video players would use the format.

Flash, in general, had a couple of fatal flaws:

1. Flash content was expensive and time-consuming to create

If you wanted to create original Flash content, you needed to buy an expensive software package (first from the original maker, Macromedia, then Adobe). It was several hundred dollars and had regular upgrades that weren’t so cheap, either.

The software itself was quite powerful. But it also featured a fairly steep learning curve. You needed a good bit of patience to create content because it could be a very long and drawn-out process. Simple animations that may have run in a user’s browser for 10 seconds may have taken a couple of hours to create.

Many a designer said a nasty word or two under their breath whenever a client requested some Flash content.

2. Flash was often relied upon too heavily

Remember the Flash intro? How about sites that were built entirely in Flash? Don’t get me wrong, there were some marvellously creative implementations of the format. But, in the wrong hands, it became a completely user-unfriendly way to create a website.

It almost became a way to dictate to users exactly what you wanted them to do, rather than letting them decide for themselves. Looking back, fatal flaw #1 probably led to #2. Designers knew they could charge a good bit of money for Flash development and so they sold it… often.

Flash eventually took on a new life as the preferred video platform for YouTube. However, Apple’s famous stance of not allowing Flash to run on iOS devices made that comeback rather short-lived. The Flash software’s legacy still lives on in the form of Adobe Animate CC.

Large static sites

Back in the day, a content management system (CMS) was something often custom built for a large corporation. That meant a lot of websites were built using good old-fashioned HTML. And, it could get awfully difficult to maintain.

Thanks to open source CMS like WordPress, Joomla! and Drupal, we can take a lot of things for granted. Humor me as I take you through a couple of mundane things we do each day that used to be a true pain with a static website.

Posting a news article

On a static site you would create a new HTML document using the proper template and add your content. Then, you had to manually add a link to the article in an index page or other listing. If you wanted this article to appear in a sidebar, you might have had to open up a server-side include file and add a link there as well. And don’t forget to upload these changes to the server.

With a CMS, you just add the new content.

Creating a photo gallery

These were so much fun! Let’s say you needed to create a gallery with 100 photos. You would crop and optimize the photos with an image editor (full sized and thumbnail versions), setup an HTML layout (most likely using a table) for the gallery page. Then, you had to either implement a rudimentary script to link thumbnails to full size photos, or create new pages for each photo.

Of course, a good CMS plugin can do all of these things for you while you’re in the next room drinking coffee. Automation is a beautiful thing!

Lest we forget

While the web technologies of yesteryear were often cumbersome, they were also very important precursors to what we have today. If not for the pain points caused by so many proprietary media formats, we may not have the goodness that is HTML5 or other W3C standards in general. The backlash against Flash certainly helped shepherd in the widespread use of minimal design. And the lack of automation from static sites led to the development and democratization of the open source CMS.

Even though the old tech died out (or is really close to it), at least we can say that its existence made things better for us all. The progress we enjoy simply wouldn’t have been possible without them.

Friendly Rounds Condensed Font Family of 10 Typefaces – only $9!

Source