Forem: Vladimir Jovanović

Small advice for writing the CSS for the print

Vladimir Jovanović — Wed, 31 Jul 2019 17:26:55 +0000

On one project I am working on I recently had a chance to once again write styles for the print. As a web designer I understand that each medium has its unique properties and challenges that we need to overcome through design.

When designing for print we need to take into account several requirements for that medium:

Most commonly used printers around the world are still monochrome, since they are cost efficient.
Most commonly used paper color is white and in two possible formats A4 or Letter size
We need to conserve paper and print only the necessary text
Smallest readable font-size is at between 10pt — 12pt, but with accessibility in mind, it might need to be bigger and of at least 14pt.
Paper is not interactive. This may sound silly, but we have come to the point in modern world where we are primarily transferring information from digital world to paper, so we must adapt to that.

With these requirements in mind, we can adjust our UI for print. Since the headline says that this is a small advice, I will be short and to the point:

All text should be converted to black, since we are printing on a white paper. If color is a requirement, then any text color must be of sufficient contrast compared to white paper. If you are following accessibility rules for web design, then you are already set. Accessibility level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Background should be plain white, without any images, gradients or colors.
Hide all unnecessary UI elements that doesn’t work on paper. Those are usually dynamic forms, search forms, social share buttons, dynamic menus, banners, videos, sound widgets etc.
For more complex web sits, if you exclude enough elements from print, you might also want to create new simplified grid for the remaining elements.
Some elements might look odd when they are split between two pages. It is possible to correct this problem by using CSS rules break-inside, break-before and break-after. Unfortunately, these rules work great in all browsers except Chrome (which is the new IE), so you might need to tweak them a bit.
When printing anchors (links), they will appear just as an underlined text. In order to solve this problem, I have created a small solution with CSS where href attribute is printed next to the anchor text. It looks like this:

@media print {
  a {
    &:after {
      content: "[" attr(href) "]";
      color: black;
      margin: 0 0 0 5px;
    }
  }
}

When applied to this HTML

<a href="https://www.duckduckgo.com">Best search engine</a>

Result on paper would be

Best search engine [https://www.duckduckgo.com]

I hope that these advises will help you to create better styles for the print.

What are your tricks for better print styles?

Case against premade CSS frameworks (and Design systems)

Vladimir Jovanović — Sun, 01 Apr 2018 09:25:02 +0000

People tend to use premade CSS frameworks for everything today. They are easy to use and the documentation is extensive. CSS frameworks have became so widespread that some may think that this is the way everyone should make a web site.

WRONG!

If you are using these CSS frameworks, especially popular ones like Material design, you are practically stealing visual identity from the company it was made for. In this case, you are using Google’s design system, their brand colors and pretty much everything else with the exception of their logo.

When it comes to other popular frameworks like Bootstrap or Foundation, problem is that you are using same styles as hundreds of millions of other web sites! Try to grasp how big is that number and what does that do to uniqueness of those styles.

Why is this a bad thing for you (and a good thing for companies that made them)?

Most important problem - Your company don’t stand out in any way, it is not memorable and you are not creating brand awareness. If you want to create your own brand, especially as a startup, you must do it right from the start, because it is extremely hard to change user opinions or behaviors afterwards.

When you come to the point in your work where you have to make changes to your established design, probably because you want to make some improvements based on feedback or data, those changes are usually small and subtle. At that point, development of your own design system is very risky because it may alienate large portion of your current users who already got used to your site or app.

At the same time, your popular app based on Material Design, for example, is promoting only Google and Android. They get brand recognition, fame… all of it.

Try out this experiment - pick a few non-Google web sites or apps, from the same industry, made with Material design and place them next to each other. Take a look at them all. Try to remember as much as you can about them in a few minutes of using them. After a week, try to remember if there was anything specific about their design that stands out, that you can visually connect to that specific brand it was made for?

You will certainly have a hard time remembering. Imagine what effect would that same experience leave in average customers mind.

When it is ok to use premade CSS frameworks?

Prototyping
Creation of admin panels, that are not intended for large audience or public use

If you want to create some prototype extremely fast, like a mock-up of your future app, it is ok to use finished CSS frameworks. You can compare this part of the development process to creation of mock-ups during the design phase of your work. Finished design won’t remain the same as a mock-up, in the same manner as the finished app won’t remain the same as the UX prototype.

For the part of your apps, that are not made for public, like admin panels for example, it is not that important to have everything unique regarding styles. It would be nice to have, but it is usually not critical for business or brand awareness.

Take great care, because at this point you are getting your customer accustomed to these styles. If they tend to work in admin panel a lot, those styles will become very close to their liking and after some time they may ask you to design front-end in the same manner. Good luck explaining to them anything about brand and design at that point.

What is the solution?

If you don’t make a habit of creating and offering unique styles to customers, you are doing them disservice in the long run. Hire a web designer or UI designer & developer, and integrate them with your development team. It is not that hard. As a result, you will create more value for your customer in the long run and your company will become famous for delivering unique and quality solutions.

Take a look around and you will see that we desperately need designs that are different from Flat, Material, Bootstrap, Apple guidelines...

...

Author:
Vladimir Jovanović
Web designer and front-end developer since 1998.

Next phase of separation of job titles in web development

Vladimir Jovanović — Wed, 21 Mar 2018 17:02:24 +0000

I never liked doing back-end programming.

For me it was the means to an end, something that more logical persons loved to solve in order to help our apps do what they should. "Pain" lived there :) and separation of front-end and back-end development was pretty clear - front-end was more creative, while back-end was more logical.

