PSD-to-WordPress-tutorial-Sagar-Ganatra

PSD-to-WordPress | PSD to WordPress tutorial | free psd to wordpress conversion | free psd to wordpress conversion tutorial | free psd to wordpress tricks | free psd to wordpress tips |  PSD to WordPress coverter | Designing a WordPress theme in Photoshop

Section 1 – Designing a WordPress theme in Photoshop

Designing a theme for WordPress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.
To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.

Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.

Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:

• Header
• Content
• Sidebar
• Foote

We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.

I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.
That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a WordPress theme.

Section 2 – WordPress Themes Overview

Before we convert our WordPress theme design into a usable WordPress theme, it is important to understand the various parts of a theme and how they work together.
A WordPress theme is made up of a collection of:

• web pages,
• Style sheets, and
• Images.

These elements comprise the theme and are located in a folder within the WordPress installation directories. All themes are located in subfolders within the wp-content/themes/ folder.
The elements that make up a WordPress theme consist of three types in addition to the images. The style sheets or CSS files control the presentation or look of the theme. They define the colors used and how the data is displayed visually. The web pages are divided into two different types the template files and the optional functions.php files. The functions.php file is used for many things, but if you are going to create a widget ready theme, you will put the code to do this in the functions.php file. The template files generate the data or content that is displayed as a webpage.
Every WordPress theme must have at least two files:

• index.php and
• style.css.

Other optional pages include:

• home.php,
• functions.php,
• single.php,
• page.php,
• archive.php,
• category.php,
• search.php,
• 404.php,
• comments.php,
• comments-popup.php,
• author.php, and
• date.php.

Each of these pages performs a different function and we will cover these later. Let’s look at each of the page types in more detail.

CSS pages- The Theme Style Sheet

As we discovered earlier, the CSS page or style.css controls the presentation or the look of our theme. It also does much more. The style.css also provides the details about the theme in the form of comments. WordPress does not allow any two themes to have the same details in their comments. They do this because two themes with the same details would cause problems in the theme selection pages.
At the top of every style sheet are the details about the theme. These are used in the theme selection page. The style sheet comments are organized as follows:
Theme Name:  Your theme’s name
Theme URI:  The theme’s home page
Description:  The theme’s description
Author:  The author’s name
Author URI:  The author’s web page
Template:  This optional field defines a parent theme if one is used
Version:  The theme’s version number
If you are using a parent theme you will need use the name of the directory of the style in the Template field.

The Theme Functions.php File

To add more advanced functions to a theme you can use the optional functions.php file. The functions.php file acts like a plug-in if it is present in your theme. Some of the typical uses for this file include:

• Create the code for a widget ready theme
• Define functions used in the template files of your theme
• Create an admin screen for your theme that gives users the ability to choose options for colors, styles, and other aspects of your theme

If you want to see a sample of a functions file that sets up an admin, look at the default WordPress theme. This theme contains a functions.php file that defines functions and an admin screen. If you want to see a list of what is possible wit this file, look at Function Reference list available on www.wordpress.com.

The Theme Template Files

As we discovered earlier, WordPress uses web pages or PHP files for templates to generate the pages requested by your site’s visitors. We already saw a list of all the possible templates, so let’s examine the key ones in more detail.
While it is not necessary to use every possible template, it is important to note that WordPress chooses templates based on the template hierarchy, which is available at www.wordpress.com and is not important for the purposes of this book. As the theme designer, you can choose the level of customization you want by designing or not designing the various templates.
As we said earlier, you can create a WordPress theme with just two files:

• style.css
• index.php

When we designed our theme, we included several areas including:

• A header
• A footer
• A sidebar
• A content area

All of these areas can be defined in the index.php template file or can each be their own template file in which case the index.php file will define how and where they are used. Note that if you do not create templates for the various template possibilities, WordPress use the built-in default files. The default templates may not match your Theme and you may want to create your own to maintain consistency across the theme.
In our example, we designed a theme that will require the following templates:

• index.php
• sidebar.php
• header.php
• footer.php

To do this we will create an index.php that will call each of the other templates. To do this we will use WordPress tags within the index.php template. The tags we need to use are as follows:

• get_header() will call the header.php template
• get_sidebar()will call the sidebar.php template
• get_footer()will call the footer.php template

We will examine this in detail in Section 3 of this book.

Section 3 – Putting It All Together

Now that we have designed our theme and learned the basics of building a WordPress theme, it is time to build our theme. To do this let’s start by creating a folder in our WordPress installation. We will name our folder “World” and place it in the wp-content/themes/ folder.


Also create an images folder in the same folder. This will hold our images for the theme.
Now that we have our folder, let’s create the files we need in the folder. We will create the following files:

• index.php
• sidebar.php
• header.php
• footer.php
• style.css
• functions.php

Now that we have our folders and files created, let’s slice up our psd file to create the necessary images.

Slicing up Your PSD File

For this theme, we only need to create one image – the header image. To do this we will select the layer in our psd file that is our header image. You should also hide any layers that are above the header layer to prevent them from being copied.

Now we simply copy this layer and paste it into a new image.

Review the dimensions to ensure they are correct and if they are then save the file as headerbg.jpg. You are now ready to start creating your theme.
CSS Layout
The layout of a theme is done using CSS divs. The divs define the various sections and how and where they are placed. Additionally our style.css will further define the look based on these divs.
Our theme will be laid out as follows.

Furthermore, we will encase the entire page in two wrapper divs called wrapper and wrapper 2. Let’s start laying out the theme by starting on the template files.
Template Pages
Our layout for our divs will be as follows:

There will be other divs in the theme, but these are the major ones and translate directly from our design. Let’s get started at the top with the header template.
Header.php
The header.php template contains our logo, site name, slogan, and in this case the menus. Open your header.php file and let’s get started.
You should have a blank page when you open the file. WordPress templates all work together like the pieces of a puzzle to build a complete webpage. Because of this, certain tags live in different templates. Every web page requires certain tags to render in the browser. These tags are:

• html
• head
• body

The header.php file will have the opening html tag, the head tags, and the opening body tag as well. We will close the html and body tags in a different template.
The first thing we should do is set up our tags and CSS divs as follows:

