Take a look at some of the exciting web trends to look forward to in 2011 including the breakthrough of HTML5, CSS3 and other concepts!

HTML5 and CSS3

You can’t talk about website design trends for 2011 without mentioning HTML5 and CSS3. Both HTML5 and CSS3 make websites easier to build and link with social tools.

This latest version of the HTML enables the designer and developer to create more readable code and build layouts that are semantically meaningful. It introduces advanced features that help you structure mark-up. Other HTML5 features are APIs, dragging, drawing graphics on screen, canvas, keygen, output and progress.

CSS3 is the latest module of CSS, Its much more advanced set of features makes this new version the tool of the future. Some distinctive aspects of CSS3 are features like “border radius”, “box shadow”, multiple background images and text shadow. Animations with CSS3 are made easy, subtle and lightweight.

Minimalism

Minimalism style of designing whether in a website or in print has the capability to create high visual impact designs that create a feeling of space and light. By the removal of superfluous elements and by retaining only essential elements, minimalist designs enhance the message and draw in the user.

Especially With the need for websites to be mobile-friendly, compatible and accessible, design has to be kept simple. The minimalistic approach is easier it is to navigate and comprehend.

Typography

Designers have started to use typography an integral part of the overall work rather than a liability and this trend will be more clearly seen in 2011. With HTML5, CSS3, and new typography programs, there will be many fonts available that do not slow down search engine optimization. With the growing numbers of tools and applications, typography will become a primary design element in its own right. A new trend has begun to gain strength and that’s utilizing big and bold fonts with the exclusive intention of grab the surfer?s attention.

Textured Backgrounds

As you look around in 2011, you?ll see how textures are being used in many different ways by Web designers. The grunge look that was so popular during the nineties has been reinterpreted and adapted to the present time, with a new style of combining grungy textures along with clean interfaces and bold typefaces.

One Page Websites

One pay layouts our like business cards and are becoming a common medium for users to ?get straight to the point? – skills /services/products that the site is offering. The challenge for desiners is to put everything you need in a single page in a way that will get the user attention and interest.

It?s a great way to have a large impact with a small amount of content.

Outsized Logos/ Headers

To make an unforgettable impression on the visitor, the trend for 2011 will be oversized logos on an equally oversized header. Since a header is the first impression a customer gets large and interactive headers with special offers, promotions, and calls to action help increase the number of conversions a website creates.

Hand-drawn Designs

In 2011 the trend towards incorporating hand drawn elements into web designs will be more widely seen. Hand drawn elements will be seen in navigation bars, as backgrounds, as accenting elements, or as an entire site theme. They charm of these hand drawn elements is that they give websites a very unique, out-of-the-box, and organic/realistic look; they can help to set surreal sceneries and also are more lightweight than complicated designs.

Modal Boxes (Lightboxes)

Modal boxes are basically the next generation of pop-ups and a leading trend in designing. They are a cleaner, more user-friendly alternative to the basic JavaScript pop up windows that have been around for years.   Clean, crisp, and focuses the user on the information you are presenting, whether it is a picture, text or a video.  This little tool helps the presentation go a long way.

Enormous Images

Large scale backdrops will surge in 2011. These images will be high resolution, and covering the entire site. Large photos are an instant way to grab your audience? they cannot help but to see it and have an.  Trends point to soft and slightly transparent imagery that does not over shadow your content, but harmonizes with it. opinion about it.can create the stunning visual effect and  add more life to a site design compared to the traditional tiled.

Oversized Footer

Oversized footers may be everywhere already, but 2011 will find them even more exaggerated. Footers are becoming more important every day as designers realize that they?re a vital part of every design and they must be utilized with the same importance than the header.

Footers are now areas where you can place things like social stream boxes, contact forms and tons of information.

There are many ways for implementing this concept. More than that, since the introduction of technologies such as CGI, ASP, and PHP that allow web developers to generate dynamic web pages, a lot of companies have found creative ways to develop their website applications using this concept as their foundation.

