Responsive Web Design

Firstly introduced by Ethan Marcotte on his article “Responsive Web Design” for A List Apart, the initial concept behind responsive design was based on the emerging responsive architecture, in which rooms and spaces have the capacity of automatically adjusting according to the number and flow of people within it.

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user’s actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, no matter how many devices are released on the future, responsive websites will always be able to provide a proper response.

Flexible grid

Weekly freebies in your inbox. Advertising Royalty Free Images Chicago Web Design Firms Design Your WebsiteDesign Your Websitea simple & elegant HTML site builder (and it's free). Click here to start! ads by BSA Friends Free Iphone icons Wordpress Theme Generator Free Android icons Free Social icons Psd Vault Six Revisions CSSReflex WebDesignerDepot Specky Boy CoolHomepages InstantShift IconShock Wordpress Themes Shock Designrfix Smashing Hub Feedgrids Design Resources Socialh SmashingApps PresidiaCreative DesignYourWay QualiThemes Web Design Burn UnderworldMagazines Artfan Design BlogPerfume Webanddesigners Vandelay Design Blog Designer-Daily Creativeoverflow Dzinepress Tutorial Lounge VectorDiary iBrandStudio Design Dazzling AEXT.NET Tutorial Chip Desizn Tech RedTeamDesign Stunningmesh Trendykit Graphic Design Business Weekly freebies in your inbox Responsive Web Design, most complete guide Sep 13th/2011 301 coding css tutorials useful ux web design 247Share

If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.

But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design.

So, what’s responsive web design? Firstly introduced by Ethan Marcotte on his article “Responsive Web Design” for A List Apart, the initial concept behind responsive design was based on the emerging responsive architecture, in which rooms and spaces have the capacity of automatically adjusting according to the number and flow of people within it.

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user’s actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, no matter how many devices are released on the future, responsive websites will always be able to provide a proper response.

responsive01

But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. This concept requires a thoughtful process where the designers and developers work together to determine how to redistribute the elements according to resolution, which elements may be eliminated and how to maintain the concept while simplifying the structure.

According to many internet gurus, the future of the internet will rely on mobile devices (tablets, smartphones, portable consoles) rather than desktops and laptops. More and more people are starting to acquire cutting edge technologies and the tablets’ battle is on, so it’s indispensable that you start seeing these devices as an important part of your audience. But this increment on the amount of mobile devices does not mean that desktops are doomed, in fact we can see how everyday larger monitors are released, and these are highly appreciated by designers, visual artists and producers, thus at least for them, a tablet will never be able to replace a desktop computer. Flexible grid.

The first element we have regarding responsive web design is dubbed flexible grid. Before this concept became popular, most websites were designed using a fixed width style and centered content, which was an effective method as most computers worked under the same screen resolution. Now that screen resolutions have changed so much, a fixed width design is not the best solution for your designs and therefore liquid layouts are the new answer.

But the concept of flexible grid goes beyond the liquid layout concept, where the elements are essentially resized and kind of rearranged. A flexible grid makes a complete overhaul in terms of proportions, making that all the elements in a layout are resized in relation to one another when stretched or contracted. The essence of flexible grids relies on stop thinking in fixed pixels and start considering percentage units. To recalculate an element’s proportions accordingly, you must take the element’s width and divide it by the full grid’s size e.g. 200 px / 960 px = 0.2083, then take this result and multiply it by 100 (0.2083 * 100 = 20.83 %), that we you get the percentage value that needs to be applied over the element in order to perform a correct resizing.

CSS3′s best features

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).
In theory, the code for this is straightforward:

#example1 {
box-shadow: 10px 10px 5px #888;
}

But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

How it Works

The box-shadow property can accept a comma-serparated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset‘ keyword (to create an inner shadow, rather than the default outer shadow).

The Syntax:

box-shadow: none | [ , ]*

= inset? && [ {2,4} && ? ]

Examples:

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

CSS 3 gradients

Firefox syntax
-moz-linear-gradient( [<point> || ,]? , [, ]* )

-moz-radial-gradient( [<position> || ,]? [<shape> || ,]? , [, ]* )

Webkit syntax

-webkit-gradient(<type>,  [, ]?,  [, ]? [, ]*)

IE Gradient gradient example

I would suggest you to use these filters only in conditional CSS files, otherwise these filters will affect your files performance.

