The arrival of HTML5 and CSS3 has given web designers a major sense of excitement by offering a broader range of options, creative opportunities and shortcuts for designing a web page. We could talk about all of these new features endlessly, instead, to keep things simple, we have highlighted four web tutorials that make use of HTML5 and CSS3 perfectly and that demonstrate effectively the potential power of these fantastic technologies.

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Coding a Stylish Blog Design Layout in HTML & CSS

This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
Coding a Stylish Blog Design Layout in HTML & CSS

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer), coded through two new great technologies, HTML 5 and CSS3.
Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images

By Paul Andrew (Speckyboyand speckyboy@twitter).

As the web has developed so has the technology and range of platforms we can use to engage with it. As the range of screens increases, higher resolution displays are becoming the norm whilst at the same time both larger and smaller screens are becoming more widespread than ever before.

As designers we have a choice. Do we continue designing for the ‘safe’ standard of 960px or do we expand our horizons and begin to think about flexible or even responsive web design. Sites that look different for different users depending upon their screen size are not a new thing, mobile sites have been around for years, but responsive design proposes something else entirely, designs which scale to anything from a iPhone right up to a 52″ high definition television screen.

3 Ways to Build a Responsive Site

Firstly, Fluid Layouts

Fluid layouts have been around for years and many of the first sites that populated the early web where such that they would expand to whatever size the browser could handle. These sites have the benefit of only requiring one design and set of code, however when a site can be displayed at any width there can never be any consistency as to how information is presented and often leads to messy sites.

A popular use of fluid width sites can be seen on many of the Yahoo! sites where there is a fixed width column bounded by a fluid area, populated with smaller boxes of content.

Secondly, Mobile & Desktop

By far the most popular method of accounting for vastly differing sizes in screens, and the user experiences associated with them, is the design of two websites. Often first created is the desktop version, after which a smaller, scaled down version is curated for mobile users. This approach achieves two objectives. Firstly it allows for only two designs to be created, minimizing the time taken to code whilst still optimizing the site for each of the two key categories. Secondly it provides the content creator with two, consistent and therefore predictable, formats in which the content will be displayed.

However this split-personality approach to web design can leave out many devices which either fall between the two, such as the iPad and netbooks, or are far larger than the standard desktop, HD Tv’s for example. This can lead to clients requesting an ‘iPad Version of the site’ or citing the need to ‘appify’ their site for ‘those fancy tablet things’.

Thirdly, Media Queries

Once of the most trumpeted developments in the new CSS3 spec is something called ‘media queries’, which allow us the option to specify certain ranges of sizes at which the page should change layout. The benefit of this approach is that the site only has to be designed once and from that each set can be created.

On the flip-side this requires a new way of thinking about content (and probably a fallback of mobile/desktop for older browsers as well), as a series of modules or sections, rather than as single elements.

Designing a Responsive Project

When building a responsive site there are many considerations, however by far the hardest is how to make your content flow, here are 5 tips for creating a responsive design.

1. Follow natural breaks such as <h2> and its friends

Heading are, or should be, used to break content into scannable chunks. That means that when looking where to break the content for a responsive design headings tags are a great place to start.

2. Images often tell their own story

On many sites images are only vaguely related to the content around them. It therefore often doesn’t matter whether the image is on the left of, above or below a paragraph of text, making images a great candidate for shifting in a responsive design.

3. Quotes, Code & Tables are contextual

Whilst similar to images these extra pieces of information are often far more directly related to the content than the images. It is often a good idea to group these with the explaining paragraphs, either before or after as a section on their own.

4. Don’t split up blog posts

Unless you write long blog posts it is often worth working your design around a blog post, product page or other central content. About Us or Staff pages, whilst nice are far less critical to the sites purpose but those pages that are the bread and butter of the site should be given priority when designing a responsive site.

5. Keep the navigation together