Over the past few years, the internet community has been trying to create a set of standards for creating web sites. A new technology called CSS or Cascading Style Sheets has been introduced. There is nothing actually new in the way CSS handles a web page’s presentation. CSS allows the developer to define a style for each html tag element. This is similar to the method developers (programmers) used in the old days when they attached a variable to each html tag defining its style. The major difference is that CSS style definitions can be interpreted by most of the existing browsers available while in the older method the dynamic web page engine performs the interpretation.

The internet standards organization W3C has encouraged the use of CSS by enhancing its ability to control the web page’s look and feel. New style options have been added to the CSS specifications that have not been added to the HTML description language. There’s no doubt that this was a smart move. It has induced the web developers to use CSS to achieve an attractive web page that also supports the principle of content separation. Unfortunately CSS did not find its way into the internet mainstream easily because of compatibility issues with most web browsers. These days CSS is widely supported by most of the major web browsers, while CSS2, an enhanced version of CSS still has serious compatibility issues.

Obviously, the separation of content from its presentation deals not only with the styling aspects, but also with browser compatibility issues. The styling aspects were the first to be handled by web developers and web designers. As the complexity of information technology (IT) systems become increasingly more difficult to maintain, the internet community is looking for a solution that will become a standard so that content can be easily be managed. One goal for this standard is to define a “language” that IT systems can “talk” with each other and exchange information. Large corporations have historically used many different software platforms in their networks to conduct business. Internet based applications can provide a single platform that can act as an intermediary between all of these different systems and allow communication between them.

XML (Extensible Markup Language) has been adopted as a standard to present the content itself. OFX (Open Financial Exchange) is a close relative of XML that has been widely used by financial institutions who have been using Electronic Data Interchange (EDI) systems to transmit orders and invoices over private networks, intranets and the internet for several years.

The need to present the content in a standard way that separates it from any design elements was so urgent that for the first time in software development history all the three major players (SUN, IBM, and Microsoft) actually agreed with each other and XML become a standard almost overnight and was adopted by many content providers and news agencies.

Yet the concept was not fully implemented. CSS handles the styling aspects while XML handles the document content. What about the webpage layout? New websites are been published each day by thousands. Every day millions of new web pages are being added to the internet’s global database. Webmasters have found that changing the page background color or the font color might not be enough to keep their website fresh and polished to compete with other new websites. However, changing the website layout can sometimes involve a lot of effort because it involves modifying the web page source code. XSL was introduced to solve that issue. Consider XSL a set of rules that can describe a web page layout. Combine it with XML (and optionally with CSS) you will get a valid html file.

XSL is very similar in its mechanics as any other dynamic web page generator. Beside the fact that XSL is platform independent, its biggest advantage is that it can be processed on the client side. The web server sends the client the content using XML format and the layout definition using XSL format. By doing that, the load on the web server’s CPU is reduced allowing it to perform other tasks more quickly. However, XSL was not adopted by all the major web browsers. So unlike XML, XSL has not found its way to the market easily.

Before you run back to your desk and start redesigning your website according to these magnificent standards, you should be aware that those technologies are really not needed most of the time. In fact, using them unnecessarily can cause performance problems. CSS usually will not cause your system to slow down. Just try to keep your CSS file as small as possible. Many web developers maintain large CSS files with lots of unused style definitions. Deciding to work with XML is a serious decision. If your website generates dynamic web pages supported by databases like MySQL, adding additional XML functionality will definitely reduce your website performance. Sometimes you won’t have a choice and will need to upgrade your hardware to maintain your website’s performance. There is no rule of thumb for this issue. The decision should be based on each system and its engineering demands. Try to predict what kind of future services your website will be providing. Plan your website properly at stage one and save yourself lots of effort later.

Consistent Design

Say, you want to make a change to all the pages of the website. CSS enables website designers to make that change in the CSS style sheet of the website, and this change is automatically made for every page of the website. This is a major advantage when you have a big website. CSS saves a whole lot of time. Moreover, the use of CSS ensures that the styling of your entire site is consistent.

Reduction of Bandwidth