filter: progid:DXImageTransform.Microsoft.gradient
(GradientType=0,
startColorstr=#6191bf, endColorstr=#cde6f9); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft
.gradient
(GradientType=0, startColorstr=#6191bf,
 endColorstr=#cde6f9)"; /* IE8 */

SEO Friendly Content

SEO Friendly Writing Does Not Mean Writing for Search Engines

The first and foremost thought in your mind when working on content for your Web pages is that you're writing for people not for search engines. If you have to choose between a technique that is good for your readers but not so good for search engines or vice versa, choose that which is good for your readers. Search engines ultimately want to provide content that is interesting and informative for their customers too, and a page that is too optimized is no fun to read.

Luckily, most of the techniques that make good Web writing make for decent SEO as well.

• Write relevant content. Search engines have ways of recognizing when a page is not really about what it might seem to be about. If you're playing games with your content to try and fool search engines, it will eventually be found and you'll lose rank or even be banned. It's much better to write content that is relevant to your topic.
• Put conclusions at the beginning. Another way to think of this is that you want your keywords to be denser towards the top of your article. If your page is about snow leopards, then the first mention of snow leopards should be in the title and first sentence. Don't start using synonyms for your keyword phrase until the second or third paragraph.
• Use lists instead of paragraphs. Lists are easier to get your seo content into without your repetition seeming strange.
• Make your links part of the copy. This is especially important if your links include your keyword phrases. If you've linked to the Snow Leopart Trust on your snow leopard page, make sure that you link the words "Snow Leopard Trust" and not something unrelated like "click here".
• Include internal sub-headings and they should include your keyword phrase. Use heading tags for your sub-heads, and repeat your keyword phrase.
• Proofread your pages. It doesn't do any good to focus on the keywords "snow leopard" if you spell it "snow leopart" once or twice on the page. Plus, the spelling and grammar errors make your content look unprofessional, so people are less likely to link to your page.

Other Considerations for SEO Friendly Content

Repetition is very important for SEO friendly content. Once you've chosen your keyword phrase, you want to repeat it several times throughout the page. For instance: 2 times in the first paragraph, in every sub-heading, once in the main heading, twice in the meta title, 2-4 times more throughout the document, and at 2-3 times in links and image alt text on the page.

Don't forget to use bold, heading tags, and other emphasis HTML tags to highlight your keyword phrases. But don't overdo it. If someone can tell exactly what your keyword phrase is without doing more than opening the Web page, you've probably included it too often or made it too emphasized. Remember, you're ultimately writing for people, not a search engine.

Don't forget less obvious locations for including your keyword phrase - like image alt text and title text on images and links. These are not hidden from your readers - anyone can see them who wants to. They are just not obvious at first glance, so they are less annoying to your readers but search engines still see them.

SEO Friendly Should Not be Bad Writing

As I said above, you should never sacrifice good writing for SEO. Most of the best ranked articles on nearly any topic you can name (Wikipedia notwithstanding) are written for customers first and SEO is at best a second or third thought.

WordPress CSS troubleshooting

With the introduction of the new Themes in WordPress v1.5, boring and commonplace website layouts have become a thing of the past. With a few clicks, you can change your layout instantly. With a few more clicks and tweaks, you can screw up your layout instantly as well. Welcome to the exciting world of web page design.

When you encounter a screw-up in your layout, many people come running to the WordPress Forums. While the willing volunteers can do what they can to help you, there are some steps you can take to get to the solution, or at least a better idea of where the problem may lie, before you get to the Forums.

Know Before You Go
We have a list of things you need to know before you go to the forums with layout design problems, and tips on solving the problems yourself.

Examine Your HTML and CSS
Take a close comparative look at your HTML and CSS and make sure that all the references match.

Isolate Your CSS Challenges
Below we'll show you a couple of techniques to help identify the areas that are causing your problems in an effort to narrow down the problem to a specific area and code.

Common CSS Errors
You are not the first to have this problem. We have a list of some of the most common CSS errors to help you fix the little details that can mess up your layout.

Pest Control - Watching Out For Browser Bugs
we will help you identify some of your CSS challenges, a lot of them come from bugs and conflicts between browsers, so we'll give you some tips on how to work around the various browser bugs.

It is the goal of this article to help you solve your layout design problems within the CSS file, not within the HTML or PHP files. For help on modifying those, check out Using Themes for more information.

Web, Graphic Designing SEO in Indore: Choosing Website colors

Web, Graphic Designing SEO in Indore: Choosing Website colors

CSS clearfix property

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

Use it

.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clearfix {
 display: inline-block;
}

html[xmlns] .clearfix {
 display: block;
}

* html .clearfix {
 height: 1%;
}