It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.
But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.
Well, let me tell you a secret: They are doing it wrong.
Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).
A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!
Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D
So, let’s rock!Read More
With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.
There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.
This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.Read More
There is always vast room for improvement with any website, and small business websites are no exception. With the phone book a communication tool of the past, establishing a solid online presence is at the forefront of a lot of small businesses.
If you’re a small business owner, your website is a pivotal part of your marketing and branding, and shouldn’t be taken lightly. It’s integral to not just focus on appearance – but usability – as this will play a major role in how long your customers stay around.
In this article I will address the areas that factor into whether a small business website is ultimately successful or not. Pay careful attention to these areas in your next design for a small business, as they will reap benefits for your clients in the long run.Read More
How are ‘Right brainers’ different from ‘Left Brainers’?
Well, this is not a zoology question being thrown at you. If you are working on a team dealing with websites / apps, and if there is a design team working with a team of developers, you probably would be witnessing the answer to this question every single day you work!
This is an inevitable fact, and it is this difference that makes the two communities thrive, and the best team is the one which finds a way to converge the collective wisdom of both these ‘species’ into the final stage of their deliverable – An ideal human-machine interaction experience, filled with life and satisfaction.
But in reality, most of the teams stumble at this moment, when the ideologies of both of them should be given weight and injected into the final product, and this shortcoming, is the whole essence of this article.Read More
In 20 Reasons Why Your Website Design Sucks part 1, I’ve started with a short introduction about why clients should be just clients, and why some self-proclaimed web designers shouldn’t be “designing” at all. We then explored important concepts which you need to know before you start designing and planning a website. A thorough knowledge of concepts like balance, white-space, and overflow make the difference between a good and a bad design.
Like the previous article, we’re focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time I won’t show you extremely bad layouts that make you laugh, we are now on the next level and will focus on bigger mistakes that good designers make.Read More
So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.
They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).
Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.
So, let’s rock!Read More
Summer’s here – ready or not. For some of you it has certainly brought some changes but some of you haven’t even noticed the new season’s here. I live in a resort town couple of minutes from the sea so summer has definitely changed my daily routine. I’ve spent nearly all these past days by the sea and acquired a quite red skin color which hurts a bit. For that reason I’m now at home and sharing this article with you. Summer can be incredible and memorable if want it to be. This article presents seven tips for designers (and anyone else) to make your summer superb and get you ready for the next working season.Read More
As a graphic designer, you know your job entails helping your client sell their service or product. Your ultimate goal is to help viewers understand a message and, in turn, reap benefits for your client. Developing a process to follow each time you take on a new project can help tremendously in achieving results you and your client are happy with. Whether you’re a graphic designer, web designer, programmer or otherwise, having a system set up will help you get the work done faster in addition to keeping things organized and the designer/client relationship a positive one.
In the past few years the letterpress text effect has become a huge trend in web design. It’s being used in headers, headlines and even interfaces. The love for the letterpress effect has been transferred from printing machines to our computer screens. If done right letterpress can be a splendid and neat accent in your design. Another superb, yet often underrated, text effect is embossing. You may have seen it in some menus though. Text embossing is another effect which digital art has borrowed from traditional design. This tutorial will guide you through creating the letterpress and embossed text effect in Photoshop. The tutorial will be using some basic layer styles together with some more advanced techniques. If you’re a beginner in Photoshop text effects, continue to read to find out how to achieve fantastic looking letterpress and embossed text effects in Photoshop.Read More