The file transfer size sees a dramatic reduction through the use of CSS in website design. This is because with the use of CSS there is distinct difference maintained between the content of the website and its design language. The CSS document won’t be stored internally but on the outside. Only when a visitor will access the site will the CSS be accessed.

For Search Engines

Search engines consider CSS a coding technique that is inherently clean. Unlike many other coding techniques, where search engines have to literally struggle to read the content, CSS is easy to understand. The use of CSS also decreases the amount of codes and leaves more room for content.

No Issues with Browser Compatibility

A major advantage of the use of CSS is the fact that it is compatible across a range of browsers. CSS helps in making a website more adaptable and ensures that users can use most browsers to access your site.

The cost of creating and maintaining a CSS website has reduced dramatically over the last 10 years. Today it costs just a meager $2000 to $3000 to create a full fledged website based on this technology that can help you advertise and sell all your products and services. In comparison to the benefits it has to offer, this price is relatively small.

This article aims to demonstrate the advantages in learning modern web design techniques, focusing on CSS. We’ll learn what CSS is, explore the business factors in building websites in a modern way and find out how much easier and beneficial it is to design using CSS. What this article isn’t is a guide on how to make websites with CSS.

So what is CSS?

CSS (Cascading style sheets) in very basic terms is a way to style elements of your website. It is purely a presentation tool.

Despite many threads in forums and amateur articles, it is not a replacement for table-based design. Actually, CSS can be used to enhance table-based designs. But CSS comes into its own when combined with div-based design. We’ll go into this later…

Business drivers for using CSS

CSS and div-based sites produce cleaner code. No table rows and columns in the code. So what does this cleaner code mean?

Well, firstly it means that search engine spiders see a higher ratio of useful content compared to table designs. This leads to higher rankings in search engines in most cases. The search engine can also ‘see’ the page more clearly. It will not have as much trouble finding links on your pages as there is less ‘coding rubbish’ to contend with. Essentially, a modern site will be friendlier and accessible to a search engine.

Secondly, cleaner code often means smaller file sizes. Shaving off a few kilobytes from your web pages may seem like no real advantage to you, but imagine your site has a high amount of traffic. You may save massive amounts of bandwidth over time thus saving you money on hosting. Another upside of smaller files is that the user won’t spend as long downloading your pages and ultimately be happier when browsing your site. So your site is more efficient.

Another point to take onboard is that modern sites are actually quicker to build. Once the basic CSS techniques are understood, there is no reason why it should take longer than a site built with tables. The cost saved on development time could be huge on a larger site.

Finally, to be blunt, larger clients are often knowledgeable about modern techniques and you won’t get a foot in the door if you don’t use modern code. Flipping this on its head, however, don’t go out there and flaunt yourself as a modern coder – this really is expected and not a selling point in my view. It’s akin to a mechanic saying “I use modern tools.” Surely not!

Advantages of designing using CSS

I hope the business case has at least made you wonder whether to update a few old sites. If not, read on to find how your new projects can benefit from a little bit of modern web design.

As mentioned earlier, CSS is a powerful tool when combined with div-based design. Here’s some reasons why:

Firstly, compare a site built without CSS with a modern design. The old school coding method will most likely be full of font tags that determine what colour/size elements are. This may work, but imagine you suddenly want to change your font styles across 200 pages? It would take a huge effort to do this. With an external CSS file, fonts (or any other elements for that matter) can be changed across your entire site with just a few minutes of coding. Quick and efficient. More control.

Next, defining a style externally means it is reusable. Making a style with a red border for example can be used again and again, whether it’s a link, an image or whatever. Efficient and logical.

Finally, when using modern code, you’re on your way to produce accessible, standards compliant design. A legal requirement for sites of today.

It has long been debated that the use of style sheet languages such as CSS is said to be much more efficient than the use of ordinary HTML tables. Ever since the growth of the world wide web, professionals of the industry have sought ways on how to improve the presentation of their websites both efficiently and effectively. Style sheet languages such as CSS have perfected this need and became the universal language for designers and developers alike. The question is, what are the reasons why CSS is much more useful than the use of HTML tables?
Several advantages has been cited on the use of CSS in web design. Some of those advantages are as follows:

Faster loading of pages Efficient and easy Consistency SEO friendly Accessibility Maintainability Usability Sophisticated layouts and designs Bandwidth efficient

Faster Loading of Pages One common problem of using tables for web layout is the slow loading process. This is usually caused by using too much markup tags in one HTML file such as “td align”, “td width”, “bgcolor”, “width”, “height”, “br”, “font face”, “font color”, “cellpadding”, “cellspacing”, “border”, etc along with the content of the HTML. CSS makes up for this by separating the content of the web page which is text and images into the HTML file and the visual presentation such as the web design, positioning, and text sizes into a CSS file. In a CSS-based layout, table tags or markups are replaced by using its own language such as the popular “div”. This replacements includes:

Instead of the usual table tags such as td align or td width, CSS have replaced this by using “divs”.
Removed all layout editing markups such as height, width, cellpadding, cellspacing, border, bgcolor, font tags from the HTML. All layouts are found in the CSS file. header tags such as h1 or h2 are used for font tags headings. Breakline tags (br) is not used.

Because CSS have cut the use of too much markups, websites can load a lot faster than using tables which is good when attracting visitors to a website. Visit an online Web design Philippines site to learn more about CSS and its use in web design.

Efficient and Easy As mentioned above, by using CSS, the layout of the HTML is separated from the content thus allowing a quicker, efficient, and easier redesign. Tables would require more time as the HTML content and layout tags are in the same file. By simply editing the CSS file, designers could easily rearrange the size or the color of an element found in a website.

Consistency In relation with the above statements, web designers can easily redesign the whole website by just editing the CSS file. Unlike the use of table in which a designer would have to open every HTML file just to edit a simple element found in every page such as a header, CSS can offer an easy way to edit it all in one CSS file. All it takes is opening the CSS file, edit the elements found in the header (such as width, height, etc), and re-upload it.

SEO Friendly There are several reasons to this. This reasons are:

Because CSS is much faster to load than tables, search engine spiders could easily crawl through the website. Because CSS doesn’t require too much markup which makes it easier for search engine spiders to crawl the website. The use of header tags such as h1, h2, or h3 makes it easier for the search engine spiders to determine the information in a website.
The use of Javascripts for visual effects are replaced by CSS’ own effect engine which makes it more SEO friendly.

Accessibility

Because of the Internet’s rapid growth, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Tableless Web design considerably improves Web accessibility in this respect. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure.

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page. For more web design and development solutions, then visit an online Web design Philippines site.

Maintainability Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors, changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.

By use of CSS, virtually all of the layout information resides in one place. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

Usability By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This allows a contributor, who may not be familiar or able to understand or edit CSS or HTML code to select the layout of an article or other page they are submitting on-the-fly, in the same form.

Sophisticated Layouts and Designs Unlike the use of tables, CSS offers freedom in designing. Because of the rigid, inflexible, and grid based form of tables, designers cannot utilize their potential in designing. CSS offers absolute positioning of elements paired with the z-index property allows CSS-based designs to position elements on top of one another (like layers in Photoshop), allowing for more unique, complex, and beautiful layouts. Bandwidth Efficient A stylesheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network. Visit Web design Philippines site to get the solution you needed with your website.

So, you have finally decided to build yourself a website, but really have no idea where to start. The following 10 steps will give you some insight into what you need to address when creating a search friendly website from the ground up.

While this article is not an exhaustive líst of everything you need to know, it does touch base on many of the important aspects of creating a new website.

Step 1 – Keyword Research
Even before you choose your domain name, you should put a little time into some keyword research. Research all the possible keywords that will fit your industry and the website you plan on building. Having a clear idea of what your end targets are will make the rest of your job much easier and help things to just fall into place. Take a look at Keyword Research for SEO, written earlier this summer, for more help on this.

Step 2 – Domain Selection
If you already have an established brick and mortar business and the website will be an extension of that business, using your company name as the domain name is in most cases the best idea. If your company name is either irrelevant, or simply unavailable, you may want to consider a domain that has your target phrase listed as part of the domain.