Problem when people are talking about front-end today comes from this concept in the image above - most of the web app logic is decoupled from back-end and it is being moved to front-end single page apps and frameworks like React, Vue or Angular. Today some back-end developers moved to front-end, while others remained to create micro-services.

It is important to understand the following - while "the pain" (from my perspective) moved to front-end, not all front-end is like that. Creative front-end still exists, it is still essential for modern web apps and we need to make clear distinction between these two front-end occupations:

1) "Creative" front-end is focused on design, templating and mostly CSS scripting with JavaScript that is used for animations and visual interactivity. Appropriate name in 2018. would be "Front-end designers".

2) "Logical" front-end which lives between creative FE and back-end. Routing, state management and most of the app logic is now solved through JavaScript. Appropriate name for this profession would be "JavaScript developers / engineers"

I am confident that professionals from either of these two groups dislike doing the job from the other one. Just think of all of those JS developers who are in agony when they need to do anything with the advanced CSS.

In 2018. this distinction will become even more noticeable.

This separation may shock some people, but as a web designer, I have lived through all of them. I have seen webdesign being split to UX, UI and front-end and this is just the next phase.

Do you agree or do you think differently?

Web design in 2018

Vladimir Jovanović — Sat, 24 Feb 2018 10:05:36 +0000

There was always much confusion about what web design is, especially in circles where self-educated designers work. Today this term is rarely used because few other, more focused professions sprung out of it. That is quite understandable, because processes are much more complex than they used to be, but you can be certain that this profession still exists.

So, what does web design represent today?

There are two different (amateurish) views on what should web designers do. First group will tell you that web designers are professionals that are focused only on design and nothing else, that they should not have programming skills. Second group will tell you that web designers must know how to code as well.

They are both wrong, because this list is far from complete.

As a graduated graphic designer and as a web designer and front-end developer with almost 20 years of professional experience, I will try to expand definition on what web design really is. It is much more than people may think.

In short — web design is another branch of applied arts, besides famous graphic design and industrial design. Wherever you see those words tied in together, “applied” and “art”, it means that profession involves a lot of engineering skills as well.

For example, industrial designers must know materials and technological processes for creating their shiny new appliances, while graphic designers must know a lot about prepress, colors and materials used in print if they want to create beautiful designs for books, posters etc.

Same as those two mentioned professions, web designers must know how design, to code and to deliver what they have imagined.

Common traits of design professions reflected in web design

All applied designers have some common traits in their professions. Those traits are divided into 4 main groups, which when combined make up a specialized design profession. They are as follows:

Esthetics
Technology
Ergonomy
Value

Esthetics

This is what most people consider design to be — typography, color theory, composition, illustration, visualization. Esthetics must be visually appealing to intended audience. Based on your preference, you will develop your own style given enough time. It is very important that you develop unique styles for each new product you create, because you want it to stand out from the sea of similar products.

Don’t think for a second that using finished styles from another designers will make you a good designer. Here I think especially about using finished styles like the ones used in Twitter’s Bootstrap, Google’s Material design, Microsoft’s Fluent design system etc. Those are all extremely well done design systems made for those companies. They improve visibility of their own brands, but not your own. Remember that when you get tempted to use some pre-made frameworks. Create your own if you have budget for it.

This is a whole science in itself and the area is truly vast. Some designers may, for example, find that typography is very appealing to them so that they may choose to specialize in that specific topic, while others may find that specializing in design systems is better for them.

Good designer should posses balanced knowledge of all topics that are important in this area of specialization. Web designer’s job is to focus on fields that are important for creation of user interfaces and best ways of transferring intended message to end users.

Most designers do this part of their creative process in programs like Photoshop and Illustrator, but depending on profession, industrial designers may use 3D programs like CAD or 3D MAX, while web designers may use Affinity Designer, Sketch or something similar. Of course, no one is stopping them from using a mix of these programs in their creative process or to even use more traditional methods like pen and paper.