We have now created our basic header and inserted our HTML tags and CSS tags. Note that we did not close the Wrapper tags, as we will do this in the footer.php template. We have now lain out or page, but we have not put any WordPress specific data in yet. There are several items we need to add to the page including:

• page title code
• blog description code
• blog title code
• menu code
• the css link

We need to add the following lines of code  to our page:

• ” type=”text/css” media=”screen” />
• /”>
• ”>Home           

We add it in the following manner:

” type=”text/css” media=”screen” />

This creates the title text in the top of our browsers and links the CSS sheet to the page. To set the blog title and description to display in the header we add:



 

Finally, we add the menu items as follows:

/”>Home

 

The first item creates a Home link and the second lists the pages within the WordPress database.
Finally, we are left with the following header.php template:

>

; charset=” />

/style.css” type=”text/css” media=”screen” />

/”>

/”>Home

wp_list_pages(‘title_li=&sort_column=menu_order&depth=1′); ?>

Now that we have our header.php file lets create our footer.php file.
Footer.php
The footer.php file contains the information for the footer and is used to clean up tags for other templates. In our case we have an open div tag from the page div in the header and the body and html tags that need to be closed. As usual, we will create a div and then add our content.
Our footer.php will look like this:

is proudly powered by

WordPress

”>Entries (RSS)

and ”>Comments (RSS).

Let’s examine each piece of this. The

starts the div for the footer. The creates a paragraph break in the top of the footer and the
tag closes that tag. The next tag ( )should look familiar,  it displays the title of the blog. After the link to WordPress you will see two links that allow visitors to subscribe to rss feeds of the blog. Finally, you see our closing tags, one for the footer div, one for the page div and then the html and body tags. Now let’s look at the sidebar.php template.
Sidebar.php
The sidebar.php template controls the items in our sidebar. When designing a sidebar, you can either create a static bar that you put the WordPress items into such as categories, calendar, etc, or you can build a widget ready sidebar that lets you set the items in the admin panel.
The sidebar is an unordered list of items contained in a CSS div. The first thing we want to do is add the div to the page so open your sidebar.php and insert the following code:

If you want a widget ready sidebar, add the following code to the sidebar between the div tags:

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

If you do not want to add any static items then you are done. However, for those that want a static sidebar you can add a list of blog categories by adding the following code:

There are many other items available, check the WordPress site for more info. Our final sidebar should look like:

if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

That is it; of course, you can put anything you want in here. Let’s look at our last template, index.php that will pull together all these templates.
Index.php
The index.php pulls the other templates together to create the basic page. To begin we will create the calls to our other pages as follows:

This calls the header.php, sidebar.php, and footer.php page. If you just loaded this, you would get a page with no content, so we need to add the content and necessary divs.
Let’s start by adding the content and main divs right below as follows:

Now that we have our divs setup we can begin adding the code to get the data from the database.  You will most likely want to list your posts on the main page. To do this we add code that will retrieve the posts and lists them as follows:

Your theme is now ready to display the posts. We are only left with one template, the functions.php template.
Functions.php
The functions.php file can be used in many ways. In our case, we will use it to control the look of our widgets in our sidebar. Open your functions.php file and let’s get started.  Enter the following code into your functions.php template:

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => ‘

’,

‘after_widget’ => ‘

’,

‘before_title’ => ”,

‘after_title’ => ”,

));

?>

As you can see this checks to see if there is a widget in the sidebar and then inserts code before and after the widget to control the look of the widget.
We now have a set of templates that will produce a theme. To set the look of the theme we need to create a style.css file.
Style.css
The style.css file contains information about our theme and defines the look of our theme.  We start by opening our style.css file and entering the information about our theme at the top. We need to enclose our information in comment tags. CSS comment tags look like this:

• /*  (open comment)
• */  (Close Comment)

We need to include all the required info. We built our details as follows:

/*

Theme Name: World

Theme URI: http://www.Yoursite.com

Description: My first theme

Version: 1.0

Author: You

Author URL: http://www.yoursite.com

*/

Now that we completed the comments, we need to create classes for each of the divs we defined in addition to the body div. We will create the following classes.

• body
• wrapper
• wrapper2
• superheader
• header
• content
• sidebar
• footer

Let’s look at each one individually and what they do. We will keep it simple and just define the body portion of our pages. The body styles affect the entire page. We will define several elements including:

• The background color
• The font used by our pages
• The font size

To do this we will enter the following into our style.css page.

body {

margin: 0;

padding: 0;

color: #333;

text-align:center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100.1%;

background:#0099FF;

}

Let’s examine each item separately.

• body{ – This opens the style class and defines which tags are effected in the pages.
• Margin: -  Defines the margins around the page. A 0 margin will have no margin.
• padding: – Padding is like a margin and setting it to 0 will remove it completely. 
• color: – This tag defines the color of the font.
• font-family:  – This defines the font used for the  class. Not every font can be used and web pages use specific fonts. Refer to CSS standards for a complete list. In this case, we chose the Verdana, Arial, Helvetica, sans-serif font.
• font-size:  – This sets the size of the basic font.
• background: – sets the color of the background on the webpage.  We used 0099FF which is the hex representation of our color. To get the hex color you can use photoshop.

You might have noticed a semicolon at the end of each value. This is used to end the line and is required.
We now can define our two wrapper classes as follows.

#wrapper{

width: 980px;

margin: 0px auto;

padding: 0px;

text-align:left;

font-size: 78%;

line-height:18px;

background: #fff;

border-left: 2px solid #fff;

border-right: 2px solid #fff;

}

#wrapper2{

background: #fff;

}

Here we have used the width tag to create the width of our theme and it matches our design width. The text-align tag sets the text alignment in the div, and finally we create a border around the div. with the border-right and border-left tags. The wrapper two class only sets the background color to white which is what we use for our sidebar and content.
Now that we have the global tags set, let’s address our header. Our header section will control the look of the items in our header and will include several items such as:

• the header image,
• header text, and
• the menu text.

We will do this in the following manner and step through this one class at a time.