A great example of this is if your site is focused geographically. Using the location as part of the domain when possible will give you a little extra juice with the search engines and help draw people to your site as they instantly can see the relevance in the domain.

Let’s say that you are building a website focused on your home town, “Somewhere USA”. A domain you may consider could be “Somewhere.com”; however, this would probably be already taken. Other options such as “SomewhereInfo.com” or “SomewhereGuide.com” may be good alternatives. The same goes for retail stores. “SomewhereCameras”.com or “SomewhereBakery”.com would also be good choices.

Avoid excessive use of hyphens; sometimes it is appropriate to use one, but if you can help it, avoid more than that as it can appear messy and even spammy in some cases.

Step 3 – System Back End
If you plan on having a large scale website that will grow and change constantly then you may want to consider a content management system (CMS) such as Joomla. If you decide to go this route, you want to ensure that whichever CMS you choose is search engine friendly and offers items such as unique title tags, custom URL’s, and full control over content, heading tags, image alt tags, etc.

Starting a website using a non-friendly CMS is like buying a car without an engine. Sure it may look great, but it won’t get you anywhere.

Step 4 – Site Structure & Navigation
This is really one of the most fundamental aspects of your site creation. If the structure of your site does not work well, then your site may be doomed from the very beginning.

Take a look back at your keyword research and brainstorm all the areas of your site that you may want to develop content for. In some cases you may find valuable keywords that would fit perfectly into a few pages of content for your site. If the phrase and the content would be a good match for the theme of your site, go ahead and note them as pages to create. Get a líst, or flowchart, of all the content you plan on adding and sort those pages into relevant categories.

Be sure your site files are saved in a way that makes sense – this includes both the file name, and the complete path to the file. Save files, including similar content in a relevant subdirectory, with simple file names representing each. Let’s take an example of an informational site dedicated to a specific geographic location. If you have a series of pages dedicated to recreation, you may save them as:

/recreation/parks.html
/recreation/trails.html
/recreation/beaches.html

Keeping your URL structure clean and tidy can not only help with search engine rankings, but it will give a good visual impression to the site visitor as well. Often, using each of these categories as main points for your primary site navigation may make the most sense.

Also be sure to keep your site relatively flat, with as few layers as possible. Don’t make the search engines follow a dozen links to get to the deepest levels of your site. Unless the site is literally tens of thousands of pages, there is no need to click more than 2 or 3 links to get to any deep content. The shorter the path to an internal page, the more credít by the search engines.

Step 5 – Navigation
When developing the end site, you also want to make sure that your site navigation is search engine friendly – this is critical if you ever want free organic listings.

If possible, use a text based form of navigation. You can use CSS to style the text links to fit into your graphical design. Text links are the best method, but image based navigation and even some forms of drop down menus are also search engine friendly.

If you choose to use image based navigation be sure to include image alt text relevant to the link to give something for Google to associate with the linked page. If you absolutely must use Flash, or any form of navigation not friendly for search engine spiders, be sure to supplement this with text based links on another location of the page.

Step 6 – Analytics
It isn’t ever too early to start thinking about your stats. Before your site goes live you must have some form of accurate analytics in place so you can measure your site’s traffic and progress.

There is an endless supply of analytics options out there to choose from. You can simply use the stats software that comes free with your web hosting, however, more often than not, they tend to be very basic with no flexibility. Advanced choices such as ClickTracks can give you rather in-depth statistics, but for a very small mom and pop operation it may be too expensive. Google Analytics, is a free option that can give you most, if not all the data you will need and does not require access to your raw log files.

If you do opt for an option such as ClickTracks, check with your host to ensure that you will have the raw log files you require. StepForth can also help you with your statistical analysis and offers a number of inexpensive ClickTracks service packages.

Step 7 – Content Creation
Now is the time to get that new, fresh content posted to your site with the SEO in mind. Make sure that the content you write reflects your industry and target keywords. You don’t need to flood the content with your target keywords, but make sure they are in there a few times. When it makes sense to do so, also include some acronyms to help Google establish the overall relevance.

