High density retina displays or screens, like Apple’s Retina Display, have lots of pixels in a small space that it is almost impossible see the pixelation, thus, displaying smoother images and texts. Although Apple offered it first on the market, manufacturers have been releasing similar devices recently to compete with Apple.
When using Retina Display devices, you can see that other sites online appear blurry. This is because of the low-resolution images being stretched to fill the screen that makes the site look disgusting. A Retina Display scales 1px to 2px, making the size double.Read More
WebGL(Web Graphics Library) was released on the Web early last year. Its ability to use HTML5 Canvas elements to generate graphics dynamically made it easy for web designers and developers to create smooth 2D and 3D effects. Here are some WebGL examples and demos you should look at.
As smart phones and tablets have become popular, more and more people are have been reading their emails regularly on their small screen devices. According to Campaign Monitor, mobile surpassed web and desktop client usage last July 2012. As the mobile email usage grows, web developers and designer must consider optimizing the look of their email newsletters on phones and tablet.
Email clients such as Outlook (Windows), Mail (OSX), etc. use different HTML engines. Many have some rules and regulations. That being said, some CSS might work while some might not.
So, in making an email template, it is highly recommended to use a different approach. Many email clients completely remove the head and strip out styles while some support a limited set of inline and internal styles for formatting. To many, an old-school table layout is the best way to go.Read More
Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage.
In the past, the only image format that was supported by all browsers was the GIF, an image file developed by CompuServe. Then came the JPEG image file, which offered lousy compression without the loss of details, but the size is really small compared to the GIF file image.
After some time, the aim for advance 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999.Read More
We truly live in a flat world! With iOS7, Android and even Windows Metro now adapting the flat design layout trend, the world has become a flatter place, indeed. Flat design video tutorials are a great help in the transition.
Website designs have followed the same pattern, transforming their sites to become easy-to-browse, colorful, responsive and simple. How is this made possible?
- The use of larger and wider spacing
- The use of simpler logos
- The use of slightly desaturated colors
- The use of thinner fonts
For starting and freelance web designers, it might be very difficult at first to learn the philosophy of flat design. Of course, you are born during the Skeumorphic Design Era, where all should be seemingly real and predominantly having 3D designs.Read More
Today, I’m going to introduce to you different transitions and effects that can be done using only CSS3. So get ready and let’s rock!Read More
When web designer creates pages, sometimes they want to set an element where they need to bend or wrap texts inside a circle (e.g. for the site’s logo or title). Photoshop and some image editing software is often the go-to software for creating these images.
On the other hand, bending and setting text on a circle without using Photoshop gives flexibility to the design and value to the SEO since search engines can’t read texts in images.
This can be an easy task using Adobe Photoshop and Illustrator but setting text on web type using HTML and CSS might be a challenge. Thanks to the power of CSS3 and jQuery, this can be done.Read More
It may seem unimportant, but for a web designer, the ability to produce good-looking photos using Adobe Lightroom is an edge, particularly in attracting more clients. With the sudden influx of high-resolution and cheaper Digital Single-Lens Reflex (DSLR) cameras, photos are now becoming must-haves for websites.Read More
Now that we’re done talking about SASS let’s now talk about learning LESS. If you haven’t seen my SASS tutorial, I recommend you check it here. In our previous tutorial, we listed down the drawbacks of CSS and how pre-processed methods can improve your workflow. We also talked about how to implement SASS using variables, nested, mixins, functions and so on. So we’re ready to take another learning curve with another pre-process method which is LESS.
LESS in a Nutshell
LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.
It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.Read More