What is the purpose of “Redesigning”?

The main purpose of a redesign is to be hip, or be “trendy”. If you see your competitors with new looking sites that are very visual and has a lot of functions, then surely in this generation, people are most likely going to view that site. And so, people/companies feel the need to update themselves so they can be in competition with everyone in addition to making their new site fit their brand and style as well as attending to their audience.

Sometimes people redesign in order to include a new addition to their community. If you run a ice cream store that recently acquired a cookie company, then most likely you want your site updated to match your new company.

Redesigning is a great thing to do to put a new life on an old site and give yourself a new image as well as giving your audience something to stare at.

Why design when you can replace/reuse?

What’s the use in designing when you can simply replace and reuse some old content, or old framework. It’s much easier and faster to redesign over something than to completely start from scratch. With this in mind, you already know what works, what doesn’t, what fits, what’s going to be a pain to code, and finally, you’ll know if it looks good since you can use the old site as a base.

As you may have seen on this site, there isn’t anything new other than a new background, the navigation moved down, and some shadows here and there. It’s the same site structure, but completely different look. Most people find it hard to design something new when in reality they can look at it in a different perspective and think of it as a redesign.

Redesigning in a Developer’s Mindset

The magic behind redesigning is the fact that you should keep the coding in mind at all times. When redesigning, you want to imagine how it’ll replace the code. Do they need to add something complicated, or can the extra pictures be just an extra div? As a designer and developer, it’s very easy for me to know and estimate how easy it is to code the new design and how complicated it’ll be because I’ve built the original base.

Redesigning in a Designer’s Mindset

When a designer tries to redesign, sometimes they don’t think about things like existing content, coding structure, etc… When they are told to redesign, they are opted to completely redesign it in order to surprise and give a whole new look. Pretty much a complete makeover. This leads to problems as it extends the coding process to a much longer period of time and not to mention a few graphical problems that may not be easy to fix with coding and so the redesigning process may have to be fixed.

Case Study: Soshified

Let’s look at this wonderful transition.

Soshified is a community forum based off a Korean female group called So Nyuh Shi Dae or SNSD for short. Originally, they’re design was simple at first. I can’t exactly remember what it was, however, the main thing, is they built it off from Invisionboard’s main framework which probably looks similar to this:

And their new redesign looks like:

Definitely a lot of features added than the normal look. Again, I’m not sure of their original layout so those features were probably already made, and they simply redesigned over it. From a normal person’s perspective, I’d think this was a whole new site and not an Invision board. And so remember, platforms are platforms. They run the site, but definitely not all looks the same. They may be structurally designed and layout the same, but the tip to redesigning are colors, placement, typography, and details.

What’s the verdict?

Was this completely coded from scratch and had a lot of problems, or was it a simply redesign pertaining to a few guidelines. That mystery will always be held by the designers and developer themselves.

Fooling the Audience (Clients)

And so designers/developers aren’t just designers and developers. The major talent that I believe we have is the skill to make an impression on the web whether it be a simple thing or a complicated thing. Not many people will know whether we took 5 minutes to do it or 5 hours to do it. In the end, it’s the end product that matters, and if it’s what people like, then our goal has been reached.

I gave out quite a few web resources that are almost pivotal to web development these days. They save so much time, and gives us a better hold and control on how we create websites in today’s world. Here are more tools and resources that will help your web development faster, efficient, and can I say more fun?

Placeholder Images and Graphics

Like most developers, we all come to the point where we have to go through the mock-up templates or open up Photoshop to create some placeholder images so that we can see how the website design looks with some images. I don’t know how much time I had to load up a whole new program just to make a blank image that fits a certain size so that I can upload it and then implement it into the website. Well, that portion of time is now saved by this really creative site (great minimalist design as well). Placehold.it is a site where you can simply put dimensions at the end and voila, you have yourself a placeholder image to place on your site.

There are obviously similar sites to Placehold.it but I find this one the most aesthetically pleasing in addition to a very easy name to remember without having to bookmark it.