#superheader{

padding: 0;

margin: 0;

height: 13px;

background-color:#0569ac;

}

#header{

padding: 0  0 0px 0;

height: 175px;

margin: 0 0 0px 0;

border-bottom:2px solid #fff;

background:#fff;

background-image:url(images/headerbg.jpg);

}

The superheader class is used to create that band at the top of the page.  We simply set the margins, height, and color.
The header class defines the overall style of the header div. In this case, we are setting the background image, borders, margins, and height. You can see we used the sliced header image we created earlier.
The menu is controlled by the tab class and controls how the menu looks and functions. Because a WordPress menu functions as an unordered list, we set the list tags for the menu tags as well. An unordered list in html will use the tags ul and li, with ul defining a list and li a list item. Let’s start by looking at the menu class.

#tabs{

padding: 0;

background:black;

}

First, we define the background color of the menu and set the padding to 0. Next, we define the look of the ul tags.

#tabs ul{

margin: 0;

padding:3px 0;

list-style-type:none;

}

Finally, we  set the li tags.

#tabs ul li{

margin: 10px 0 3px 15px;

padding: 6px 15px 6px 0px;

display:inline;

border-right: 2px solid #fff;

font-size: 90%;

font-family: Tahoma, Arial, sans-serif;

} 

Display:inline makes the list display in a horizontal line as opposed to a vertical line.  Next we define how the links look in our menu. Since each item will be a link we will want to change the look form the default link style. Here we set the font color to white.

#tabs ul li a{

color: white;

}

The last step is to define the behavior of the text when we hover the mouse over it. Here we simply change the color.

#tabs ul li a:hover{

color:#A1E7FD;

 text-decoration:none;

}

Next, we can create the style for our footer. We will define our footer style as follows.

#footer {

clear: both;

margin: 0;

padding: 10px 16px 0 16px;

text-align: center;

font-size: 85%;

background: #fff;

}

This class defines the footer class and sets the margins, padding, text alignment, font size, and background color for the class.
Now that we have the footer, let’s define the sidebar styles as follows.

#sidebar {

padding: 0;

margin: 0px 0px 0px 540px;

}

That is it for the sidebar for now. Next, we will set the style for the main content of the pages as follows.

#content{

clear:both;

padding: 0;

margin: 15px 10px;

}

This will define the content container’s style. We set the margins and padding for the class. 

#main {

width: 530px; 

float:left;

margin: 0;

padding: 0 0 10px 0px;

overflow:hidden;

}

Here we set the main div’s class by setting the width, placement, margins, padding, and the overflow properties.
That is it, we are ready to upload the theme and test it.

Putting it all together

If you upload this to your server and browse to the blog you should see something like this.

Conclusion

We have created a simple WordPress theme. There are many other things you can do with WordPress themes and there are many great tutorials available to help you. There is no limit to what you can do with a WordPress theme as long as you follow the basic principles contained within this document. If you want to do more advanced theme building check out the WordPress developer site at www.wordpress.com.

Android-Apps-for-Web-Developers-sgb-co-in

Android Apps for Web Developers,Free Android Apps for Web Developers,Web Developers Android Apps tools,Android Developers tools for app creation 

If you're a web developer on the go, you may sometimes find the need to test some code, fix an error, or manage remote files when you're away from your desktop. If you have an Android device, you're in luck, as the Market has a smattering of handy free apps that are perfect for the on-site programmer or dabbling hobbyist.
If you're already using these essential extensions for Google Chrome, and these tried and true add-ons for Firefox to make your developer tasks easier, then these five Android apps should complete your developer set.

1. HTMLeditor

---

It doesn't get any more fundamental than this. HTMLeditor is a simple, lightweight little app that will let you code and test HTML, JavaScript, and CSS. It's a simple text editor that saves your work to your SD card and previews it in a stripped-down mobile browser. It doesn't highlight errors, or even render images in the preview, but it still makes for a handy mobile solution.

2. AndFTP

---

If you need mobile access to the content on your web servers, check out AndFTP, an extremely robust free utility. Add login information for multiple domains, choose the one you want to access, and the app quickly (over 3G) pulls up your file tree in an easy-to-navigate interface. Using your handset as though it's a web-connected USB drive, you can upload and download files from your server, manipulate existing files (move, rename, delete), and browse your own device. The app supports FTP, SFTP, and FTPS connections.

3. View Web Source

---

If you're surfing the mobile web with Android and come across something that needs a closer "developer's eye view," check out the View Web Source app, which will download the full source code of any web page into a text editor, where you can make changes or notes, and copy/paste it out to an e-mail for later review.

4. Magic Color Picker

---

Mulling over some web design ideas while you're out and about? The Magic Color Picker app lets you browse the wonderful wheel of web-safe colors in your quest for the perfect menu shade or logo hue.
The app gives you color values in multiple formats, including hexadecimal, RGB, HSV, YUV, and HSL, and offers a few choices for ways to visualize your web palette.
The one drawback is that there is no way to bookmark or export the color codes once you find one, so grab the old pen and paper if you need them for later use.

5. HTML Test

---

Studying for the next web dev pop quiz at school? Looking to flex your coding knowledge muscles? The HTML Test app will hit you with 20 timed multiple choice questions about our favorite Internet syntax. Answer them all to the best of your ability, then go back through to see how well you did.
If you take the quiz a few times, you may start to see some questions repeat. But it's great for a quick study break or the impromptu "Code-Off."
No cheating!

how-to-Identify-Qualified-Leads-sagar-ganatra

Steps to Identify Qualified Leads,how to Identify Qualified Leads,Identify Qualified Leads steps,Identify Qualified Leads how to,about Identify Qualified Leads