If you perform a search in Google for “~keyword”, any words that Google bolds in the search results will be acronyms that Google deems relevant. Include some of these where possible.

Step 8 – Basic SEO
Ensure that ALL pages of your site include unique and Meta Description tags. This is one of the core fundamental aspects of an optimized size and it does play a significant role in your search rankings. Make sure that these tags are not only unique but are accurate representations of each page. Also be sure to place your target phrase in heading as well as image alt tags where applicable.

Step 9 – Initial Promotion / Launch
Now that you have your new site all up and ready to go, you want to give it that kick start to help drive some traffic. It will be a while before the search engines fully index your site and even longer before you start to see organic rankings for your target search phrases. It is important to start off right away to get the ball rolling.

Start off by issuing a press release to announce the launch of your new business website. Press releases are a great way to get some traffic and a rather valuable first link into your site. Submitting your press release using a company such as PRWeb will get your link in the engine’s path and should help your site to be initially indexed by Google right away.

Next submít your site to some relevant directories starting with DMOZ. It can take months, even years, to have your site listed in DMOZ, so it is important to get it submitted right away. Consider submittíng to other industry relevant directories. For some information on how to select the right directories take a look at Building Links with Directory Submissions.

Work on getting as many links from relevant industry websites as possible. The more links you can get from reputable sources, the better the overall performance of your site.

Step 10 – Ongoing Promotion
Once you have completed the site, the content looks great, and all appears finished, you’ve still got work to do. For long term success, especially for a brand new site, you need to continually promote your site. You should always be looking at ways to build your inbound links and your relevant content.

Consider creating accounts with various social media platforms to help promote your site. These can not only give you a link back to your site, but they can help you drive traffic and raise awareness about your business and product.

A site that is always growing, and always getting new links, has the best chance of getting a stable top 10 listing in Google

Like products, websites have to be easy to use as well as attractive. So, once you have completed your web design, it’s vital to get real people to test it. Larger websites often do user testing with wireframing of their early web design jobs. A wireframe is a very simple prototype of a web page showing the basic layout without any of the colours or images that will end up showing the final web design picture.

Testing how people use wireframes is an excellent way of identifying any usability problems in the web design early on rather than waiting until the website has been launched. Once you have sketched your ideas and decided which ones to try out, you are ready to open your web design program. Photoshop is the web design program that many web designers use to create the graphics for their websites. Basically, you draw your website with the help of a web design program like Photoshop or Paint Shop Pro before coding it with CSS, HTML or PHP.

One of the big advantages of designing websites this way is that you can get the web design looking exactly how you want it. Designs for websites that have been done in Photoshop are called treatments or mockups. Usually, a web designer will create two or three treatments for a website and then show them to the website owner, who chooses the best. If you are making the web design for yourself, then you could show the treatments to a friend or a member of your family. Often, you may find that you will want to make changes to your web design in order to improve it. Most treatments go through different versions before they are perfected to the ultimate web design layout.

Moreover, it’s much easier to make changes to a web design in Photoshop than it would be using HTML. Therefore, with the aid of the web design program of your choice, you could finalise the look and feel of your current design. Making changes will be much harder and could be more expensive if you leave them pending until the end of the project. Showing your web design to some potential customers can always be a wise thing to do. With this done, you will have an idea about what people think of your web design. Through feedbacks received, you can then enhance your web design so that it helps the website meet its goals.

Websites are coded using HTML, which is a fairly simple computer language made up of tags. In their simplest forms, tags are ways to add extra information to the text. For example you can add an h1 tag to some text if it’s the page heading or you could add an < a > tag to some text to turn it to a link. This was fine to use in web design in the days when the pages were only created by academics to share their latest discoveries. But if you are creating the web design for a modern website, you would probably want it to look more attractive.

Blog for webmasters with SEO, CSS, Templates, Photoshop, Tutorials etc. related articles….

Original post:
75+ Seriously Useful Fresh Article Links for Designers and Developers