A website consists of many files: text content, stylesheets, scripts, media content, and so on. When you’re building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right, before you eventually upload them to a server. Dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website. Some of the following information may be basic to more advanced users, but perhaps can be used as a reminder guide. Let’s go ahead and further discuss how to manage website files locally.
Where should your website live on your computer?
When you are working on a website locally on your own computer, you should keep all the related files in a single folder that mirrors the published website’s file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, or at the root of your hard drive. For the optimal setup you could utilize cloud storage that is accessible locally on multiple clients (including mobile) with services like Dropbox and Microsoft Onedrive.
Choose a place to store your website projects. Here, create a new folder called web-projects (or similar). This is where all your website projects will live.
Inside this first folder, create another folder to store your first website in. Call it test-site (or something more imaginative).
An aside on casing and spacing
You’ll notice that throughout this guide, we ask you to name folders and files completely in lowercase with no spaces. This is because:
Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at test-site/MyImage.jpg, and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the spaces in your filenames with “%20” (the character code for spaces in URIs), breaking all your links. It’s better to separate words with dashes or underscores: my-file.html or my_file.html.
For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces, at least until you know what you’re doing. That way you’ll bump into fewer problems.
What structure should your website have?
Next, let’s look at what structure our test site should have. The most common things we’ll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let’s create these now:
index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file calledindex.html and save it just inside your test-site folder.
images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside yourtest-site folder.
Note: On Windows computers, you might have trouble seeing the file names, because Windows has an annoying option called Hide extensions for known file types turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the Folder options… option, unchecking the Hide extensions for known file types checkbox, then clicking OK. For more specific information covering your version of Windows, do a Yahoo search!
File paths
To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our index.html file, and make it display the image you chose.
Copy the image you chose earlier into your images folder.
Open up your index.html file, and insert the following code into the file exactly as shown.
<!DOCTYPE html><html><head><metacharset="utf-8"><title>My test page</title></head><body><imgsrc=""alt="My test image"></body></html>
The line <img src="" alt="My test image"> is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we’d need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
Insert the file path into your HTML code between the double quote marks of the src="" code.
Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!
Some general rules for file paths:
To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g.my-image.jpg.
To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.png was inside test-site, you could reference my-image.png from index.html using ../my-image.png.
You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.png.
For now, this is about all you need to know.
Note: The Windows file system tends to use backslashes, not forward slashes, e.g. C:\windows. This doesn’t matter — even if you are developing your web site on Windows, you should still use forward slashes in your code.
What else should be done?
That is about it for now. Your folder structure should look something like this:
Feel free to share your perhaps newly found information regarding how to manage website files locally on your pc. Spread the wealth (of knowledge).
For more information regarding Web Development, go to our latest Web Development guides.
A passive-aggressive client is one who is very passive when you ask for initial input, but when you submit the finished product, they aggressively attack it, demanding a lot of detailed changes, both major and minor. They had an idea of what they wanted all along but kept it mostly to themselves.
Even though they showed appreciation of certain ideas and elements throughout the development process, do not expect the passive-aggressive client to keep any of them as they send revisions your way.
Identifying Characteristics
Communication is mostly one-sided and unhelpful during project development.
Multiple statements can be contradicting and hypocritical.
Makes statements such as:
“I’m not really sure what we’re looking for.”
“Just do something that would appeal to us generally.”
“What do you suggest?” followed up by…
“You totally missed the point of what I (we) wanted.”
“For X amount of money, it should be better than this.”
“I have provided everything you needed, and you have produced nothing”.
How to Deal with
Stay multiple steps ahead of the passive-aggressive client.
Expecting the last-minute requests for revisions may soften the blow of the client’s aggressive behavior. For design projects keep your original layered design intact so that you can easily refine and change it later (not that you wouldn’t, but it does happen). Also, make sure your contract specifies a limited number of revisions.
Be willing to say “goodbye” if there behavior is simply not worth your time. Keep in mind there are essentially endless potential clients out there (other fish in the sea). Additionally, a project/task should be construed as a collaboration of multiple individuals. You are doing them a favor, and they are doing you a favor in return. It should not simply be seen as a boss (irrational) and worker (slave) scenario.
Want more Freelance info? Check out our latest Freelance Guides.
WordPress inc and lib folders (directories) aren’t something that I would say belong solely in themes or only in plugins. Instead, I’ve used the inc directory and lib directory in both themes and plugins.
The inc Directory
As my general rule, I use the inc directory primarily to place collections of functions that are related to core functionality but aren’t necessarily meant to clutter up the primary core of the theme or plugin.
For Themes
For example, if I’m working on a theme and I have a collection of functions for said theme that I use as helper functions, I’d much rather create inc/helpers.php than to drop them in functions.php. Over time, more helpers can be added.
In more specific cases, I also use the inc directory as a way to store core theme files such as theme-customizer.php or custom-header.php. This way, these files are focused solely on a single purpose and are easier to maintain over time. Plus, they are self-descriptive.
This keeps functions.php lean, and it keeps procedural programming files slightly more organized than having one giant “god-file” by the time of delivery.
For Plugins
In the case of plugins, I generally use object-oriented programming so the inc directory is normally used to hold additional classes that I write that are used as part of the core plugin file, but are dependencies.
This means that if I have the core plugin that depends on, say, a custom CSV parser or a serialization / de-serialization class, then these files would reside in inc.
The lib Directory
In short, the lib directory is used for third-party libraries. That is, these are used to make sure that I place code written by another author or team of developers in a place that I can easily retrieve (and attribute – don’t forget! :)) in my project.
The thing about third-party libraries is that they aren’t always PHP-based. Instead, they may be JavaScript based, CSS based, or a combination of all three. In that case, I have to take it case-by-case.
If it’s a third-party JavaScript library such as say, FitVids, then I’ll have a directory js/lib/jquery.fitvid.js. Similarly, if there’s a CSS libraries that I’m using, like Foundation, then I’ll drop those files in css/lib/foundation.css.
Finally, if there is a library that is composed of JavaScript and CSS and/or PHP, then I normally drop them in the lib directory in the root of the theme or plugin because most of those files will have dependencies on one another and it’s significantly more painful to try to go through and update all of the relative path references especially when you have to repeat the process when there’s an update.
Also, I know that an alternative to this is using a vendors directory. Though I’ve seen the convention and think it’s just as good, I’ve personally just stuck with lib.
Please feel free to share to this information to anyone who would like to learn more about the use of WordPress inc and lib folders. Of course also feel free to submit a comment.
If you want a recommendation of some high quality WordPress themes, plugins, and other digital assets, you should check out what envato.com is currently offering below.
The Apple Watch comes with a stock app called Breathe that reminds you to… breathe. There’s actually more to it than that, it’s a self wellness app of sorts, that reminds you to take a brief moment out of your stressful day and focus on your breathing to encourage relaxation. Additionally, the app has a minimalistic interface with a nice animation.
I thought it would be fun (and relaxing) to recreate the design, particularly in vanilla CSS. Here’s how far I got, which feels pretty close.
Making the circles
First things first, we need a set of circles that make up that flower looking design. The app itself adds a circle to the layout for each minute that is added to the timer, but we’re going to stick with a static set of six for this demo. It feels like we could get tricky by using ::before and ::after to reduce the HTML markup, but we can keep it simple.
We’re going to make the full size of each circle 125px which is an arbitrary number. The important thing is that the default state of the circles should be all of them stacked on top of one another. We can use absolute positioning to do that.
Note that we’re using the translate function of the transform property to center everything. I had originally tried using basic top, right, bottom, left properties but found later that animating translate is much smoother. I also originally thought that positioning the circles in the full expanded state would be the best place to start, but also found that the animations were cumbersome to create that way because it required resetting each one to center. Lessons learned!
If we were to stop here, there would be nothing on the screen and that’s because we have not set a background color. We’ll get to the nice fancy colors used in the app in a bit, but it might be helpful to add a white background for now with a hint of opacity to help see what’s happening as we work.
We need a container!
You may have noticed that our circles are nicely stacked, but nowhere near the actual center of the viewport. We’re going to need to wrap these bad boys in a parent element that we can use to position the entire bunch. Plus, that container will serve as the element that pulses and rotates the entire set later. That was another lesson I had to learn the hard way because I stubbornly did not want the extra markup of a container and thought I could work around it.
We’re calling the container .watch-face here and setting it to the same width and height as a single circle.
At this point, I was eager to see the circles positioned in that neat floral, overlapping arrangement. I knew that it would be difficult to animate the exact position of each circle without seeing them positioned first, so I overrode the transform property in each circle to see where they’d land.
We could set up a class for each circle, but using :nth-child seems easier.
.circle:nth-child(1){transform:translate(-35px,-50px);}/* Skipping 2-5 for brevity... */.circle:nth-child(6){transform:translate(35px,50px);}
It took me a few swings and misses to find coordinates that worked. It ultimately depends on the size of the circles and it may take some finessing.
Armed with the coordinates, we can register the animations. I removed the transform coordinates that were applied to each :nth-child and moved them into keyframes:
@keyframes circle-1{0%{transform:translate(0,0);}100%{transform:translate(-35px,-50px);}}/* And so on... */
I have to admit that the way I went about it feels super clunky because each circle has it’s own animation. It would be slicker to have one animation that can rule them all to push and re-center the circles, but maybe someone else reading has an idea and can share it in the comments.
Now we can apply those animations to each :nth-child in place of transform:
.circle:nth-child(1){animation: circle-14s ease alternate infinite;}/* And so on... */
Note that we set the animation-timing-function to ease because that feels smooth…at least to me! We also set the animation-direction to alternate so it plays back and forth and set the animation-iteration-count to inifinite so it stays running.
Color, color, color!
Oh yeah, let’s paint this in! From what I can tell, there are really only two colors in the design and the opacity is what makes it feel like more of a spectrum.
The circles on the left are a greenish color and the ones on the right are sorta blue. We can select the odd-numbered circles to apply the green and the even-numbered ones to apply the blue.
Oh, and don’t forget to remove the white background from the .circle element. It won’t hurt anything, but it’s nice to clean up after ourselves. I admittedly forgot to do this on the first go.
It’s also at this point that others in the comments have suggested that replacing opacityfor mix-blend-mode with a value of screen makes for a nicer way to blend the colors of the circles. I’ve since updated the demos and the code.
Pulse and rotate
Remember that pesky .watch-face container we created? Well, we can animate it to pulse the circles in and out while rotating the entire bunch.
I had totally forgotten that transform functions can be chained together. That makes things a little cleaner because it allows us to apply scale() and rotate() on the same line.
Like the circles, we want the animation to run both ways and repeat infinitely. In this case, the scale drops to a super small size as the circles stack on top of each other and the whole thing rotates halfway on the way out before returning back on the way in.
I’ll admit that I am not a buff when it comes to finding the right animation-timing-function for the smoothest or exact animations. I played with cubic-bezier and found something I think feels pretty good, but it’s possible that a stock value like ease-in would work just as well.
All together now!
Here’s everything smushed into the same demo.
If you’re having a stressful day, even you don’t have an apple watch, you can gaze into the CSS animation you’ve created and lull yourself into tranquility.
Make sure you don’t keep all of this peacefulness to yourself, and pass along your newly discovered knowledge.
For all things Apple, check out all of our latest Apple related guides.
Usage: Free for personal use (contact artist for commercial licence)
Kicking our list off is this comprehensive set of Photoshop brushes from freelance concept artist and illustrator Michael Guimont. We haven’t counted exactly how many brushes are included in this set, but there are lots of options to add serious flair to your artwork.
Deviant Art member sakimichan has made 56 of her favourite custom Photoshop brushes available to download for free in this big bundle. She recommends painting at 70-100% opacity with the pressure option on, and says that the brushes are already set up for this. Bear in mind these brushes were created in PS5 and although they work in CS4 and CS3, she isn’t sure about other versions. (Although the comments on the page suggest they work for CS6 and CC too.)
Aaron Griffin is a self-taught illustrator and concept artist known especially for his figure paintings. He’s generously offering up the Photoshop brushes he uses to create his digital paintings free of charge.
The second instalment of a popular set of free Photoshop brushes from Creative Nerds, Thick Acrylic Paint Strokes volume 2 lets you quickly add an authentic paint effect to your illustrations. The brushes are free for both personal and commercial work – but you’re not permitted to redistribute or modify them for resale.
Usage: Free for personal use; email him about commercial use
These 24 very hi-res brushes will provide a real-media feel to your design work. Some brushes look like paint tin marks, while others are thicker, meaning there’s lots of options within the pack.
A set of 12 excellent free Photoshop brushes from Chris Spooner. These high-resolution dry brushes are fantastically detailed, bristly and texture-rich. Featuring whispy lines and detailed edges, they’re perfect for roughing up your artwork or distressing your edges
Artist Kirk Wallace created these Photoshop brushes at home using ink and paper, and offers them to you for free. Perfect for creating rough, harsh textures, they’re also dynamic – you can click and drag to span larger areas without getting an ugly repeat effect, or you can paint with them.
Add realistic dribbles of paint to your digital designs with these free Photoshop brushes. They’re the work of DeviantArt user LilithDemoness and there are 14 in the set to choose from.
Creative Nerds is offering this spray paint effect Photoshop brush set completely free. The pack includes four high-res brushes (2500px each). Use them to add a distressed effect to your paintings.
Concept artist Darek Zabrocki has worked for some of the biggest projects and companies in the fantasy art world, including Assassin’s Creed, Magic: The Gathering and Halo Wars 2. He’s generously offering the set of Photoshop brushes he uses for his speedpaintings for free download.
If you’re looking to create a soft, hazy aesthetic in your work, try this free Photoshop brush from Heygrey. It is described as a ‘furry watercolor brush’, and the creator suggests using it to create hazy backgrounds. We’re especially impressed with the realistic watercolor effect that has been achieved here.
This large-scale Photoshop brush is handy for creating a watercolor spray effect in your digital artwork. The creator has achieved an impressively authentic effect, which you can apply to your own artwork with ease.
These watercolor splatters were created with the help of professional-quality watercolor paint on cold press watercolor paper. There are 32 high-res Photoshop bushes in the pack – they work with Photoshop 7, CS, CS2, CS3, CS4, CS5, CS6 and CC – and you can download the lot for free.
Brush Information (basic):
Photoshop uses the generic term “brush” to represent any of the drawing tools. Thus, the “paint brush” tool will have a brush and the “pencil” tool will also have a brush. This is a little confusing at first but you will quickly get the hang of the terminology. Actually, it helps to think of a brush as the “drawing edge” of whatever drawing tool you are using. Thus, drawing from Photoshop’s art studio metaphor, a paint brush’s brush would be the bristles of the paint brush while a pencil tool’s brush would be the pencil’s tip.
Photoshop uses the generic term “brush” to represent any of the drawing tools. Thus, the “paint brush” tool will have a brush and the “pencil” tool will also have a brush. This is a little confusing at first but you will quickly get the hang of the terminology. Actually, it helps to think of a brush as the “drawing edge” of whatever drawing tool you are using. Thus, drawing from Photoshop’s art studio metaphor, a paint brush’s brush would be the bristles of the paint brush while a pencil tool’s brush would be the pencil’s tip.
The importance of defining the “brush” is that once defined, brushes can be customized. For example, you can change the shape or size of your brush. Think of a dull pencil point versus a sharp pencil point and imagine the different types of lines the pencils would draw. Similarly, think of the shape of a calligraphy pen versus the tip of a magic marker or even a highlighting pen. Though the default brush is plenty powerful, it is useful to get the hang of working with custom brushes because each type of brush will be better or worse in various situations.
You probably already have a decent understanding of WordPress, but if you don’t here is some information:
WordPress is a free and open-source content management system (CMS) based on PHP & MySQL. Features include a plugin architecture and a template system. It is often associated with blog websites but it is widely used for other types of websites and web content including traditional business sites, mailing lists, forums, media galleries, and online stores. Essentially any website can be made with WordPress. Used by more than 60 million websites, including 33.6% of the top 10 million websites as of April 2019, WordPress is the most popular website management system in use.
Let’s take a closer look at the WTG top 10 WordPress web hosting providers for 2019.
If you’re interested in utilizing WordPress for a website, Bluehost is definitely the WordPress hosting provider to consider. Bluehost has both specific WordPress and WooCommerce (WordPress Ecommerce) hosting plans available (along with management support). It also offers a site migration service.
Bluehost regularly creates daily backups, even on the lowest-priced web hosting accounts. Bluehost is known for offering 24-7 phone support and SSH access for more technically advanced users.
WP Engine is a major player in the WordPress web hosting service providers world… chances are you’ve probably heard of them before. WordPress is within their name (WP:Wordpress) and they live up to their focus on delivering high quality WordPress hosting services. The managed servers they provide are among the best out there. Additionally, there are various options, so you can easily find the perfect hosting whether you want a managed, dedicated or cloud WordPress hosting service.
From personal blogs to a complex site for your company, organization, or brand, WPEngine handles your requirements with their in-house caching technology for massive scalability and speed.
1&1 IONOS provides a wide range of hosting services, along with a full e-commerce stack, domain name registration, Office 365 solutions, and online marketing programs.
The company also offers higher-end Windows and Linux servers, available with Plesk and cPanel respectively. We were very intrigued to see that the company offers Atom-based dedicated servers as well as the more traditional Xeon-based machines.
1&1 IONOS has some of the most reasonable monthly prices we’ve seen for a major hosting provider, and it comes highly recommended by WTG because of it.
Good phone, email, and chat tech support, along with SSD-based hosting for faster performance, and a free SSL certificate make 1&1 IONOS a WordPress web hosting provider that is tough to beat.
HostGator is a full-service hosting company, with plans for almost any need. Whether you’re starting out and need a very basic site, or need to be able to host a considerably large business with higher visits per month , HostGator has a service that can help.
Compared to some of it’s competitors Hostgator’s WordPress Cloud Hosting “Standard Plan” offers a larger storage capacity, and unlimited email addresses, all at a lower monthly cost.
InMotion is one of the most respected Web hosting providers, and at WTG we believe they put considerable effort to compete with their WordPress hosting offerings. We particularly like that the company offers free backups and SSH access, even on their lower-end plans. Integrated WP-CLI (Command Line Interface for WordPress) is also available.
They offer an all-SSD infrastructure, 24-7 telephone support in addition to the ticket/email/chat support options. Additionally they offer a basic site migration, in that they’ll unpack a site saved from another cPanel instance. InMotion provides free SSL and free malware detection. InMotion also offers a full 90-day money-back guarantee.
Hostinger, a hosting provider based out of Lithuania, apparently signs up a new client every five seconds. With 29 million users in 178 countries and subsidiaries in the US, Indonesia, and Brazil, the company has been in operation since 2004.
Hostinger has a nice selection of plans, all of which can be optimized for WordPress. We particularly liked that even the least expensive plans offered some level of SSH access for those who need it. The company gained points for its offering of SSD performance, dedicated IP, and regular backups for some plans.
Hostinger offers a 30-day money back guarantee with wording we wish more providers would use: “If for any reason you decide not to continue with Hostinger, we will offer a full refund on your purchase, no questions asked.” If you have any questions, the company has support chat lines available 24/7.
Every WordPress web hosting provider in this top 10 list provides quality hosting at a reasonable price, iPage is no exception. They have a low WP Starter monthly rate of $3.75/mo (very reasonable), as well as the recommended WP Essential monthly rate of $6.95/mo (very reasonable as well).
We believe they provide a good WordPress “hub” with hand-selected themes, pre-installed plugins, and a fully customized WordPress control panel.
We like how iPage offers 24-7 telephone support and a 30-day guarantee on top of its ridiculously low price. If you’re on a budget and want to try out WordPress web hosting, It’ll be tough to find a better starting price than what iPage is offering.
We believe that Liquid Web delivers well on its Personal, Freelance (best seller), Professional, and Business WordPress hosting plans. Liquid Web focuses on customer satisfaction, auto optimizations, and the ability to manage a lot of data through various sites (as needed).
To briefly elaborate, Liquid Web explains that the amount of page views should not be focused on in relation to costs but only in regards to the desire to increase potential customers, clients, conversions, etc. The page views are not readily viewable, and their are no overage fees.
Media Temple has the persona and culture of “For Us By Us”, meaning this a company for WordPress developers and designers by WordPress developers and designers.
Their mottos and mantras can be sensed in their attention to design and capabilities of handling as much technical aspects as desired. If you want to “get serious” about creating and/or advancing your WordPress site, then Media Temple is a great destination to make it happen.
GreenGeeks is an excellent WordPress hosting provider that provides top-notch support and everything you need to run a successful website.
GreenGeeks focus on clean and renewable energy is a breath of fresh air, literally. Performant hosting, great support, and a cause you can get behind. You can feel good about choosing GreenGeeks.
What exactly is a Managed WordPress site?
Due to the popularity of WordPress, several web hosting providers have chosen to specialize in WordPress and offer what’s known as managed WordPress hosting.
Managed WordPress hosting is a concierge service where all technical aspects of running WordPress is managed by the host.
This includes security, speed, WordPress updates, daily backups, website uptime, and scalability.
The idea behind managed WordPress hosting is to offer a completely hassle-free experience, so you can focus on running your business and doing what you are good at.
One of the best parts about Managed WordPress hosting is the premium support. Your support is provided by real WordPress experts with lots of experience rather than someone who is reading a support manual.
Customers describe managed WordPress hosting as “a Five-Star Hotel for WordPress” and “like having an army of WordPress experts on your side”.
Benefits of a Managed WordPress Site
The host will often import your previous WordPress blog, if you have one. Usually you’ll get some preinstalled themes and plugins to simplify customization.
There should at least be an option to automatically update the site, a security service like SiteLock will be on hand to keep your blog malware-free, and we would expect 24/7 support from a team with real WordPress knowledge.
It’s unfortunate, but sites do get hacked on occasion. Usually, WordPress sites are hacked through the backend, or through using faulty plugins or themes.
Shared web hosts can potentially be more vulnerable than managed WordPress hosts. Managed hosting solutions will also look at every aspect of your site to ensure that your site is always protected against the latest threats.
Most shared web hosting plans aren’t equipped to handle very large amounts of traffic. The last thing you’d want is to have your site crash once you start to receive large numbers of traffic.
Managed hosting services are equipped to grow with you, so your site will be ready to handle all of the traffic you send at it.
The best hosts go even further, optimizing their servers to boost WordPress performance, and sometimes throwing in extras like a content delivery network (CDN) to deliver great speeds worldwide.
6 Significant Companies and Organizations Currently Utilizing WordPress
Don’t underestimate the power and utility of WordPress.
As you probably guessed, WordPress naturally evolved to support large publications. The CMS makes it easy for publishers to produce lots of articles (especially with the Gutenberg editor), readers to consume lots of content, and search engines to index it all.
Even if you’re not running a major daily publication, this is helpful for your enterprise site because you can trust in the SEO benefits of WordPress. (Think about it – an organization like The Washington Post would not leave that to chance!) TechCrunch is another great example of an enterprise WordPress publication.
Yep, this leader of the entertainment industry uses WordPress to power its website. From featuring artists to sharing the latest Sony news, WordPress makes it easy to share different categories of content. No matter what your marketing team is after, WordPress probably has a way to do it.
One of the world’s most magical studios uses WordPress to tell its digital story. It’s a reliable way to bring your brand to consumers and keep your content up to date! And thanks to the ease of WordPress, your marketing team can focus on updating pages with the latest information, instead of fumbling with servers.
This popular water bottle brand uses WordPress for its website, which is largely an eCommerce site! You’ll find all the signature elements of online stores, including product pages, discount codes, and a smooth cart checkout process.
There are several themes and plugins built specifically for WordPress that make eCommerce sites a breeze to set up. Plus, if your marketing team is supporting sales with a content strategy, you’ll get all the blogging benefits of WordPress, too.
I’ve talked a lot about written content, but WordPress can masterfully display visual content also, as seen on AMC’s website. The entertainment channel uses its site to promote its TV shows, so it leverages photographs and videos to share those stories.
If you’re at all worried about professionalism, don’t be – even prestigious organizations like Harvard use WordPress. One of the reasons is that it’s a reliable platform, so you can trust that your organization’s online presence will always be accessible for web visitors.
No matter what content type your enterprise business is focused on, WordPress will help you show it off easily and beautifully, while also keeping your site secure and speedy.
Using web fonts can be a great way to improve the look and feel of your website. I love tinkering with different font combinations on websites and seeing the changes they make. Unfortunately, adding web fonts to your site adds extra overhead to your site and can often slow your page load times. If you’ve worked hard to ensure that your application has a fast load time, the last thing you want to do is slow it down with extra HTTP requests that carry unnecessary weight.
SPECIFY TEXT
There might be a time when you know in advance which particular letters of a web font that you’ll need. This often occurs when you’re using a web font in a logo or heading. Fortunately, Google Fonts allows you to specify the exact text that you might be using in the text= value in your font request URL.
For example, you would call the font resource like so:
By specifying the exact text you require, Google Fonts will provide you with a font file that is up to 90% smaller than the original file size! Whoa! In order to add more letters, simply add more characters to the text value in the font request URL.
On this page, only text was needed for the H1 tags in the header and footer. By specifying just the text you need, you manage to reduce the original file size from 18 KB to 3 KB.
CHOOSE A SUBSET
The average webpage often doesn’t require the entire unicode character set of a font file, which means it is best to restrict the character subset to the characters that your page requires. There is no need to support a language set that your site may never use!
In order to use this functionality, you simply need to use the subset=value in your font request URL.
Open Sans, which is one of the most popular Google web fonts, provides support for 20+ languages, and comes in at 217 KB total, but only 36 KB when restricted to a latin subset.
COMBINE MULTIPLE FONTS
Depending on your application, you might want to use font combinations to enhance the design. Instead of making a separate request for each font file, rather consider chaining the request together. To request multiple font families, separate the names with a pipe character (|).
In the request URL above, I am asking for the Yellowtail font and the Roboto Condensed font in one request. This simple trick will improve the load times of your font families.
PUTTING IT ALL TOGETHER
Because we want to keep our website pages as lean and fast as possible, this functionality allows us to combine all of these parameters together to produce a minimal font set. There is no reason why you can’t add web fonts to your site and still achieve fast load times!
In the Timeline window, click “Create Frame Animation.”
Create a new layer for each new frame.
Open the same menu icon on the right, and choose “Make Frames From Layers.”
Under each frame, select how long it should appear for before switching to the next frame.
At the bottom of the toolbar, select how many times you’d like it to loop.
Preview your GIF by pressing the play icon.
Save and Export Your GIF.
You’ve created a GIF!
What is a GIF?
If you’ve spent any time on the internet at all, you’ve probably come in contact with an animated GIF. It’s an image file that allows you to feature animated images, which makes it seem like the image is moving. Think of them as a hybrid between a still image and a video.
Why are GIFs great additions to virtually any website? They’re easy to consume, provide a new way to capture your viewers’ attention, and can potentially create an emotional impact. And since content that makes us feel something encourages us to share, these tiny animations are worth experimenting with.
The best part about GIFs is that they aren’t too hard to make. If you have access to Photoshop and a few minutes to spare, you can create an animated GIF in no time.
If you don’t already have a copy of Photoshop, here’s the official Adobe link to buy or obtain a free trial of Adobe Photoshop CC.
In the following guide on making animated GIFs, I’m using Photoshop CC.
How to Create an Animated GIF with Photoshop
Here’s a basic example of an animated GIF you could make using this guide:
Alright, let’s get started.
Step 1: Upload your images to Photoshop.
If you already have images created …
Gather the images you want in a separate folder. To upload them into Photoshop, click File > Scripts > Load Files Into Stack.
Then, select Browse, and choose which files you’d like to use in your GIF. Then, click OK.
Photoshop will then create a separate layer for each image you’ve selected. Once you’ve done that, skip to step two.
If you don’t already have the series of images created …
Create each frame of the animated GIF as a different Photoshop layer. To add a new layer, chose Layer > New > Layer.
Be sure to name your layers so you can keep track of them easily when you make your GIF. To name a layer, go to the Layer panel on the bottom right of your screen, double-click on the default layer name, and type in the name you want to change it to. Press Enter when you’re finished.
Once you have your layers in there and you’ve named them all, you’re ready for step two.
Pro Tip: If you want to combine layers so they appear in a single frame in your GIF, turn visibility on for the layers you want to merge (by clicking on the “eye” to the left of each layer name so only the eyes for the layers you want to merge are open). Next, press Shift + Command + Option + E (Mac) or Shift + Ctrl + Alt + E (Windows). Photoshop will create a new layer containing the merged content, which you should also rename.
Step 2: Open up the Timeline window.
To open Timeline, go to the top navigation, choose Window > Timeline. The Timeline will let you turn different layers on and off for different periods of time, thereby turning your static image into a GIF.
The Timeline window will appear at the bottom of your screen. Here’s what it looks like:
Step 3: In the Timeline window, click “Create Frame Animation.”
If it’s not automatically selected, choose it from the dropdown menu — but then be sure to actually click it, otherwise the frame animation options won’t show up.
Now, your Timeline should look something like this:
Step 4: Create a new layer for each new frame.
To do this, first select all your layers by going to the top navigation menu and choosing Select > All Layers.
Then, click the menu icon on the right of the Timeline screen.
From the dropdown menu that appears, choose Create new layer for each new frame.
Step 5: Open the same menu icon on the right, and choose “Make Frames From Layers.”
This will make each layer a frame of your GIF.
Step 6: Under each frame, select how long it should appear for before switching to the next frame.
To do this, click the time below each frame and choose how long you’d like it to appear. In our case, we chose 0.5 seconds per frame.
Step 7: At the bottom of the toolbar, select how many times you’d like it to loop.
The default will say Once, but you can loop it as many times as you want, including Forever. Click Other if you’d like to specify a custom number of repetitions.
Step 8: Preview your GIF by pressing the play icon.
Step 9: Save and Export Your GIF
Satisfied with your GIF? Save it to use online by going to the top navigation bar and clicking File > Export > Save for Web (Legacy)…
Next, choose the type of GIF file you’d like to save it as under the Presetdropdown. If you have a GIF with gradients, choose Dithered GIFs to prevent color banding. If your image employs a lot of solid colors, you may opt for no dither.
The number next to the GIF file determines how large (and how precise) the GIF colors will be compared to the original JPEGs or PNGs. According to Adobe, a higher dithering percentage translates to the appearance of more colors and detail — but it increases the file size.
Click Save at the bottom to save the file to your computer. Now you’re ready to upload this GIF to use in your marketing!
Upload the GIF file into any place online that you’d put an image, and it should play seamlessly. Here’s what the final product might look like:
How to Use GIFs in Your Marketing
1) On social media.
Pinterest was the first to enable animated GIFs, followed by Twitter. And by the summer of 2015, Facebook had also jumped on the GIF bandwagon. Then, Instagram changed the game with Boomerang, which lets users film and share their own GIFs. On any of these social feeds, animated GIFs can be a great way to stand out in a crowded feed.
2) In your emails.
Animated GIFs display in email the same way a regular image does. So why not spruce up your emails by replacing still images with animated ones?
Make use of GIFs by showcasing products, making event announcements, or otherwise enticing readers. Check out the GIF below from women’s clothing shop Ann Taylor LOFT: They made a present look like it’s shaking to create intrigue and get recipients to click through to “unwrap” their gift.
Your blog post doesn’t have to be about animated GIFs or structured like a BuzzFeed-style listicle to include GIFs — although, we do love a good dose of silly listicle GIFs every once in a while.
references: hubspot
Now you can share this info to anyone else asking “How do make an animated GIF with Photoshop?”
In this guide, I will show you how to create an animated sprite with Photoshop, using just a few simple tools. In the process, I will cover all of the basic rules that you can apply to your future pixel art illustrations.
Select the Pencil Tool from the Toolbar, it will be your primary instrument for this guide. Select a Hard Round brush in the Brush settings and apply the settings shown below. Your aim is to make the line absolutely sharp.
Step 2
Set up Pencil Mode for the Eraser Tool and use the same brush settings as below.
Step 3
Turn on the Pixel Grid (View > Show > Pixel Grid). If you don’t see this item in the menu, go to Preferences > Performance and turn on the graphic acceleration.
Note: The grid will be seen only on a newly created canvas with zoom level 600%and above.
Step 4
Go to Preferences > General (Control-K) and set up Image Interpolation to Nearest Neighbor. This will ensure that the edges of the objects you work with always stay sharp.
Go to Preferences > Units & Rulers and choose Pixels in the drop-down menu near Rulers to see all measurements in pixels.
2. Create the Sprite
Step 1
Now that everything is set up, we can start creating the sprite.
Make a sketch of a character with a distinct silhouette, and try not to overload it with many details. It’s not important to paint the colors, the outline should be enough, as long as you understand how your character should look. I prepared a sketch of a space trooper for this guide.
Step 2
Press Control-T or use Edit > Free Transform to scale down your character to 60px in height.
The size of the object is shown in the Info panel. Notice the Interpolation setting, it should be the same as we set in Step 4. In this case, it’s not that important, as we are only turning a sketch into pixel art, but pay attention to that feature in future when you work with pixelated objects.
Step 3
Zoom in to the image by 300-400% to make it easier to render. Reduce the opacity of your sketch.
Create a new layer (Layer > New > Layer) and draw an outline of your character with the Pencil Tool.
If your character is symmetrical, like mine is, just create one half, duplicate it, and flip it horizontally (Edit > Transform > Flip Horizontal).
Rule of the Rhythm: Try to split complex shapes into simple elements. When pixels in the line form a “rhythm” like 1-2-3 and 1-1-2-2-3-3 the outline looks much better to the human eye than a randomly drawn line. However this rule can be broken if the shape requires it.
Two rhythmic and one randomly drawn line.
Step 4
When the outline is ready, choose main colors and paint large shapes. Do it on a separate layer beneath the one with the outline.
Step 5
Smooth the inner side of the outline by adding shades of the color.
Keep adding more shades. As you can see, I corrected some shapes and details along the way.
Step 6
Create a new layer to add the highlight.
Choose Overlay from the drop down menu on the Layer panel. Paint with a light color over the areas you want to highlight. Smooth the shape of highlighted area by choosing Filter > Blur > Blur.
I flipped the painted half horizontally, added final color touches here and there, and merged the layers.
Step 7
The character now lacks contrast. Use Levels (Image > Adjustments > Levels) first and then change the tone or halftone with Color Balance (Image > Adjustments > Color Balance) to make warmer and cooler versions.
I decided to go with the third version. Now let’s move on to the animation process.
Final character with 400% zoom.
3. Animate Your Sprite
Step 1
Create a copy of the layer (Layer > New > Layer Via Copy) and move it 1 pixel up and 2 pixels right selecting Move Tool (V) and using your arrow keys. This is the key phase for animating the running character.
Change the original layer’s Opacity to 50% to see previous frame of animation. This is called “Onion Skinning.”
Step 2
Now bend the character’s legs and arms as if it is running.
Select the left arm using Lasso Tool
Using Free Transform Tool (Edit > Free Transform) and holding Control move the container markers to lead the arm behind the back
Select the shank of the right leg and move it down as on the first frame – we need that leg stretched.
Select the left leg and move it up – this leg bends up
Using Pencil and Eraser Tools, redraw all the elbow parts of the right arm.
Step 3
Now you will need to redraw the new position of the legs and arms as I explained inSection 2 of this guide. This is because transforming the legs and arms will distort the pixels, and the shape will no longer be clean.
Step 4
Make the copy of the second layer and flip it horizontally. And now you have one idle position and two running phases. Select each layer and restore its Opacity to 100%.
Step 5
Go to Window > Timeline to show Timeline panel and press Create Frame Animation.
In the Timeline panel, perform the following steps:
Choose Frame Delay time 0.15 sec
Click on Duplicates Selected Frames button to add 3 more copies
Change looping options to Forever
Step 6
To choose the proper layer for each animation frame, click on the Eye icon near the layer name in the Layer panel.
1st frame: choose idle position
2nd frame: choose the second layer
3rd frame: choose idle position once again
4th frame: choose the third layer
Press Space button to play the animation.
Final animation with 100% zoom.
Step 7
Now save your result. Go to File > Save For Web and select GIF format. Scale image size to 300% for better presentation and press Save.
Congratulations! You’re done.
In this guide, I showed you how to draw and animate a pixel art character in Photoshop. In the process, you learned how to set up your canvas and tools, how to draw your character using the Pencil Tool, as well as how to animate your character using Photoshop‘s Timeline feature. I hope that you learned something from this guide and can use these techniques to create some pixel art of your own.
references: tutsplus
I’ve listed some related items that may be of interest to you:
A favicon is a small 16×16 pixel icon that appears at the top of a web browser. It serves as branding for your website and a convenient way for visitors to locate your page when they have multiple tabs open. Because of their tiny size, favicons work best as simple images or one-to-three characters of text.
Example of favicons on a desktop browser.
To get a favicon for your website, you could hire a freelance designer to create one based on your logo and brand colors, or (I would highly recommend) create the favicon yourself.
Favicon Sizes and Formats
16×16 pixels is the standard size used by desktop website browsers. However, many website builders will ask for larger sizes. For example, WordPress requires 512×512 pixels and Squarespace asks for 300×300 pixels.
This is because favicons are not only used in browser bars. They are also displayed when a user bookmarks a site or saves a shortcut to their desktop or mobile home screen. In these cases, the size of the icon grows much larger.
Example of favicons on a smartphone home screen. These icons are significantly larger than the desktop favicons pictured further above.
To be safe, try to upload whatever image size is requested by your website builder. Again, for WordPress, this is 512×512 pixels. WordPress will automatically resize and display the proper image for each scenario, so you don’t have to worry about resizing them yourself.
The standard file format for favicons is .ico but most website platforms will also accept .png files.
How to Make a Favicon
The majority of websites I create is via WordPress (site icon), so I simply need to create a 512px x 512px (icon) png. I personally prefer using photoshop to create favicons, but other visual/photo editors should work even Microsoft Paint. Even if you have limited graphic design experience you should not be overwhelmed by any means by this “project”.
1. Create a blank 512px x 512px canvas (working area).
2. Create a basic icon via combining basic geometric shapes with a shape tool or even simply large letters with a text tool.
What is a favicon and how do you make a favicon?
Optional: I personally prefer a favicon w/o a background, so if using photoshop unlock the background layer and delete it which will create a transparent background.
3. Save the image as a 512px x 512px png file.
Congrats you’ve now created a favicon! It’s that easy!
Now you can share this knowledge/skill to anyone else asking “What is a Favicon?… How Do You Make a Favicon?”
I’ve noticed in the comments of other posts recently that some readers would like more “tips and tricks” articles, particularly about CSS. So in today’s post, I’ll be providing what I hope is a useful introduction to a bit of CSS “trickery” that can be used to create compelling microinteractions across your website. Specifically, we’ll be learning how to create CSS transitions and animations. We’ll also be talking about when and where you might want to use them.
What Are CSS Transitions and Animations?
The evolution of CSS over the years has lead to some really amazing innovations within the language. In the case of transitions and animations, what previously required a program like Adobe Flash or another coding language altogether (such as Javascript) is now possible with nothing but HTML and CSS.
This kind of language maturity, enabled by better browsers and higher web standards (among other things), has been a huge boon to web designers who double as front end developers. They can now do more with less and the whole process of web design/development has become a bit easier.
Nevertheless, CSS transitions and animations are still considered advanced uses of CSS. A spectrum of coding I try to stay away from in most of my articles since I do not consider myself an “advanced developer”–even in language as accessible as HTML or CSS.
That said though, after reading up on W3Schools and elsewhere I think a sufficiently simple introduction to these concepts is within the grasp of not only myself but a good deal of the WTG readership as well.
To begin, I think we need to have a really good idea of what, exactly, CSS transitions and animations are before jumping into examples and code.
CSS Transitions
A CSS transition allows you to change the property values of an element over a given duration that you set. To create a transition you must first identify which CSS property you want to add an effect to and then specify the duration of the effect. If no duration is set, the transition will not occur.
There are four transition properties:
transition-delay – specifies the delay, in seconds (s), you would like to assign your transition effect.
transition-duration – specifies the duration, in seconds (s) or milliseconds (ms), you would like to assign your transition effect.
transition-property – specifies the name of the CSS property your transition effect is meant for.
transition-timing-function – Specifies the speed curve of the transition effect. Meaning, the type of speed variation you want to select for your transition effect. There is no “fast” or “slow” options. Instead there are speed curve options that go from one speed to another. Such as “ease” which tells your effect to start slow, then go fast, then end slowly.
To create a transition you only need to change one of these properties over the duration you choose. However, it is possible to change more than one property at the same time; resulting in more dramatic transitions.
CSS Animations
Where CSS transitions are all about altering element properties as they move from state to state, CSS animations are dependent on keyframes and animation properties.
keyframes – keyframes are used to define the styles an element will have at various times.
animation properties – animation properties are used to assign @keyframes to a specific element and determine how it is animated.
There are eight animation properties:
animation-delay – specifies a delay for the start of an animation.
animation-direction – specifies whether an animation should play in reverse direction or alternate cycles.
animation-duration – specifies how many seconds or milliseconds an animation takes to complete one cycle.
animation-fill-mode – specifies a style for the element when the animation is not playing. Such as when it is finished or when it has a delay.
animation-iteration-count – specifies the number of times an animation should be played.
animation-name – specifies the name of the @keyframes animation.
animation-play-state – specifies whether the animation is running or paused.
animation-timing-function – specifies the speed curve of the animation.
The examples below will show you how these things are used together in various ways. Once you understand the relationships between them you’ll be able to figure out all kinds of interesting ways to use them.
A Quick Note on Vendor Prefixes
In your personal usage of CSS transitions and animations you will most likely need to use vendor prefixes. In some of the code below you will no doubt notice some vendor prefixes. Many of the source examples do not contain vendor prefixes, so if you want to see what the code looks like without them you can check there; I thought it might be helpful to provide a fuller picture.
For the uninitiated, when I say “vendor prefix” I’m referring to a prefix that needs to be added to your CSS based on the range of browsers you want to support your transitions and animations.
A good resource for identifying the necessary prefixes for each browser is caniuse.com. You can also check out the respective pages for transitions and animations on W3Schools. Or, if you’d like to avoid the mess of prefixes altogether, you can use a tool like Bourbon.io.
CSS Transition Examples
The CSS transition examples below are all transitions I’ve found from various sources that show what’s possible with these relatively new CSS capabilities. I’ve chosen to recreate the examples I found using CodePen so you can easily take a peak at the HTML and CSS required for each example while also seeing it in action 1. Linear
Again, the CSS animation examples below are from various sources around the web. Just as above, the CodePen allows you to see the animation and the required code in one place. You can also follow my source links to get more information (in some cases) on each example. 1. Pulse
Potential Use Cases for CSS Transitions & Animations
As I mentioned above, CSS transitions and animations are ideal for creating compelling and delightful microinteractions across your website. A lot of great WordPress themes and plugins come with some of these behaviors in place. A good example being the Divi Builder, which allows you to control transitions and animations within its module controls.
You may however wish to take the basics above and apply them other areas of your site in which a theme or plugin author has not given you easy control over. The following ideas might help you get started.
An email opt-in form that makes a delightful entrance and exist; such as bouncing in and folding closed to disappear.
A form that shakes when the essential information is not and someone attempt to submit it as finished.
Buttons that fold open, bounce, shake, or in some other way respond to hovering and clicking.
Preview images that turn over to reveal more information.
Subtle background graphics that move, creating depth.
Beautiful charts that spring into action as they load.
Google Doodle style experiments, logos, and more.
Games (for the really ambitious).
Ads that you can interact with or that subtly change shape to draw attention.
Beautiful product displays that rotate and respond to the mouse.
Beautiful stat counters.
And whatever else your imagination can think up.
Inspiring Showcases of CSS Transitions and Animations
If you need more visual stimulus than a list of ideas, I’ve take the liberty of compiling a small but impressive showcase of inspiring CSS transitions and animations that I hope will show off the potential illustrated in the rather basic examples I created above.
Logos in Pure CSS
Logos in Pure CSS is a great showcase of world famous logos re-created with nothing but CSS. In their current form they use animations and transitions to show how they are made and how they stack up against their traditional counterparts. However, I think it’s important to note that just creating your logo in HTML/CSS opens up a lot of interesting possibilities.
CSS A/Z is a showcase of HTML/CSS animated sketches; one for each letter of the alphabet. Great stuff and a lot of ideas for sprucing up seemingly insignificant elements on your website.
In Pieces is a magnificent (and highly complex) use case of CSS animation. It’s an interactive exhibition of the evolution of 30 species of animals. Truly breathtaking and a great indicator of just how powerful a tool CSS can be.
In your quest to master CSS transitions and animations, there is a good chance that you’ll need or want more detail than I am able to provide in this post. Additionally, someone else’s writing style may be a bette fit for the way you think. That’s why I’ve compiled a short list of other useful resources and tutorials below for you to take advantage of.
CSS transitions and animations are an extremely useful and versatile set of capabilities. You can do small subtle things or big in-your-face impressive things. But either way, it all starts with mastering the basics and moving on from there.
I hope this post is a welcome change of pace for those who have been requesting more CSS related content. If you have any more thoughts or requests on this post or future posts then please feel free to drop us a line in the comments section below.
A data table can be a pain to work with, perhaps comparable to herding cats or taming a lion. Tons of similar-looking, heavily-nested markup can be viewed as completely inflexible. One of the biggest problems I ever encountered was working on a particular company, whose content was almost exclusively data tables, it involved making tables’ cells line up nicely not only with each other, but also with those cells in other tables on the page.
Example of a data table with css:
The problems
There are a lot of headaches we encounter when building tables, and I imagine most of you reading this article will nod along to every point I make; it will be something that will have annoyed us all at some point or another. What this particular (and very specific) problem boils down to is trying to consistently format, size and align complex data layouts across multiple tables. Imagine a financial report; loads of tables of data with differing numbers of cells and columns that—from a purely aesthetic perspective—need to line up in some neat, coherent fashion. Achieving this is made very difficult by a number of different factors…
Cell widths
Tables lay out their cells—by default—in a rather unusual, almost haphazard way. There seems to be no rhyme or reason behind how and why they are rendered at the widths they are, which leads to columns and cells of differing sizes.
Spanning cells
In order to have cells span several columns (and rows, but that doesn’t pose the same problems), we have to use the colspan attribute. To have a cell spanning two columns we would write <t[h|d] colspan="2">. These are often unmanageable, and it can be confusing to remember what all your colspans should add up to.
Knock-on effects
Resizing one cell in one row can, and usually will, affect the layout of the entire table. This is is because all cells’ boundaries have to line up with the boundaries of the rest of the row and column in which it sits. You can’t just change the width of one cell, you have to change them all. This means that, for example, spanning one cell across xcolumns might mean having to update a whole load more colspans elsewhere in thetable.
Tables next to tables
The above problems are further compounded when you begin laying out multiple different tables on any given page. In Sky Bet world, this was pretty much every page. One table’s rendered layout might be vastly different to the tables above and/or below it, creating an unsightly mess of misaligned columns. You might have a tablewith no colspans above a table with some colspans, above a table with lots of awkward colspans. You might have a table with lots of cells above a table with very few. You might have any combination of amounts of cells and amounts of colspans. It all gets very hairy, very quickly.
Solution
I’ve come up with what I feel is a solid, very pragmatic solution.
There are two parts to solving this problem. Firstly we need to standardize the number of cells in every table, and then we need to force these cells to all be the same width. Think of this as a grid system for tables.
24 cells
Think about page layouts that adhere to a grid system; you might have a 24 column grid, but your page might only have two main columns which span, say, 16 and eight columns respectively. You can’t see the 24 columns, but they’re there. You might then have a large footer broken into three columns of eight (again, adding up to 24).
We need to apply this model to tables; we shall give all tables 24 columns, and then use a generous amount of colspans to knock our cells through into each other, into more useful layouts. Now every table we build will be based on a 24 column grid which will, firstly, make everything more consistent, and, secondly, it will make our maths much simpler. We just need to make sure every row’s colspan values add up to 24 every time.
This does mean that every cell in the table now has to carry a colspan, but as I said, this solution is a pragmatic one.
The reason we pick 24 is because it can take halves, thirds, quarters, sixths, eighths and twelfths; we can make a lot of layouts if we have 24 columns to play with.
For all this is more markup, it does mean we can begin to standardise our tables’ layouts so that multiple tables on the same page can share a lowest common multiple and are now able to be aligned to one another.
The short version of this section is basically: we are setting up a grid system for ourtables.
Equal width columns
It’s all well and good that all our tables have the same number of columns, but that doesn’t escape the fact that browsers will still render every table differently, and that the size of these cells will always vary. There’s no point having a 24 column table-grid-system if each column is a different width. Thankfully, this is the easiest part of the puzzle to solve and, probably, the most interesting part of this article: table-layout: fixed;.
Now it’s time to tame a data table with css.
There is a little known, and even less used, CSS property called table-layout. table-layout basically tells a browser how to render the columns in a table, and is, by default, set to auto. auto means that the browser will automatically render the cells in a table based on their width, which leads to the differently and inconsistently sized columns.
Interestingly, table-layout: fixed; is the backbone of my pure CSS, equal-width tabs.
Setting table-layout to fixed however, tells the browser to render every cell the same width as each other. Equally-sized table cells right out of the box!
Combining the two
By giving our tables a common grid system of 24 columns, and ensuring these columns are all of equal width, we can begin throwing together all manner of layouts.
I would propose that you opt into the table-grid-system via a simple helper class, perhaps .table-grid:
.table-grid {
table-layout: fixed;
}
Every time we want to build a table to a fixed and consistent layout, we simply invoke the grid and lay it out to that.
Hopefully now you’ve gained an edge and can control a data table with css on your project(s).
