CSS

Designer’s Ego: Benefits and Dangers

Posted on by Mario

The Benefits and Dangers of a Designer’s Ego-ywf

Most of us certainly have an ego, some  like to be praised, and some  think that their choice is absolutely right. As a web designer, it is not a sin to have ego, for it is a human nature. However, how far an ego should take you? You can discover the good side and the bad side of an ego that may affect a designer’s work by reading the points below.

The Good Side

  • Confidence

Having a good amount of ego will produce you a good confidence, because you know that you have talents; it gives you a good start to set a level of expectation. With a good amount of confidence, you can stay focused and work hard, this is all for the sake of living up to expectations.

  • Moving Forward

Another benefit of having a healthy ego is that it can lead you to make decisions. On the other hand, getting overconfident may lead to biting off more than you can chew. However, a balance of confidence and awareness will help you decide which projects to jump on and which to let go.  Besides, you will know when to wait for the right one.

  • How to Get There

For some people, they might have a good ego naturally. Therefore, it is not difficult for them to have a balanced view of themselves and their abilities. However, some may have to work a bit harder to achieve the balance. If you find yourself in difficulties in handling your ego, you can start balancing it by realizing that you are human and that you’re going to make mistakes. However, once you make mistakes, do everything you can to correct it. You can take your mistake as a lesson to learn from and then move on.

When your confidence is low, you can remember things that can elevate your sense of pride. For example, you can recall your thoughts of the first websites you created or other good memories that can make you feel good.

The Dark Side

  • Stop Listening

One of the biggest disadvantages when you have a bad case of ego is to stop listening. Your client wants a result to be like what they expected, sometimes they demand something that are fraught with problems or make little sense which surely will make designers confuse, lose their patience, and start tuning people out. However, we suggest you to be patient.

This is because when you reach the point where you simply know better and refuse to take other people’s opinions seriously, you start creating things only to please yourself while your client is the one that you should please. Therefore, listening to others and working to understand their point of view is critical to a successful project, even though it is okay to gently argue and compromise for what you believe is best.

  •  Stop Learning

It is common to stop learning, especially when you get to a high level of proficiency with a skill (HTML, CSS, graphics, etc.). You might think that somehow you don’t need to keep up with the times as you know everything. However, soon you will realize that your skill isn’t sufficient, especially when you are working with WordPress and the old static HTML sites.

  • You Operate on Instinct Alone

Gut feelings can mean so much, but without proper research, your gut feelings will only lead to a wrong choice. Therefore, put in the required effort to ensure it’s the right one. That doesn’t mean you have to toil for hours just for doing research, but use research as a media that can facilitate our gut feeling whether it is right or not.

The overall point is that an ego should be managed very well as it can creep up and hurt any one of us. However, we believe that most of us can conquer the dark side of our ego and play it very well for the success of our project.

What is Minification?

Posted on by Mario

css minification

Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.

After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.

Minification Techniques and Tools

Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.

CSS minification

Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.

JavaScript minification

To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.

Example of Minification

The following code block shows an example of plain HTML and CSS:

<html>
       <head>
               <style>
                 #myContent { font-family: Arial }
                #myContent { font-size: 90% }
</style>
</head>

        <body>

                 <!– start myContent –>
                       <div id=”myContent”>
                       <p>Hello world!</p>
                       </div>
                 <!– end myContent –>

        </body>
</html>

Here are the same codes after minification:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Benefits of Minification

  1. As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
  2. Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
  3. Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.

Design Considerations: How to Place Text Over Images

Posted on by Mario

design-considerations-how-to-place-text-over-images

 

 

 

 

 

Placing text over image is not always easy.  Therefore, in this article we would like to give you several tips about it. If you are a web designer below are several ways that you can use to make your text fit your images beautifully.

Tinting

You can choose whatever images that you want, but let’s take a sample that isn’t particularly dark. Then using an image editing program, such as CSS to overlay a transparent color and darken it a bit. The trick is using a gradient that doesn’t gradient-ize.

.darken {
   background-image:
   linear-gradient(
           rgba(0, 0, 0, 0.5),
           rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

Result

1
And while a black overlay is simplest and most versatile, you can certainly find colored overlays as well.

Indeed with this method you can color however you want from the comfort of CSS:

1

White Text

The text has to be white – I dare you to find a counter-example that’s clean and simple. Seriously. Just one.

When you have a darker background, the right choice for your text color is certainly white. This will give a classy touch on your design. Some low rated magazine prefers to have yellow color.

1

Full Page Images

At some points it seems unavoidable to set text on an image, especially when you make the entire screen fill with a background image. So, here is a tricky thing to do:

body {
      background: /* do whatever tinting and stuff here */;

/* This will ensure everywhere is covered */
    background-size: cover;
}

Result

1

But, if you want to cover the entire screen like the example above, you should make it possible to be scrolled down, you could set the top area as having a height of 100vh units.

Your browser will support your work here. You might wanna have a fixed height fallback and/or do it with JavaScript.

Text in a Box

Works with any contrast-y color combination.

1

It will be easier if you put only a single line of text but it will be harder if there is any chance of the text breaking. You could write the title as display: block; but it’s not as elegant perhaps as inline. But with inline, you need to take care that the spacing around the line breaks isn’t awkward.

We’ve covered this before. I think it’s coming down to box-decoration-break as being the way forward:

.title {
    background-color: black;
    color: #fff;
    display: inline;
    padding: 0.5rem;

   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
}

Result

1

Blurring

One of the ways to do it is by having a section of the area inherit the same background, position it the same, then blur it.

.module {
   background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
   background-attachment: fixed;
   overflow: hidden;
}

.module > header {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 20px 10px;
   background: inherit;
   background-attachment: fixed
}

.module > header::before {
   content: “”;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: inherit;
   background-attachment: fixed;
   -webkit-filter: blur(12px);
   filter: blur(12px);
}

Result

1

In the example above, a color bar is placed in addition to the blur. However, you don’t necessarily have to as you only need to blur it.

1

Softening just part of the image like this Erik is calling a scrim.

A scrim is a piece of photography equipment that makes light softer. Now it’s also a visual design technique for softening an image so overlaid text is more legible.