Optimizing the size of images can have a bigger impact on performance than all other areas combined. In this article, Louis Lazaris covers different tools available for reducing the size of images.
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects.
What’s your favorite command-line tool? In this post, Louis Lazaris shares a collection of relevant command-line apps and utilities that he has personally come across in the past few years. If there’s a useful one that hasn’t been mentioned and one you use regularly, please do share it in the comments.
Monitoring for changes to the DOM is sometimes needed in complex web apps and frameworks. By means of explanations along with interactive demos, this article will show you how you can use the MutationObserver API to make observing for DOM changes relatively easy.
Right up front, I’ll offer some simple advice: In production, your code should be as performance-friendly as possible. This means, Gzip’ing, concatenating and minifying as many assets as possible, thus serving the smallest possible files and the least number of files. I don’t think anyone would argue that these suggestions aren’t best practices (even if we don’t implement them in every project). Now that we’ve got that out of the way, how can we use white space in development code to ensure that our files are as readable and maintainable as possible?
Shopping. Social networking. Emailing. Reading. Finding directions. Banking. Researching. Those are some of the most common tasks people perform on the World Wide Web. You’ve probably done all of these things yourself at some point. So if you’re like many people, you probably do these things every single week (and many of them even every day).
Because of how far certain Web technologies like HTML5 and CSS3 have brought us, many would say that—from a Web platform perspective—the future is
. Sounds like a cliché, I know. At the very least, it feels like the future is starting to bubble up to the surface… but it’s just not quite there yet.
I don’t think anyone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate—far from it.
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.
If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the
pseudo-elements have been getting quite a bit of attention in the front-end development scene — and
for good reason
. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late. [Links checked February/08/2017] “Styling Elements”)](
) To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the
done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.
By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.
What do you think about the HTML5 logo revealed by the W3C? This article wants to be a space for the web design community to offer comments on the new HTML5 logo, its stated purpose, and the further developments on the term “HTML5”.
When the CSS1 specification was drafted in the mid to late 90s, it introduced
declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part,
declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.
I’ll start this article with a positive statement: Most people frequenting the web design community (whether they are casual readers or regular design bloggers doing research) understand that nothing is truly free (
not even content
), and appreciate the fact that many blogs, design resources, and tech news sites rely on advertising to keep them afloat.
It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even
gone on record
as stating that perfect, cross-browser compatibility is not necessary. [Links checked & repaired March/06/2017]
does not support
the majority of the properties and features introduced in CSS3.
Ah, the ubiquitous CSS sprites — one of the few web design techniques that was able to bypass “trend” status almost instantly, planting itself firmly into the category of best practice CSS. Although it didn’t really take off until well after A List Apart
explained and endorsed it
, it was discussed as a CSS solution as early as
July, 2003 by Petr Stanícek
Most web developers today have a fairly strong grasp of this technique, and there have been countless tutorials and articles written on it. In almost every one of those tutorials, the claim is made that designers and developers should be implementing CSS sprites in order
to minimize HTTP requests
and save valuable kilobytes. This technique has been taken so far that many sites,
, now use mega sprites. Is this much-discussed benefit really worthwhile? Are designers jumping on the CSS sprite bandwagon without a careful consideration of all the factors? In this article, I’m going to discuss some of the
pros and cons of using CSS sprites
, focusing particularly on the use of “mega” sprites, and why such use of sprites could in many cases be a waste of time.
Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and
high-quality print publications
Each year, the battle for television ratings begins. Networks unveil their latest creations, jockeying for position in the ratings race, doing everything and anything within their means to gain and keep as many viewers as possible.
In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.
I was pretty excited when I came up with the idea of examining and showcasing some of the most
famous beer and alcohol-related websites
from a number of countries around the world. After all, who doesn’t like the odd drink now and again? (Well, besides me — I can’t stand alcohol in any form.) Surely this would make for an interesting article that would elicit quite a few comments. Well, if that’s the result, it wouldn’t be for the reasons I suspected when beginning to research this piece.
How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable, and allows you to let your creative juices flow without the need to worry too much about usability and best practices? In today’s web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children.
One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects. In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date.
Without the CSS
property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable. Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence.
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of
versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience. This article will attempt to provide an
exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8
If you’ve been assigned to design or provide the architecture for a large e-commerce project or other information-heavy website whose success depends on content findability, it is vital that the design and layout of the search functionality for that website is considered carefully.
Stacking contexts in CSS are a complex topic. This article aims to explain everything you need to know about
so that you can use this special type of property confidently and effectively.
The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter.
Whatever creative field you are striving to excel in – whether it be graphic design, web development, blogging, or writing of another kind –
inspiration can be gleaned from any creative field
, even if that field is not directly related to what you personally do. As artists striving to stand out in our own niches, it is important that we notice and appreciate ground-breaking or otherwise imaginative work done in a broad range of artistic spectrums.