Dummy Text and Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

If you haven’t seen this, then it’s time to get with the times. Lorem Ipsum is simply dummy text that designers and developer use to also placehold some content to fill the page rather than putting a bland “Content Here” or “Coming Soon“. You’ll never know how real content looks until you start having lots of it. So instead of trying to write a few paragraphs, you can simply generate paragraphs of these “Lorem Ipsum” text with the following generators. One is plugin through Firefox and the other is a simple site that generates it.

The add-on for Mozilla Firefox is pretty simple to use. You click on the button and you generate how many paragraphs you want and copy/paste it to your website.

This site is also a pretty good site for generating text since it doesn’t only provide just “Lorem ipsum” but also other content filling ways in case you think the Latin language of Lorem Ipsum seems dull or intimidating.

Wordpress Dummy Content

So you’re creating a Wordpress Theme but can’t be bothered with making pages, categories, tags, posts, and testing out the different tags like headings and blockquotes? Using Wordpress dummy content can help with that. All you do is download the XML file and then go to your Wordpress Admin and click on the Tools section and finally Import. You want to click on “Wordpress” to import posts, comments, and attachments from another Wordpress file. There’s also a plugin for this that you can use to do the same. Either way, your wordpress site will be filled with content so you can start styling and making sure you don’t miss a thing.

Frameworks – Wordpress, CSS, HTML, and More

You’re at a point of development where you’re doing the same thing over and over–Declaring your doctype, resetting your CSS margins and padding, or creating a 2 column website, etc… It’s time for you to use a framework. Frameworks are basically premade files that has common and tedious coding already inputted. When you use a framework, you’ll be immediately jumping into styling your website or coding in extra functions. You have to be careful though because some frameworks may not be suited for you. In my experience, I’ve used plenty of frameworks, and 50% of the time, the framework was just too much for me at times. There’s nothing wrong with that, but sometimes there are things in a framework that most developers don’t really need.

The best way to combat this is to make your own. I’m currently making a wordpress framework for myself that’s simple to use but at the same time has the functions I need to make the rest of my sites. Although all frameworks may not be for everyone, there’s usually one or two that fits into your field, and if there isn’t, take a framework and perhaps modify it to make your own. (Of course, take into consideration the licenses involved if you decide to release it to the public).

Here are some of my favorite frameworks for various projects:

Wordpress

I’ve only used 2-3 frameworks for Wordpress in my career and I have to say that all of them have been proven useful. Here’s my list of my favorites:

Thematic is my most favorite theme that has the most features and functions built into it. There’s a lot of magic going around in the back coding of the Thematic framework. There’s hooks and actions that you can use to add anything to your theme. In fact, this very site right here is built on thematic. Although it’s very simple, I had no problem using the framework to add everything on here from “Post thumbnails” to “Adding an extra footer widget“. By knowing a little php, you can do a lot of things, and with ease. It was also convenient that the framework also included Superfish dropdown menus as well.

Whiteboard is for coders that just needs a basic theme without all the extra stuff so that they can implement what they exactly want in the theme without spending a lot of time removing the fat off from heavily coded frameworks. Whiteboard was created by Brian Purkiss to provide a basic php framework because it was tedious to continuously make all the template files that was needed for Wordpress over and over again. My current framework is actually made from Whiteboard framework since I wanted to build upon a simple framework so I could fully understand what’s in Wordpress and what I can do to change it to what I want.

CSS

CSS frameworks have been very popular lately. They provide premade grids and classes that help layout the structure of the website and all you have to do is fiddle around with the sizes, images, and colors. Have I used a CSS Framework? To be honest, I haven’t used one because I’ve always become accustomed to just using my own or just type the CSS from scratch in addition, I found it more time consuming trying to learn a new framework for CSS when I’m already familiar with my coding. However, it doesn’t mean they aren’t useful or time saving. Check them out and see if they fit for you or not.