Not everyone on Earth is a prospect for your product or service. If you're pitching to people who truly don't need or can't buy what you have to sell, you're wasting your time. So take a few minutes to qualify your leads before launching into a full-bore sales presentation.
Are They the Decision Maker?
The very first thing you should find out is whether the person you're talking to is authorized to buy from you. In B2B sales you may need to seek out a purchasing person, the department head, the office manager, or even the company owner. In B2C your prospect may need or want to share the decision with a spouse, parent or significant other.
What Do They Have?
Find out what the prospect already owns that's in the same category as your products, and get as much detail as possible. In other words, if you're selling cellphones, don't just ask if the customer already has a phone... ask questions like “How long ago did you buy it? What model and manufacturer is it? Do you have other mobile devices (e.g. laptop, iPad)? Do you have a land-line phone as well?”
How Do They Feel About Their Current Product?
Once you have the basic information about their current product, dig for what their likes and dislikes are about it. This information is incredibly useful when you reach the presentation phase, since you'll already know what their preferences are. For the cellphone example, you would ask questions like, “What features do you use a lot? What features do you never use? Is the phone bigger or smaller than you'd like? How about the size of the keys (for non-touchscreen phones)? How's the reception from your home, work, etc.?”
Are They Able to Switch?
Even if a prospect is interested in your product, they may not be able to buy right now. Most often that's a budget issue – they simply can't afford to buy right now. Other times, it'll be something like a contract that hasn't expired yet or a key person who's out of town on vacation. So you need to ask a few time-qualifying questions like, “How soon would you want to put this in place? If I show you how you can save money/save time/improve yourself/etc., would you be ready to buy today?”
Is Your Product Really Better Than What They Have?
Let's be honest... sometimes the prospect already has something in place that works great for them, and buying your product really wouldn't benefit them. In that case, don't try to fast-talk or pressure them into buying from you. It's much better to confess, “Mr. Prospect, I think that your current setup is just fine for you right now.” The prospect will appreciate your honesty and you'll have a great chance of making the sale later on, when their situation changes (e.g. their product breaks down or their current provider hikes the fees way up).

Responsive-Web-Design-Tools-by-Sagar-Ganatra

Top Responsive Web Design Tools | Responsive Web Design Tools | Web Design Tools for Making website Responsive | Top Responsive website tools by Sagar ganatra

As the mobile market continues to grow, demand for responsive website design intensifies. This has introduced a new set of tools, 10 of which we've listed below, to help lay out, design, code and plan a responsive website.

While some may overlap, each deserves a spot on the list; when combined, they can help you craft a website that provides an optimal viewing experience for users on all devices. (Along with each recommendation is a list of alternative tools that may be useful.)

If you are a designer or developer, what are some of the indispensable tools in your responsive toolbox? Please share your recommendations with our readers in the comments, below.

1. Gridset

Developed first as an internal tool that has now grown into a full-fledged product, Gridset lets web designers and developers design, prototype and build custom, responsive grid-based layouts for their projects. It can create any type of grid you require, from regular columnar grids (such as those in CSS frameworks like Bootstrap or 960.gs), to asymmetrical, compound, fixed, fluid and responsive grids. It even lets you create a library of your own grids, with a variety of presets available.
The beauty of Gridset is how fast it will allow you to build responsive prototypes (without all the calculations), providing all the measurements and tools to integrate with your existing markup. You can tailor specific grids across breakpoints you define, and create PNG files of your entire grid set, so you can view and work on your grids in the design tool of your choice.
Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap

Built by two guys at Twitter as a way to provide a clean and uniform solution to the most common, everyday interface tasks they faced as developers, Bootstrap is a "sleek, intuitive, and powerful front-end framework for faster and easier web development." It uses a 12-column responsive grid system, and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles all set.
Using the Customizer, you can really make Bootstrap your own, and customize variables, components, JavaScript plugins and more. Bootstrap can be expanded, with a wealth of resources available, to include themes and interface-building tools.
Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Up and Gumby.

3. Adaptive Images

Previously, making your website images responsive usually meant using a "hack-around," such as rewriting the "src" attribute or using the "noscript" tag. But there are now several tools to make this a much simpler task, including Adaptive Images, which uses one htaccess file, one php file and a single line of JavaScript to detect your visitor's screen size. It then automatically creates, caches and delivers device-appropriate rescaled versions of your embedded HTML images. What's more, it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything.
Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options. You can set breakpoints to match your CSS, set the quality of the generated JPGs, set how long browsers should cache the image for and much more.
Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