Navigation is the lifeline of the majority of your content, the single block that has become uniform across the web is a vital part of many users browsing habits and moving it to the bottom or getting rid of it all together can through many a user and make your site that bit harder to use.

Who is Responsive Design For?

Responsive design is about allowing content to fit with the users preferences, whether the user is browsing through an iPod or HD Tv, the website should present the best possible experience. There are some draw backs however to responsive design. Firstly, consider the guy using his HD Tv, whose viewing area is a huge 52″. Whilst at first this may sound like a brilliant idea, anyone who’s ever tried it knows that in actual fact poorly designed sites simply become unreadable.

Anyone considering designing for a responsive web should remember many of the basic lessons of UX design, line lengths that are readable, line heights that allow for easy moving between lines and letter spacing that helps the eye to flow between letters. These lessons become even more important in responsive web design as the option to abuse them becomes so much simpler to create.

Responsive Design is Here to Stay

Responsive design has both its benefits and pitfalls and anyone considering designing a responsive site would be well advised to read up on the basics of UX design first, remembering a few simple lessons will go a long way. As CSS3 becomes more widespread and sites begin implementing responsive designs it will be interesting to see how they are used by larger corporations and whether it is a technique that will indeed become widely adopted.

Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.

A jQuery, CSS3 & HTML5 Hover-Based Interface

In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5

By Paul Andrew (Speckyboyand speckyboy@twitter).

Whether you design for the web or print there is one key design tool that you should have in your design toolbox, and that is good and reliable color scheme tool… But which one? This was a question that was asked this week on Answers. We received a number of good answers and recommendations to a lot of great tools, but still felt we should open it up to the regular readers of Design Reviver. So here you have it: “What is the best color scheme tool?”

You can leave your answer and your favorite color tool below in the comment section, or you can leave your answer on the original question on Answers: What is the best color scheme tool?

Could you refer me to the best color scheme tools?

This question was originally asked by Kevin M., and you will find the best answer below:

Best Answer from Pablo G:

Unanswered Answers

Thats two weeks running with no unanswered questions, AWESOME!!!

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

An interesting question was asked this week on Answers, and we would like to open this discussion further with our readers, and hear your thoughts. So, do you prefer to code your site by hand or use a WYSIWYG editor?

We look forward to hearing how you prefer to code your site, you can leave your thoughts and comments below or you can leave your answer/opinion on the original question here: Do You Prefer to Code Your Site by Hand or Use a WYSIWYG Editor?.

Do You Prefer to Code Your Site by Hand or Use a WYSIWYG Editor?

This question was originally asked by Csgs, and you will find the favorite answers below:

Best Answer from Scunliffe:

Second Answer from Vinay Vidyasagar:

Unanswered Answers

Can you help with this weeks unanswered questions?

1. Are There Any Cons to Having a Return Statement In all Functions?
2. How Can I Make a Browser Window to Stay on Top and In Focus at All Times?
3. Are You Inclined More Towards the Use of Fluid Layouts? (Why or Why Not)
4. What Would Be the Preferable Time Zone to Set for a MySQL Website?
5. Is There Some Way to Parse PHP Locally Without the Use of an FTP/Local Host Server?
6. How Can I Organize My AJAX Handlers in a Secure, Logical, and Structured Manner?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

As web designers we all love searching for great new resources, browsing some useful and relevant tutorials and we especially love them as most are free. Sometimes though, we need something more, something that will set your mind alight and for you to consider it a darn good read. And that is what we have found for you today, four web design articles that are well worth your time. So, grab yourself a cup of coffee and take the time to enjoy them.

The Web Strategy Pyramid: A Well-balanced Web Strategy

Remember when mom always told you to eat your vegetables? Little did you know she was giving you fantastic advice for managing your Web strategy. In these days of Twitter, Facebook, forums, blogs and more, it can be tempting to skip over the basics and dive headfirst into an oh-so-tempting dish of social media or SEO "tricks."
The Web Strategy Pyramid: A Well-balanced Web Strategy