Here’s a link to a good blog post about frameworks: Top 12 CSS Frameworks and How to Understand Them

Now aside from actual frameworks for CSS there’s another type of CSS build that many developers use. It’s called a “CSS Reset“. A CSS Reset sheet is basically a file or can be code that basically resets all the styles of common HTML tags for all browsers. Every browser has a different default styling of simple tags like the paragraph tag or a DIV tag. The main differences are usually the margin and paddings that’s attached to them. In order to make sure that all browsers renders your website the same (or close to it), a CSS Reset is used to default everything “0″ and you can start giving numbers from there.

My most preferred CSS Reset is Eric Meyer’s CSS Reset. It’s simple, effective, and covers pretty much every tag for HTML.

Conclusion

There are lots of useful things out in the internet world that can help you save time with your development so you can get your jobs done quicker and save extra work. Why do extra work when you can automate it or find a resource that’s already premade? If there really isn’t nothing out there for you to use as a basis, then take a day off and create a framework or automated tool for yourself such as creating a photoshop action to crop all your big images or creating your own wordpress theme for faster development.

With these tools, I hope you can save yourself some time in which can be used to probably procrastinate more or simply rest and sleep for all those late nights you’ve stayed up to finish a project.

Have any time-saving tools that you like to use or made yourself? Give me a link in the comments below and I’ll check it out.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

What is CSS?

Cascading Stylesheet or CSS for short is one of the most important component in web design. As I mentioned before, HTML is simply a language that structures and puts your content on the site. CSS is where your site transforms into an actual design. CSS will provide the positioning, colors, images, and other design functions that will make your HTML site into a well designed website.

You can do a lot of things with CSS. Move your elements around, give them a different text color, change the font size, give them a specific width, center the object, giving them borders, changing the bullet image of lists, and even give them special attributes for when the user hovers or clicks on a link. We will learn about them as we continue these tutorials. In the end of all of these tutorials, we’ll be making a simple HTML website with a simple CSS based layout.

There are 3 different ways to stylize your site:

Inline Styles
Internal Stylesheet
External Stylesheet

Inline Styles

Inline styles is used within the HTML file. They are included within the tag elements that you want to style such as the div, span, ul, li, a, and other tags. You can add inline styles to these to make them unique to other elements. Saying that, when using inline styles, they take precedence over other styles set through internal and external stylesheet.

Here’s how to implement an inline style. In our case, I’m going to style the title and make it red:

<span class="titles" style="color:#ff0000;">My Title Here</span>

With this code snippet, the words “My Title Here” is now red. I used the CSS attribute of “color” and inserted the value for it. For colors, CSS recognizes different types of value for color. Two mostly used are a 6 character hex codes like #ff0000, #ffffff, #000000, and actual color names such as “red”, “blue”, and “gray”. (Look at resources below for some cheat sheets on what colors are available out there)

Personally, I don’t like to use inline styles as it clutters up the code in the HTML file, and I like to keep everything organized in their own file. HTML in html files, CSS in their separate CSS files. The only reason I’m mentioning this is because you’ll come across when looking at old sites, or perhaps a script or plugin for your site will have a markup that has inline styles.

Internal Stylesheet

Another way to style your website with CSS that’s more clean and organized than inline styles is the use of an internal stylesheet. With internal being the keyword, all the style resides within that same file that you placed it in and will ONLY affect that one file.

Internal Stylesheets are declared in the beginning of an HTML file within the <head> tag.

The code to set up the internal stylesheet is as follows:

<style type="text/css">

<style>

Once declared, you are now able to put any CSS attributes in there. Now we’re going to skip “how” to actually put it in there, as I’m going to show you what external stylesheets are. After that, then putting CSS attributes will be explained as they are the same with internal and external stylesheets.

CSS Attributes – These are attributes that will change the style of the element such as borders, width, height, color, etc…

External Stylesheets

