Web Design posts
Learn to count with CSS
Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.
This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers...
How to use the flexbox layout method (part 2)
In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.
Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.
We’ll...
What's new for designers, May 2013
The May edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, educational resources, wireframing kits, image tools, Photoshop extensions, web development tools, coding resources, and some really great new fonts.
Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.
As always, if we’ve missed something you think...
Common usability errors to avoid at all costs
One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user’s experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors.
A person looking through your site wants their ease of learning to be top-notch. They’ll want to quickly learn the user interface so that they can jump right in and accomplish fundamental, navigational tasks. Efficiency of use is another factor: after they’ve learned to navigate your site, they’ll want to accomplish tasks speedily. Even if the user has used the site before, they’ll need to easily remember enough of the process to be able to use the site effectively the next time. This is called memorability. When they’re using your site, they may experience some errors, but are these errors frequent...
How to use the flexbox layout method (part 1)
With every new revision of CSS, a plethora of new, exciting attributes come to light; one of which being the understated display: flex approach.
The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).
In...
15 really creative 404 pages
We’ve talked about ‘Contact’ pages. We’ve talked about the ‘About’ page. You know what to put on these pages because, hopefully, you’ve thought long and hard about it. And you know exactly what to put on the inside pages, because you have your content for those as well. You think you’ve got it all covered, right?
Think again! You have the opportunity to design and make use of your 404 error page. And quite frankly, you’re not a cool kid if you don’t have a super cool 404 page. Why do we go...
Flat design sites that work
Whilst the term “flat design” might not be a phrase you’re yet familiar with, you will definitely have noticed the concept and the design features whilst browsing the internet.
For those of you that have noticed an increase in the “drop shadow” trend in web design, the easiest way to describe flat design is to say it’s the opposite of that. Flat design is designing a website that has left behind the drop shadow and the 3D effects, and that is by all intents and purposes flat.
Flat design looks modern, fun, fresh and refreshingly simple compared to it’s 3D counterpart. Flat design is embracing...
How to launch a startup
We all know that there are a few differences between small businesses and larger corporations, especially when they begin considering the web design aspect of their marketing plan and branding. And while for the most part, the nuts and bolts basics are often the same for both, small business owners and freelancers often have to make many more considerations before they get to the actual design.
Before approaching a designer, small business owners should already have some solid ideas of what they need and what they want (which can sometimes be two very different things) ready to present. Larger corporations have creative departments and teams at the ready to bring the company’s brand to the web with ease. The people at the top rarely have to get their...
Why should you become retina ready?
Oh, look! It’s a brand spanking new, shiny technological feature. And it probably helps that it’s being implemented by Apple products. A couple of great sites (like this one) have already started using it. What does it do? Will it be around forever? What does it mean and when or why should I try it?
We’re talking about becoming retina ready. I’ll be honest with you; when I first heard about it, I just threw it to the side. It’s...
How to create a great 'about' page
Here’s one thing that never made sense to me: people make websites so others can find out more about them, but most “About Us” pages absolutely suck. They’re either really long and boring or really short and mysterious. Not many people understand the best way to go about these pages.
Many believe the “About Us” page is an afterthought because everyone wants to see...
Formal degree vs. self taught
For many web design professionals, there was no option but to be self taught. Years ago, the academic qualifications simply didn’t exist. Sure, you could study design, but you’d be left to learn the technology by yourself. You could take an I.T. course, but you’d be lacking design skills.
Perhaps that’s the reason web designers come from such disparate backgrounds; it’s hard to imagine accountants hailing from such wildly different career paths.
But times have changed, and academic...