4. Responsive Design Testing

Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an ultra-simple tool that allows you to see how a page displays on different screen sizes, in a single view. The Responsive Web Design Tool from Matt Kersley works by entering your website's URL into the address bar to test a specific page. The screen and device options are 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad – Portrait) and 1024 x 768 (iPad – Landscape). However, the content width cannot be pixel-perfect, as 15 pixels have to be added to the frame to accommodate the scrollbars.
You can share the results of the test with others by adding any URL to the end of the testing page address (e.g. http://mattkersley.com/responsive/?mashable.com). One major benefit of this tool is that it can be self-hosted (available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.
Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive Viewport Responsive.is, and Resize My Browser.

5. FitText

As content scales according to a user's viewport, the text will naturally wrap as the container is narrowed; but this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. This is where FitText comes in: It's a fantastic jQuery plugin that makes your finely tuned text inflatable. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. For those that are opposed to "window.resize()," Chris Coyier created a fork of FitText that limits the number of window-resize events.
As the plugin ignores the font size you specify in the CSS file (body tag), you should set one as a fallback, in case JavaScript is turned off. Equally important is making sure the H1 tag has a display block with a specified width. Please note that FitText is only for headlines, and shouldn't be used with paragraph text.
Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter and Slabtext.

6. Respond.js

Media Queries are extensions of CSS3, supported by most modern browsers; they allow you to specify when certain CSS rules should be applied. But one disadvantage of using media queries is that as they are part of the CSS3 specifications; they are not supported in older browsers such as in IE8 and below. With Respond.js, this problem is solved, as the script makes min-width and max-width work in IE6, 7 and 8, and it should also work with other browsers lacking support.
The script itself is incredibly small and lightweight (only 3 KB minified and 1 KB gzipped). It works unobtrusively, and doesn't rely on any other scripts or frameworks to run. It works by requesting a clean copy of your website's CSS via AJAX, and then translates any media queries it finds into equivalent JavaScript for browsers that don't support media queries directly.
Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries and Enquire.js.

7. Responsive Slides

An incredibly lightweight jQuery plugin (only 1 KB minified and gzipped) that creates a responsive slider using list items inside a single container, Responsive Slides works with a wide range of browsers, including IE 6 and up. The plugin is dependent on the images being the same size and jQuery 1.6 and up being used. The plugin uses CSS3 transitions with JavaScript fallback, and allows captions and other non-HTML elements inside the slides. There are settings for transition and timeout durations, with multiple slideshows supported, as well as automatic and manual fade.
While Responsive Slides keeps things simple, there are still a wealth of options and possibilities to customize the plugin, including optional "before" and "after" callbacks, separate pagination controls, a random order setting and the choice of where to append the controls.
Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, Blueberry Sequence.js and Galleria.

8. Wirefy

Flat, static wireframes aren't particularly useful to show a client how responsive your design is, or what functionality is being suggested. Instead, using a rapid prototype approach may be more beneficial. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. It allows you to experiment rapidly with responsive wireframes, and lays a foundation for the design (while staying design agnostic), without losing sight of the content's importance.
Built on a 16-column base grid, it is packed with UI elements and styles such as typography, tables, images, forms, buttons, tab panel, breadcrumb system, paginator, menu, slideshow and much more. When compared to other frameworks, it is stripped down and doesn't focus on fancy components, but rather focuses on the users, and how they will experience your content on various devices.
Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify, Responsive Design Sheets, Responsive Wireframes, Webstiles, Responsive Design Sketchbook and Style Prototypes

9. Responsive Tables

Data tables in responsive design can be problematic: They can be wide and must cater to large, complex amounts of data that need to be kept together to make sense. When the viewport is adjusted, your table can suddenly look very ugly — either being too small to read easily, or zoomed in too far, requiring scrolling. But ZURB offers a simple JavaScript/CSS combination to let tables adapt to small devices and tablets without breaking your responsive layout. It works by taking the first column, which is often the unique key for a table, and "pinning" it to the left of the table, allowing you to scroll the other columns under it. This means the user is able to see the entire table.
It's a lightweight package containing two key files: responsive-tables.js and responsive-tables.css. To use it on any data table in your markup, you simply need to attach a class of .responsive, and the CSS and JavaScript will do the rest. From there, the tables are modified client-side when the window is smaller than a regular table.
Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables, Responsive Approach for Data Tables and RainbowTables.

10. FlevNav

With responsive design now at the forefront of web design, and the ever-increasing use of mobile and tablet devices, the choice of a navigation strategy is now a wide-reaching decision. It needs to be as carefully planned as your content architecture. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.
It's simple to set up: Start with an unordered list, add in the appropriate class and data attributes (you can also use em units), add flexnav.css to the head of your document, insert jquery.flexnav.min.js before the closing body tag and initialize FlexNav right before the closing body tag. The default speed can be changed, with the plugin being supported by most modern browsers.

fashion-websites-2013-by-Sagar-Ganatra

• 50-fashion-websites,Beautiful Fashion Websites to Inspire You,top websites for fashion and beauty ,Inspirational Fashion Website Designs,best fashion and beauty websites 
• 
  
• 
  
• 
  

•  
• emploi NY
  

•  
• Diesel - Magic of Christmas
  

• 
• Boucheron Paris
  

•  
• Nelly Rodi
  

•  
• Giorgio 1985
  

• 
• Cropp
  

•  
• RVLT Revolution
  

•  
• Valentina Gallo
  

•  
• L'Exception
  

•  
• House
  

•  
• Gubb & Mackie
  

•  
• Conspiracy
  

•  
• Diesel - Color Exposure
  

•  
• DuJour
  

•  
• Heather Conlan
  

•  
• Ermengildo Zegna
  

•  
• Creative - EXSUD
  

•  
• Genny
  

•  
• Ballantyne
  

•  
• Barbara Opsomer
  

•  
• Free People
  

•  
• Diesel Fresh & Bright Superheroes
  

•  
• Brandon Knaster Jewlry
  

•  
• Prada
  

• 
• Timberland Earthkeepers
  

•  
• Vibram FiveFingers
  

• 
• O.X.S.
  

•  
• Lacoste Red!
  

•  
• Abercrombie & Fitch
  

•  
• Tom Ford
  

•  
• Tzegoh
  

•  
• Patrik Ervell
  

•  
• Reserved
  

•  
• Talc
  

•  
• Chicago L-Shirts
  

•  
• Marie Saint Pierre
  

•  
• Josh Goot
  

•  
• The Butcher and The Crow
  

•  
• Versace
  

•  
• Charles Campbell - Bespoke Shirts
  

•  
• Guy Vernes
  

•  
• Crane Brothers
  

•  
• CXXVI Clothing Co.
  

•  
• LOLA New York
  

•  
• Lula Designs
  

•  
• Hard Graft
  

•  
• Supply
  

• 
• Pageboy
  

•  
• Faith Connexion
  

•  
• Converse Deutschland
  

•  
• Roberta di Camerino
  

•  
• Kildare
  

•  
• Manufacture d'Essai
  

•  
• Airwalk
  

•  
• Massimo Bonini Showroom
  

•  
• Stella McCartney
  

•  
• Scotch & Soda
  

• 
• Jordan BCT Low
  

•  
• me & oli
  

•  
• Diesel > Denim & Jeans
  

•  
• BokicaBo - Spring / Summer 2011
  

•  
• WESC - The Chase - Spring 2011 footwear
  

•  
• Armani Code
  

•  
• GAS Jeans - Denim Spring / Summer 2011
  

•  
• Protest Boardwear
  

•  
• Levi's Roadwear
  

•  
• Guess
  

•  
• Versace Collection
  

•  
• Wrangler Europe | We are animals
  

•  
• Lacoste L!VE
  

The awards for design, creativity and innovation on the Internet, which recognize and promote the best web designers in the world. Here is Sagar Ganatra's Website you just love it Click me

1. Gucci

2. Versace fashion website

3. Pierre Cardin

4. Ralph Lauren

5. Valentino

6. Prada

7. Calvin Klein

8. Chanel

9. Dior

10. Dolce & Gabbana fashion websites

11. DKNY

12. Givenchy

13. Giambattistavalli

14. Hollister

15. Hermes

16. Oleg Cassini

17. YSL

18. Balenciaga

19. Vivienne Westwood

20. Paco Rabanne

21. Manish Maholtra

22. Tommy Hilfiger

23. Tom Ford

24. Ted Baker

25. Stella Mcartney

26. Shanghai Tang

27. Hugo Boss

28. Armani

29. Lacoste

30. Burberry

------------------------

1. Closed

2. Martin + Osa

3. Abercrombie & Fitch

4. Myla

5. Burberry

6. Coast

7. Roxy

8. Armani Exchange

9. Nine West

10. Anna Scholz

11. J.Crew

12. Barrie Pace

13. Free People

14. Jungstil

15. Urban Originals

16. New York & Company

17. Lane Bryant

18. Tooby Doo

19. BCBG MAXAZRIA

20. Acne

21. Miss Selfridge

22. Ralph Lauren

23. Ralph Lauren Rugby

24. Shoe Guru

25. Bluefly

26. Tommy Hilfiger

27. ASOS

28. White + Warren

29. Bridge55

30. Nordstrom

31. DSW

32. Lord & Taylor

33. The Vestry

34. Wallis

35. My Wardrobe

americanapparel.co.uk
Women, men, children, babies - everyone is catered for by this hip basics label with its hundreds of easy-to-wear cotton styles. We love the new two-tone fitted minidress in red and black (£26)
apc.fr
The understated Left-Bank cool that is APC is available in several British shops, but there's something so in-the-know about buying direct from its French website
asos.com
Asos has done for online shopping what Topshop Oxford Circus did for the high street: fast-moving fashion at affordable prices. Cross-referencing makes shopping for specifics easy. It often has great designer collaborations and beauty brands include Pixi and Korres
bunnyhug.co.uk
Shop here for cult fashion items favoured by Hollywood starlets, such as Kova&T Oxy leggings and Lauren Moshi animal-print T-shirts
isabellaoliver.com
Named by the fashion industry trade magazine Drapers as 'etailer of the year', this maternity-wear label offers stylish, well-cut clothing for those bearing bumps - some feat. It was worn by Angelina Jolie, no less, and the site's video content and styling suggestions make it useful as well as glam. Plus, it all arrives quickly in smart packaging
liberty.co.uk
Liberty online is now selling selected fashion from Acne to Alexander McQueen as well as its famous fabrics and Liberty-print shirts. Great, too, for top-end beauty brands
matchesfashion.com
Matches' expert buyers choose the best of the big designers (new additions are Yves Saint Laurent and Ossie Clark) and love to introduce lesser-known labels such as The Row and Peter Pilotto
mulberry.com
Roxanne, Mabel, Bayswater, Poppy - all the girls are here and in an array of colours and finishes that make this a veritable sweetie shop of accessories. New for this autumn is Jonathan Kelsey's shoe line
my-wardrobe.com
A youthful site stacked with big names such as Anya Hindmarch and more affordable diffusion lines including McQ and Kors by Michael Kors. It's a joy to browse. The fabulous Nathan Jenden is a new addition, and take a look at Katia Lombardo's shiny, shiny shoes
net-a-porter.com
The slickest fashion website in the world treats all its customers like VIPs. Dreamy dresses from Alexander McQueen and RM by Roland Mouret sit alongside cult jewellery lines like Kenneth Jay Lane. Look out for exclusive dresses from Preen and Richard Nicoll. And always keep an eye on the sales rail
pollyanna.com
From Lanvin to Comme des Garçons, some of the world's most directional clothing for men and women is just a click away at the online arm of Barnsley's famous store. The site is as serene and unfussy as the designs the shop has championed for 30 years
shopatanna.co.uk
The boutique owner Anna Park has a great eye for those pretty but easy-to-wear collections such as By Malene Birger and Rützou. Her jewellery choices are always girly and good for presents
start-london.com
Brix Smith-Start is one of the coolest chicks in London. She stocks the ever-popular Sonia Rykiel and Miu Miu, and this season pieces by Jean-Pierre Braganza are flying off the rails
toast.co.uk
Even Toast's website manages to look cosy. It's the perfect browsing site for rainy days and we highly recommend its classic-with-a-twist designs - this season the military-style navy Lermontov jacket and the Cavalry boots
topshop.com
With 800,000 web users each month, Topshop's magic formula continues online. It's not the most exciting site, but really, need it do more than offer of-the-moment fashion at fantastic prices? Most popular buys for autumn are leather trousers, jackets and, of course, Kate Moss's latest
urbanoutfitters.co.uk
Great for twentysomethings and for impressing fashion-mad teenagers, this site has everything from cool labels such as Luella to vintage-style band T-shirts
whistles.co.uk
With the ex-Topshop brand director Jane Shepherdson at the helm, Whistles has relaunched with a desirable winter collection. Look for classic pieces to see you through this season - and beyond
Ethical
adili.com
At Adili you'll find Fairtrade and organic clothes, skincare and accessories. The range includes basic T-shirts, designer collections for People Tree and ethically mined jewellery from Fifi Bijoux
etsy.com
Like eBay but for handmade goodies, Etsy is a 'venue' for users to buy and sell to each other. Delight in hand-poured candles and crocheted ear-flap hats
fashion-conscience.com
Ethical solutions for the very stylish. Keep an eye out for the Peter-Pan-collared tops from Beaumont Organic and slick designs by Noir
howies.co.uk
This casual and outdoor clothing brand wants 'to make people think about the world we live in'. That lofty aim is simply delivered through cute slogan T-shirts ('work hard - canoe home'). Nice red skinny-fit cords, too
oxfam.org.uk
Oxfam went all up-market this year, and next month, as well as selling carefully edited second-hand clothes, the website will stock ethical labels like Bora Aksu and Richard Nicoll for People Tree, as well as Wright & Teague jewellery and Aura Que bags by Laura Queening
Accessories
black.co.uk
Because we love its gloves. Particularly the very on-trend lace fingerless styles
kurtgeiger.co.uk
For style, quality and designer brands (from the adorable Chie Mihara to sexy Agent Provocateur), this slick shoe website cannot be beaten. There are hundreds of Carvela, KG and Kurt Geiger offerings, and styles are often available up to three weeks before they hit shops
lastfootwear.com
This tiny Brighton shop has a big website selling beautifully made shoes, hosiery and accessories. We love their Funn stockings, made on original 1920s machines, and Helen's recycled hairpins
mytights.co.uk
Offering an amazing selection of everyday, special occasion and downright eccentric hosiery, this is the definitive tights site. There are exquisite designs from the Scottish twosome Bebaroque and don't miss Celeste Stein's crazy prints
Jewellery
alexmonroe.co.uk
Few women will fail to be charmed by the award-winning jeweller Alex Monroe's pretty, nature-inspired designs. Look out for his very autumnal mushroom necklaces
astleyclarke.co.uk
Expert at discovering unusual designers such as Arunashi, Como Blonde and Carolina Bucci, Bec Astley-Clarke offers an array of the super-bling to the affordable, all with a unifying bohemian aesthetic
blaguette.com
A mid-price but high-quality selection. This site is packed full of colourful, bold and modern jewels
cristobal.co.uk
The etail site of the London antique jeweller Cristobal has a good vintage section boasting pieces from Schiaparelli, Dior and Chanel
kabiri.co.uk
From £25 to £60,000 plus (has anyone ever actually spent that online?), this contemporary jeweller, based in Marylebone High Street, London, is a favourite of fashion editors and stylists
Lingerie and nightwear
boudiche.co.uk
This award-winning Scottish lingerie boutique has a luxe site and some impressive names such as Stella McCartney, Kiki de Montparnasse and the sexy but cute Undrest. Gift-minded males get a helping hand from the 'men's guide', which advises them what to go for - depending on whether they're 'in the dog-house' or looking to 'spice things up'
figleaves.co.uk
A mind-boggling array of lingerie and hosiery in all shapes and sizes - if you can't find what you're looking for here, you're too fussy
pyjamaroom.com
Loungewear used to sound so 1970s, but now it's what we want to put on as soon as we get home. Pyjamaroom's collection includes soft wrap-tops, palazzo trousers and, new for autumn, cashmere pieces
volgalinen.co.uk
A family-run company that specialises in linen from Eastern Europe and Russia. We love its simple, natural nightshirts
Beauty
aesop.net.au
The thinking-person's skincare range - and surely the only beauty site to quote Kafka. Its natural products (the Oil Free Facial Hydrating Serum is great for problem skin) come in a fantastic box covered in words of wisdom from Camus to Dolly Parton: 'If you want the rainbow, you gotta put up with the rain'. So true
bobbi-brown.co.uk
Give a woman some Bobbi Brown make-up and her face lights up before she's even applied it. This site sells the whole range and has a hugely popular 'ask an artist' feature, where users can email any questions about products. And yes, the make-up artists genuinely do answer
boots.com
From cotton buds to Touche Eclat, Boots stocks pretty much everything that man, woman or child needs for grooming
clinique.co.uk
Attracting more than 12,000 visitors a day, this site is the biggest Clinique store in Britain and stocks the entire range. Sign up and they'll also text you before the next Clinique Bonus Time hits stores
comfortandjoy.co.uk
Comfort and Joy skincare is made with natural and organic ingredients by Merri and family at Baytree Cottage in Gloucestershire. Many a spotty forehead has been rescued by Merri's almost edible Honeymoon Cleanser. Delivery can't compete with the big boys, but sometimes, you know, even beauty is worth waiting for
cultbeauty.co.uk
This is a great idea: a beauty site for cult brands from all over the world. Currently flying out is Lucas' Papaw Ointment from Australia. The natural equivalent of Eight-Hour Cream, it relieves everything from dry lips to nappy rash - for only £4
eyeslipsface.co.uk
Founded by the creator of Urban Decay, Elf cosmetics has a cult following in America - largely because it's incredibly cheap. Each product is just £1.50. Brilliant for gifts and starter kits for teens - not to mention credit-crunched grown-ups
hqhair.com
It's not just about hair. This is a top-to-toe beauty and grooming etailer stocking high-end lines such as Mario Badescu skincare and Miller Harris scents, as well as basics such as Blax hair elastics. There's also an extensive men's section
johnlewis.co.uk
John Lewis is a good all-rounder for beauty products, stocking premium brands like Molton Brown, Acqua di Parma and Eve Lom as well as exclusive gift sets. The best thing? Free delivery
lookfantastic.com
A supermarket of the biggest brand names from Wella to Aveda, this is an efficient site that offers 15 per cent off more than half its products (including Dermalogica, Elemis and Decléor). Men are well catered for at lookmantastic.com
lovelula.com
Every girl should know about this organic apothecary. Orders arrive in a straw-packed box as if they've come fresh from the farm. We love John Masters Organics and Suki, a 100 per cent natural skincare and make-up brand
puresha.com
From the marketing director of the cult brand Pout cosmetics comes a site boasting niche luxury brands free from parabens 'and other nasties'. We love the Chocolate Sun fake tan from Los Angeles - an amazing 95 per cent organic with antioxidants. And Patyka, the Crème de la Mer of the organic world, as used by the saintly Gwyneth Paltrow
screenface.com
This is where professionals go for their essential kit - great make-up bags and the hard-to-find cult French moisturiser Lait-Crème Concentré by Embryolisse
spacenk.com
The Rolls-Royce of beauty websites, Space NK sells highly desirable cosmetics from the likes of By Terry and Shu Uemura, and skincare by Eve Lom, Dr Brandt and Pro-Ferm (try the Instant Lifting Serum for an on-the-spot complexion boost). Orders arrive in chic black and white beribboned boxes
spiezia.co.uk
This Cornwall-based, organic beauty company offers so many delicious treats that it's difficult to make up your mind. May we suggest the Lemon and Marigold Body Scrub (guaranteed to wake up head and body) and the chocolate-scented Organic Daytime Moisturiser?

      Top 10 must-read fashion and style blogs

They've all changed the face of blogging - but blogging's also changed them. Here, courtesy of a new compendium, 10 of our favorite online voices reveal how…

Anna Dello Russo

ANNA DELLO RUSSO
Anna Dello Russo (above) is the editor-at-large at Japanese Vogue. She has recently collaborated on an accessories collection for H&M.
'I forced myself to gain confidence with blogging because I wanted to show the "behind-the-scenes" fashion world. For me, blogging is about getting in touch with a new generation, with an audience younger than me. I keep my blog almost like a teenage diary, but the concept is deeper. When I am working with an assistant I always tell them beauty is all around in life, but it is about how you edit it.' annadellorusso.com

• 
  

FACE HUNTER

Yvan Rodic is a former advertising copywriter. His blog was one of the first to capture street style. He has since published a book, exhibited his photographs, created advertising campaigns and directed fashion films.
'When I moved from Switzerland to Paris, I discovered a new world: fashion. Friends would take me to shows and parties. I'd be so excited about all the fabulous characters and felt I should share them with others. I photograph people who combine elegance and creativity. I celebrate individual style from around the world with an emphasis on "unusual" places. Everybody knows about Paris or Milan; to me, posting an inspiring picture from Santiago or Helsinki has much more value.' facehunter.blogspot.co.uk


MAN REPELLER

Leandra Medine (above) is a New York-based journalist. Since starting her blog she has collaborated on films with the designer Michael Kors and Simon Doonan, creative ambassador at large at Barneys in New York. She has just secured a book deal.
'My blog started as a simple "Would this repel men or not?" Now it's more about questioning whether or not what I'm featuring is aesthetically pleasing and wearable art. Initially, I wasn't the man-repeller; I was just making the observations. Over time I started putting images of myself on the site, created a persona. It has expanded from just women's fashion being repulsive to men to women consciously dressing for themselves and almost hoping that they will in fact achieve man-repeller status.' manrepeller.com


ADVANCED STYLE

Ari Seth Cohen started out as a freelance photographer and writer in New York. His book, Advanced Style, was published this year and a documentary film is in the works.
'I feature people with great stories and unique personal style, Cary Grant mixed with Anna Piaggi and Quentin Crisp. I focus on men and women over 60, a demographic often ignored by the fashion media. The trick is to stay true to your vision.' advancedstyle.blogspot.com

HYPEBEAST

Kevin Ma lives in Hong Kong and formerly worked in the financial sector. In 2005 he launched Hypebeast as a forum for his love of trainers and street style.
'I started blogging because I wanted a way to keep track of the things I liked and where to access them. As time goes on, we're finding it is still growing and so are our readers, which provides us with the catalyst to continue searching for the unique and the unconventional. We try to feature things that are one of a kind. The great thing about blogging is that it can be accessed anywhere by anyone in the world. It's free for people to enjoy, share and be inspired by.' hypebeast.com

PARK & CUBE

Shini Park is a graphic design graduate from London. The success of her blog has led to contributions for Brazilian Vogue and glamour.com as well as collaborations with the brands Guerlain and Patrizia Pepe.
'My interest in blogging started to grow in the few months after I discovered blogs with strong identities. In time I grew to dislike the "buy, buy, buy" culture that was increasingly popular. So I decided, on a whim, to open my own space where I could explore affordable fashion and DIY projects and share style choices without feeling like I was in a popularity contest. The posts might cover an unusual technique used by a designer or a trend that could be replicable with DIY. The biggest influence the blog has had on my work is on my photography. There is no better lesson for an amateur photographer than to utilise the camera every single day.' parkandcube.com

STREET PEEPER

Phil Oh created 'failed internet start-ups' and published a chick-lit novel before he started his photographic street-style blog. He now contributes to American Vogue.com and works on advertising campaigns.
'When I started there weren't a lot of street-style blogs. I thought it would be fun to go around taking pictures of people I viewed as looking cool. Now my blog is my work and I've also been commissioned through it. These days I cover a lot more fashion weeks. There are so many blogs out there all attempting to do similar things, so I suppose what differentiates mine is simply my personal point of view. I like a lot of colour, print and pattern when done well, which is rare. I don't really look for a particular designer or trend, I just take pictures of things that I like.' streetpeeper.com

PATTERNITY

Anna Murray is a textile designer and Grace Winteringham a former art director who together run their creative consultancy .
'Patternity is about the putting together of patterns and seeing visual coincidences from one image to the next. Though we love the natural world and the patterns it contains, we tend to veer towards a stronger, bolder, often quite masculine and man-made look, with a focus on urban environments and constructed forms. We love featuring new designers, but, for us, their work could just as easily sit next to that of someone long-forgotten or unknown. We are now exploring working offline and making Patternity a more tactile experience in the real world.' patternity.co.uk

FRED BUTLER

Fred Butler started out as an accessories and set designer. In 2008 she launched her first womenswear collection at London Fashion Week.
'I love historical works that have captured a chapter in time as a cultural resource, such as Maripol's Polaroids of New York City or Peter Schlesinger's photographs of Hockney and his incredible clique. It's so lucky that these everyday scenarios were documented and I was aware that I myself was in a fascinating situation by living and working at the epicentre of the arts in London. My blog reflects my idiosyncratic tastes and aesthetics. Clothes, artwork, jewellery: whatever it is, it has to pop off the screen and be instantly clear and alive.' fredbutlerstyle.blogspot.co.uk

KINGDOM OF STYLE

Launched six years ago by Michelle Haswell and Marie Thomson, Kingdom of Style is the leading fashion blog to come out of Scotland.
'Marie was going through a tough time; we thought a blog would not only be a good project but also an ideal outlet for this passion we share. The blog was an online extension of our lives, in which we talked endlessly about clothes and style. The main difference is our age. We are coming from the perspective of women in their thirties and forties who don't conform to the expectation of how women our age should dress. Anecdotal, observational, outspoken and often irreverent, we are free to feature whatever is making our hearts race that day.' kingdomofstyle.typepad.co.uk




Thanks You So Much for Watching this Things Let me Show you  my Website Click Me