External Stylesheets are the same as internal ones except they are located in a separate file. They are just normal documents with the file extension of “.css” at the end. They are mostly named “style.css”, “layout.css”, etc… It doesn’t matter what it’s called, as long as it has a “.css” file extension then we know it’s a CSS (Cascading Stylesheet).

You can make as many external sheets as you want, however, they won’t do anything until you link them into your HTML file or website. To do this, you insert a link tag to import the external CSS file into your HTML file. Again, this code must be placed in the <head> section.

Here’s the code snippet to import an external CSS file into your website:

<link rel="rel="stylesheet" href="style.css" media="all">

Notice the attribute href. Just like making hyperlinks, you can direct it exactly where you put your CSS sheet, whether it be in another folder or named different. For this tutorial, the CSS sheet is located in the root directory and labeled “style.css”.

Adding CSS attributes to elements

I’ll be using the external stylesheet for our examples. However, note that the code structure for external stylesheet will be the same for an internal stylesheet.

So open up your CSS file and the first thing we are going to learn is how to comment in it. Comments are important to document what you do in your project. By using comments, you can further organize your code as in any language where you learn to comment in addition to making it easy for other people to understand it if you happen to pass this code off to someone.

To start a comment, all you need to do is add a “/*” in front of your comment and then finish the comment by adding a “*/” at the end of your comment.

As a result:

/*CSS for Creative-Le Website Tutorial*/

For the purpose of this tutorial, there are three ways to target/select an element in your website to style.

Global elements
ID elements
Class elements

Remember on our tutorials about div, p, span and ul, li, and ol tags where we talked about giving them ID and Classes?

The reason why it’s important to have classes and ID is because you can use those names to target and select them in your CSS. Not all the divs in your html site are going to function the same, so it’s important to give them a special name, so that you can target them specifically and style them in a special way without having to mess up the other elements.

Global Elements

Global elements isn’t the actual name, but I’m naming it that because it basically covers all the basic html elements that it recognizes such as body, div, p, span, ul, li, etc… It’s not specific, so if you target a basic div and make all the text inside a div red, then all the divs in your website will have red text, unless specified otherwise by their ID or Class name.

Here’s a snippet of how to target a global element:


body{
font-size: 14px;
}

ul, li{
list-style:none;
}


Notice how each element is followed by an open-bracket “{“ and ends with a closed-bracket “}”. And also, any CSS attribute line has a semi-colon “;” at the end. This is the standard CSS coding syntax. And so, if there are any errors on your site, and you believe it’s an error in the CSS file, then it might be your syntax. Make sure you don’t miss any brackets or semi-colons.

With this code in the CSS file, we make all the text located within the body tag to 14px and we made all ul and li tags to have no bullets on them. list-style:none makes it so the list will not have any bullets. This is useful because many times, designers use lists for their navigation for semantic purposes but they don’t want the ugly bullets to be in the way.

Note: If multiple elements on site requires the same styling, you can include them in a series instead of declaring each of them individually. From the example above, I have “ul, li” and then my code. That means, all ul and all li elements will have that style. It’s a shorter way than typing:

ul{
list-style:none;
}

li{
list-style:none;
}

There are lots of global elements that you can target and style. It’s good practice to use them because the less CSS write, the less size the file will be. Try not to give every class a font-size: 14px; if you can just do that in one swoop by putting that in the body tag.

Class Elements – HTML Tags that have Classes

HTML tags that have class names are targeted and selected a different way than global elements. To target class objects, you need to have a period “.” in front of the class name. For example:

.copyright{
color: #ff0000;
font-size: 10px;
}

From our last website tutorial, we fully had a site with a few classes and IDs. Here I’m targeting the span class “copyright“. Notice the period “.” in front of it. Through CSS, I’m adding a color to it, in addition to making the font size of it 10px.

Also a note, that once you start selecting and targeting elements specifically, they override the pre-existing files. Everything in the body is supposed to be 14px but now that I targeted “copyright” specifically, it now changes to what I told it to be. Also, once stylized, any tag that has the class name of “copyright” will have the styling that I put in. So whether it’s a div or even a p tag, if it’s given a class name of “copyright” then they will also inherit the styles.