How To Control Flow Within Your Web Designs

Think of your favorite song. In all likelihood the sound rises and falls throughout, the pace quickens and slows, and the rhythm and melody lead you to hear chords and notes that are about to be played. Music has a flow that guides you from one moment to the next. This flow can impart different emotions and have you feeling different things at different parts of the song. In fact, without that flow, there is no music.
How To Control Flow Within Your Web Designs

The Solar Method (of building websites)

In this post,the author tries to express what he believes to be a healthy candidate for the title of Website Building Standard Method. He calls it the Solar Method (of building websites).
The Solar Method (of building websites)

Web Designers, Don’t Do It Alone

Whether freelancers, small agency founders or website owners, too many of us work alone. The downside of the digital revolution is isolation. The Web allows us to do alone what previously would have required a team of people. It also frees us from the constraints of geography, allowing us to work from home. But while these are benefits, they also leave us isolated.
Web Designers, Don’t Do It Alone

By Paul Andrew (Speckyboyand speckyboy@twitter).

At times, a commonly overlooked aspect of web design is catering for potential multi-cultural users and thus missing out on a potential readership or potential customers.

Yep, the internet really is global. This was a topic that was recently discussed on Answers, and we would like to open this discussion further with our readers. What do you think, is there a such thing as culture difference within web design?

You can leave your thoughts on web design cultural differences in the comment section below or you can leave your solution on the original question here: Is there a such thing as culture difference within web design? on Answers.

Is there a such thing as culture difference within web design?

This question was originally asked by Shu, and you will find the favorite answers below:

Best Answer from Devone:

Unanswered Answers

Can you help with this weeks unanswered questions?

1. How can I tell if a visitor is leaving my website?
2. What Are the Cons When It Comes to Implementing HTML5 in Your Web Designs?
3. Can I Use PHP Short Tags With Minimal Issues?
4. How Can I Send HTML Through AJAX POST?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

We love reading the discussions that develop on Answers. We love the fresh and innovative dev solution’s, the sometimes heated discussions over age old issues and appreciate all of the inspiration that is offered by Answers’ users.

Sometimes though, we come across a question that is neither controversial nor difficult to answer. And that is the point of Answers, its not just about the tricky questions and complex solutions within web design, it is also there to help beginners and amateurs. And that is what we would like to highlight in this post.

You can leave your thoughts on this topic in the comment section below or you can leave your solution on the original question here: Why do Some People Use HTM Rather Than HTML? on Answers.

Why do Some People Use HTM Rather Than HTML?

This question was originally asked by Rollback999, and you will find the favorite answers below:

Best Answer from Scunliffe:

Unanswered Answers

There are no unanswered questions this week, what a great week it has been!

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

As the web matures, there is an ever greater need and requirement for web designers and developers to grasp and learn any new technological advancements. With the new CSS3 properties, HTML5s advancement, WordPress rapidly approaching version 3.0 and with the recent release of the iPad, the demand on the developer has never been greater.

For today’s news round-up we have a small, but useful collection of newly released developer tools and apps that can assist you during this learning curve.

CSSDesk – Dynamic CSS Sandbox

CSS desk is a new and useful tool that allows you to test and experiment with CSS and HTML.
CSSDesk – Dynamic CSS Sandbox

The HTML5 test – How well does your browser support HTML5?

The HTML5 test grades your current browser and depending on how well it performs will awards it a score out of 160. The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. In some cases the tests go beyond the specification.
The HTML5 test – How well does your browser support HTML5?

iPad Peek

iPad Peek is a nifty tool that lets you see how any website will be rendered on the iPad. Click on the top border to switch from landscape to portrait mode.
iPad Peek

Elastic WordPress Theme Editor

Elastic is a visual theme editor and theme engine for WordPress that takes a new approach to WordPress theme development. Have a look at the video below.
Elastic WordPress Theme Editor

By Paul Andrew (Speckyboy and speckyboy@twitter).