Technology

This part is also very important and it makes designers true professionals in their chosen fields. As I have mentioned, each of these design fields is different in regards to end product and technologies used to create it. Since this article is about web design, I will focus on that field only.

It is important for a web designer to know technology for which he is creating a new product. In this case that is knowledge of medium where design is presented and technology that is used to power our products — web or mobile applications. More specifically, web designers are creating their products in web technologies that are using different screens and devices as medium to transfer information to and from end users.

How will design look and adapt to different screen sizes, pixel densities and in rare cases for limited color palettes and screen refresh rates? How will web designer prepare his creation for that medium? How will that creation perform over different networks, on slower or older devices?

Because we are creating most of the product, we must know answers to all of these questions. This is the reason why it is important to dive into technologies like HTML, CSS, JavaScript, web protocols, responsive web design principles, device capabilities. Of course, if you develop a taste for this also extremely vast area, and if you make this your focus, you may end up in front-end development.

It is important for a web designer to know enough to create at least a static web site with functional, responsive and performant interface. Everything beyond that is a job for dedicated front-end and back-end developers.

Don’t assume that your job ends here, we have two more important areas ;)

Ergonomy

Definition of ergonomy: Design factors intended to maximize productivity by minimizing operator fatigue and discomfort.

When you are designing your application, it must be intuitive and easy to use. Users should be able to find information they need in the least amount of time, with least effort.

This may sound easy, but it really isn’t, because web designer must take into account different design and technological factors and then overlap them with user psychology, learned user behavior, data extracted from analytics, A/B tests and limiting factors like disabilities. End result must be application that most users can use without any fatigue.

You may also find this area of design appealing so that you may specialize in UX (user experience) design, but as a web designer you must have general knowledge of this area.

If esthetics and technology are used to design outlook of your application, ergonomy would be designing of your application’s soul.

Value

Don’t mistake value for price. While the ultimate goal for our product is to be profitable, it must provide some benefits to end-users. It may provide pure knowledge, it may be used for entertainment or as a tool, but benefit must exist. Otherwise, we have created just pure art, which is not something that we as web designers should focus on.

Creating value is the hardest thing to achieve for any product, because you must have a good idea and a plan to achieve it. If you are creating web design for your customers, they will already provide their idea, but it is up to you to create a plan on how to make new application beneficial and attractive for users.

All of the three mentioned factors — esthetics, technology and ergonomy also increase the value of product. This is why it is important to be good in all four areas in order to create a complete and desirable product.

Web design vs UI, UX and front-end

There is a reason why web design isn’t as mentioned today compared to few years ago: with ever-growing complexity of technologies we are working with, as well as with their shorter life-cycle, it has become increasingly difficult to retain this professional title. Just the sheer amount of topics one must master in order to become web designer is pretty scary to most people.

Today, I can easily state that amount of knowledge needed for this profession is equal to 5 year university education. This is the reason why we have many relatively smaller professions that have sprung out of web design: UI design, UX design and front-end development.

When I compare these professions to common design traits I wrote about in this article, it looks something like this:

Front-end development is marked differently because it is much wider development area compared to what is needed for web design or UI development.

For more clarity, I will make one more comparison between web development professions.

When it comes to front-end development, situation is pretty complex and confusing for most people. We have three main professions involved in front-end development:

UI developers
Web designers
JavaScript developers

Main difference is the area of their work.

UI developers design and develop user interfaces, but they are not involved in other aspect of product design as Web designers are. JavaScript requirements for these positions are not on the same level as they are for dedicated JavaScript developers and they are mostly related to animations and user interface development. Of course, there are web designers who have transitioned to modern JavaScript frameworks and ES6/7, but that is more of an exception than a rule.

On the other hand, we have JavaScript developers who mostly work with that language, but aren’t involved in design at all. They are pure programmers and it is not in their job description to design anything. Areas where they focus the most are advanced JavaScript frameworks, single page applications, front-end templates, advanced performance optimizations etc.

As the last “profession” we have unicorns. :)

I am certain that there are such people out there today, ones that can create everything on their own, but as the time passes by and complexity of each profession increases, IQ and time requirements needed to become unicorn are much higher with each passing year. It is increasingly more difficult to remain a web designer or full-stack developer, let alone a unicorn developer. This is the main reason why these professions are rare today and no wonder — those who have tried to do it are struck more and more with Developaralysis ;)

...

Do we, web designers still exist? Of course we do, but I fear that this profession will very soon become mystical as full-stack or unicorn developers are. Unless, of course, we create universities with 5 year programs where we will teach new kids on how to become applied web artists.

Now, that would be a goal worth pursuing ;)

...

Author:
Vladimir Jovanović
Web designer and front-end developer since 1998.