That’s what makes CSS very versatile and useful. To be able to change multiple elements instantly and to be able to change them individually, gives websites a lot of options for designs.

ID Elements – HTML Tags that have IDs

Similar to classes, targeting IDs require something special in front of the name. Instead of the period “.”, we use the number sign “#”. Keep in the mind the differences between ids and classes.

To target an ID, the code would look like the following, except the name will be replaced by whatever ID of an element you want to target.

#footer{
text-align:center;
}

This makes all text everything within the footer to be center aligned. And that’s how you target IDs.

Most commonly used CSS Attributes

There are many attributes that you can add to an element. Some elements are restrictive in that you may not be able to position, you may not be able to color it, etc… I personally don’t remember all the rules, but I know enough to just do a trial and error to see if it works for that html tag or not.

Below are just a few links to most commonly used CSS attributes that you can add in your code. At the end of this whole tutorial session I’ll make a quick cheat sheet with most of them so that you can download and don’t have to worry about researching it again unless you wanted to learn more.

Commonly Used CSS Terms
CSS Code Gallery of Terms
CSS Cheat Sheet
30+ CSS Cheat Sheets and Reference Guides

Conclusion

In this tutorial we have learned a lot about CSS (Cascading Stylesheets). We know how to do inline styles, internal stylesheets, and making our own external stylesheets. In the download below, I have included the files that I’ve used for this lesson. There is the index.html, about.html, images folder, and now a new file called “style.css”.

What I’ve done in the source was linked the external stylesheet with index.html, and put some CSS coding to stylize certain parts. What you can do is link the style.css file to the about.html and also mess around with targeting different elements in the html files.

I hope you enjoy the tutorial and begin to learn how powerful CSS is for a website. If it wasn’t for CSS, all websites would relatively look the same. Any questions, comments, feedback are appreciated. Make sure to comment below, and I’ll get back to you.

Download Source Files (.zip)

Additional Resources

W3 Schools – CSS
CSS Quick Tutorial
Introduction to CSS
CSS References
CSS Hex codes and Color Names

Design galleries are very popular these days.  Perhaps way too popular.  It seems like every so often you will see sites similar to these that pop out of nowhere, and they would either be the same category, or something different.  Regardless of it being trendy, overused, and abused, I have to admit that these design galleries make it so much easier to gain inspiration, references, and you can also learn from them and enhance your skills in design.

Here are two galleries, that I personally use for inspiration and ideas.

Creattica

One of my favorite galleries that I always visit for inspiration for things like logos, business cards, and Photoshop work would have to be Creattica.  Creattica contains all different type of graphics from logos to even flash work.  The gallery also features a section where anyone can upload their work to the site and get featured once it has been cleared by the administrators.  You can also sign up and rank other people’s work.

As a result, this gallery site can turn into a place to get critiques and help from others.

Inspirationti.me

Inspirationti.me is a very unique site.  One of the first things that really got me to remember this site was the domain name.  By having a .me instead of .com, it’s very easy to remember since it spells out “Inspiration Time“.  This gallery site is geared more towards web design.  The examples they show at the site helps me a lot to pick the sites that I like to use for inspiration since it saves me time without having to click on every link to see the site.

With the gallery being nicely categorized such as icons, huge typography, and even colors, it’s easy for anyone to search through the site to find the inspiration you need.

Design galleries are great to have in your arsenal.  There are many out there that cover a variety of categories: Web Design, Icons, Fonts, and Illustrations.  In the near future, I will be releasing one as well.  I’m not exactly sure what it’ll be about, but I’ll be making the addition when the time comes.

I hope you enjoy this week’s Mundane Monday, and that you will collect all these inspirational resources into one archive to have one powerful library of references.

If you have any galleries that you like to share, feel free to comment and share the link.