test: design

Showing posts with label design. Show all posts

Wednesday, 28 November 2012

4 top web design trends of 2012 to pep up your website

One of the most important elements of a good website is ‘spectacular design’. Earlier, websites were static and design elements played almost no major role in them. But with the emergence of Web 2.0 and the new web tools and technologies, websites have become more dynamic with design playing a vital role. Today, you can use your website(s) to interact with your users, engage them and prompt them to take a call to action easily. However, there are many fine points to consider while designing a dynamic website that is in sync with the changes in WorldWideWeb. Let’s go through four such web design trends of 2012, which will help you pep up your website and make it an instant hit with the end-users.

Responsive Interface

It is no secret that most of the users nowadays access the Internet from a number of mobile devices due to speedier connectivity and unlimited data plans. Since most of these mobiles are touchscreen devices, clicking on various elements on a web page has become redundant. Today, web designers provide users with websites that sport responsive interfaces.

You can use dropdown menus, large buttons, search boxes, breadcrumbs and other such elements and make your website more responsive for your end-users, so that they can easily browse, navigate and use your website irrespective of their devices.

Infographics

Infographics are the latest sensation. They are commonly found in various social media sites and for good reason; they provide important information and put them together in a way that is easy to read and comprehend at one go.

You can use infographics on your websites to present interesting facts, statistics or anything and everything under the sun (as long as they make sense). More importantly, infographics can be shared on social media sites (and accessed on various mobile platforms as well), which will help increase your website’s visibility online.

Parallax Scrolling

Parallax Scrolling combines static images and scrollable text. This new method enables users to scroll website elements in different and more interesting ways and is particularly useful, when you want to show more information on a single web page and yet, maintain a clean, uncluttered and user-friendly layout. To get a clear idea about Parallax Scrolling, you can search for some of the best sites that have used this method on their web pages.

Minimalism

Small is the new big and less is the new more. Today desktops with 10 inch screens or laptops with 14 inch screens are making way for 7 inch tablets and 4 inch smartphones. This calls for minimalistic web design, where only relevant information is displayed on each web page and any sort of clutter is totally done away with.
These sites have a clear design; display only the important links; contain simple backgrounds and big fonts; use a color palette with 2-3 colors at the most; are easy to navigate etc. In a nutshell, minimalistic websites provide information to the site visitors clearly without distracting them with unwanted design elements and wasting their time.

To Conclude

These were some of the latest web design trends on 2012. Use them on your website to make it more attractive, engaging and last but not the least, interesting for your target audience. This in turn will help you increase your conversion ratios and also increase the footfalls on your site.

About Guest Blogger

Alan Hall is a Los Angeles based Website Design with PLAVEBAPPS and has worked on numerous successful projects for his company. He also likes to research and write on various technical topics for guest blogging platforms when he gets the time.

Wednesday, 17 October 2012

7 essential elements to sketch your blog look great

A blog is a website that contains valuable information published on the World Wide Web shared among people at large. No matter how rich the content of your blog is, a unique blog design plays a vital role in making your blog successful. The internet is filled with ready to install themes but for bloggers who want make their blog a killer, read on to find out how you can design your blog from scratch.

Preparing for the blog design

The first step towards designing a blog is to have a clear idea as to what you are looking for. This is important for you or for your blog designer to save time and money on designing your blog.

The choice of colors

As you are striving towards getting more visitors to your blog, choose colors that many people like so that they will tend to stick around for a long time and also bring in their friends to your blog. Every color has a meaning of its own and the choice of colors can convey a lot to your visitors. Usually bright colors like red and orange grab the attention of the visitors.

Website layout

Blog designing is based upon the layout of your blog website. Earlier, blog websites had just the header and footer, main page for content and a sidebar. Nowadays blogs have two sidebars on the right and left side of the main content. You must have noted archive, subscriptions by email on the side bar.

Let us look at the importance of each of the layout components.

Header

Header is the top portion of your blog web page that your visitors first see when landing on your blog. The header is made up of the title, slogan, logo and navigation menu. Apart from these the search bar and icons to connect with social networking websites also finds a place on the header. The search functionality helps your visitors to perform a search on your blog and find relevant information.

Sidebar

You can opt to have two side bars left and right side of your main content or one of them. These side bars give you an opportunity to showcase advertisements or add a call to action button like Buy now! Offers on e-books, prompting your visitors to click and view the ad. Today there are so many multimedia professionals who specialize in delivering Ad banner design services through the internet.
If you browse through your favorite blogs, you will find network sharing functions on the left and blog archive, search function, tags, categories towards the right on many of them.

Center web page

The center part is where your blog content appears. Design your center part in a nice way so that visitors can enjoy reading your articles. You should be able to accommodate blogger comment form that allows other bloggers to comment on the posts and display them with replies added to those comments. Also include social media buttons and links to related posts. Social media buttons enable people to share your article posts on popular social networking and bookmarking websites.

Footer

Footer is the last section of the blog page. This section is the same for almost all web pages which consists links like privacy policy, terms and conditions and contact us.

A good blogging platform compliments an attractive blog design. Blogging platform like Wordpress support theme installation and has over a thousand free templates to offer for its bloggers to instantly add a theme to their blog. Let your blog design code be flexible enough to make changes in case your blog is not able to attract visitors. Ensure that it is search engine friendly and compatible on devices like the iphone, tablet and mobile touch phones.

About Guest Blogger

Linda, a passionate blogger also creates attractive banner designs for the web and dns server setup to configure and optimize server.

Saturday, 22 September 2012

Best Font Apps for Apple iPhone and iPad

When working on almost any kind of designer project, one of the most important yet difficult things is to choose the right font. Here’s when our smartphones can come to help us. There are many good font-related apps out there at iTunes, and some of them can even be used by professional designers:

1. WhatTheFont

If you’ve seen a nice font in a pic or poster and want to use it in your own project, it’s now possible with the help of the WhatTheFont app – just snap a photo with your Apple iPhone, and the app will easily identify the desired font. Or, if the font can’t be found in the app’s database, it’ll find the closest match. Very useful sometimes!

2. FontBrowser

FontBrowser is the next free iPhone app that can be used by designers, software developers, and all those who like playing with fonts and colors. It’s actually a Unicode font and color browser (with a huge database of 19,000 Unicode font characters, 9,600 colors and all their codes) and it’ll help you find the key codes and web codes for different symbols and colors. With its help you can also find out what fonts are installed on your Apple iPhone. Well, in case you don’t already know it :)

3. Font Maker

Font Maker can be downloaded from iTunes for free, and it’ll give you the opportunity to create your own fonts and use them wherever you want – in designer projects, is messages or in other apps. The only shortcoming is the fact that some of the custom letters and symbols created by you will be visible on Apple devices only. But let’s hope this little bug will be fixed soon.

4. The Typography Manual

The Typography Manual is a very useful and complete information resource that includes a glossary and a 60+ page book about graphic design, fonts, their history and use on the web and in different projects. Most designers, of course, already know all those theoretical things or just don’t need them at all, but still, sometimes we all need to access some info on the go, and this app can always be at hand. It’s available via iTunes for $3.99.
Besides, The Typography Manual offers a number of other useful tools, too, including those that can help you find the key combinations and HTML codes you need, or measure the type size of any font from any pic.

5. TypeDrawing

TypeDrawing, which is available at iTunes for $1.99, is one of the few apps that allow you to draw pictures using letters, number and sentences instead of brush strokes. Maybe this app isn’t made for professional designers, but the final images you get are really unique and interesting, and you can definitely use them in one of your projects.

6. Font Dresser Free

Font Dresser Free is a mini app that can help you write and edit texts, change the font colors and sizes, save them as photos and send them to your friends by email. It’s not very useful in professional projects, but is still rather fun to use – after all, designers should send out stylish emails.

7. FontBook™ – The Original Typeface Compendium

Available at iTunes for $5.99, FontBook includes the work of 118 renowned international type foundries, 1650 type designers, 700,000 typeface samples, and 35,000 fonts from 8050 font families, so it is one of the most useful tools to research and compare fonts.
The app is regularly updated over-the-air, so new content and fonts are being added all the time.

8. Typography

The last font app from our list is used more for fun than for any serious projects, but a good designer can find some professional use for it, too.
For £0.69 Typography gives you the opportunity to send messages using letters and numbers from Flickr pics instead of the usual ones. Since there are many, many different images with letter out there on Flickr, the app can generate a huge number of different sets of such messages; if you don’t like the current version, just shake your iPhone, and the app will come up with another version.

About Guest Blogger

Amelia is not a professional designer, but she’s definitely interested in design and works on different amateur projects from time to time. She’s also interested in mobile phones and mobile apps for designers, since they can really make the life much easier. You can contact Amelia via her Twitter or Google+accounts

Thursday, 20 September 2012

Guidelines for Multiple Language Websites Design

Images Sources : Nailsmag
This is guest post by Daliah Kaif
This is an article that highlights the importance of multiple language websites. Also this article gives important tips that can help you in creating amazing multi language websites so that you can appeal to a global audience.
English is the language of the world. However, that is today. The evolving world of today needs no explanation. There are no certainties that everything (including language) will remain the same in the coming future.

Also, with so many commercial sites in the world, are you absolutely sure that all your products are made for only the English speaking crowd? What about those who have a different language? Are you going to take the blame of racism? My guess is, not.
The world is becoming smaller because of better communication. Online shopping is a rage amongst people. It is so convenient to be able to sit in one part of the world and be able to shop from somewhere completely across the globe. Most websites today are adopting the multiple language approach to ensure that people from a different language and ethnicity too can procure their products.

So, it is important to create multiple language websites that can help people from different languages read your website and thereby become aware of your products. Do not lose out on a client just because he couldn’t understand what you wanted to say. Overcome the hurdle of the language discrepancy by following the following points:

Top Level Domains (TLDs)

To accurately penetrate overseas markets you’ll need to create a distinct TLD for each language. Doing this will augment your site’s credibility and reliability along with assuring a higher ranking in the local search engines of the particular country. When you have multi languages sub domains it becomes easier for your search engine to crawl through these sub domains.

Hosting

Hosting is as important as having the website in the first place. This is why you must take care that you host all these different language sites on servers in individual countries. Once again this can prove very helpful in local search engine rankings because of Geo Targeting.

Design

Website Design determines largely how a viewer receives your website. Although it has no direct impact on the changes in the language, it however should be laid out in a way that helps people read matter in whatever language it is offered in. This means that the framework that you have should be such that it is consistent in terms of banners and ad placements.
Your branding should be recognizable across various localized sites. It should be flexible enough to assist in navigation across various markets based on their preferences. There are several elements to consider when it comes to your overall page and navigation design for your set of localized sites.
You must take care that you may have to tweak the design with respect to the width and height of various columns based on language. Some languages may require you to use maximum imagery. Some others may require you to simply incorporate maximum texts.

Color

The social and ethnic implications of colors can differ extensively among diverse nations – for instance black is usually the color of bereavement in the west, while it’s white in the east, and green may point to the environment and nature in European countries, but in the Middle East it has sacred meanings, as the divine color of Islam. Contemplate prudently about your color scheme before going ahead with each site.

Imagery

Ethnic thoughtfulness is of critical significance when it comes to your imagery. You must ensure that the imagery of your site is in sync with the region. Say for example, for an Indian website, show Indian people; for a Chinese website show Chinese people. Also verify and be doubly sure that none of the images used in your site are offensive in nature to the particular ethnicity.

Flash

It is of utmost importance that you give importance to bandwidth. Making heavy sites may not work well everywhere. Minimize the use of Java and Flash as much as possible to ensure that the site gets loaded properly and in time.

Author Guest Blogger

Daliah Kaif, Currently working at Viteb. Which is a leading Outsource Joomla development and Web Design Company based in India. Her interests span from professional Joomla development and website redesign services. She has also enjoyed writing for his specialization, that is, website redesign on various forums.

Saturday, 25 August 2012

The Art of Making the Perfect E-Commerce Website - Avoid The Designing Black Holes

This is guest post by Albert Vaung
When you are designing an eCommerce website, there are no half measures. Your eyes need to be on the ball, all the time. You cannot afford any laxity when it comes to design. This is because more than anything else, the design of an eCommerce site is all about getting the attention of the target audience and creating an environment, wherein they are willing to part with their hard earned money. A website that can attract visitors, but has a very minimal conversion ratio is regarded a failure.
So, this begs the question – What’s the art of creating that perfect eCommerce website? Well, the answer is pretty simple, really and that is ‘Don’t fall into the black holes that are waiting to swallow you, every step of the way, when you are designing an eCommerce site. But you can only avoid them if you are able to identify them.

Here is a list of some of the design mistakes that eCommerce web designers need to avoid to bring forth the perfect website:

Forgetting that it is all about the products

You won't believe it, but there are some designers who actually forget to provide an interesting, intuitive, unique and detailed product information. Yes, I am sure you must have come across certain websites that have product information just for the heck of it. As a designer, you need to make sure that the prospective shopper is able to interact with the product that in many different ways, even though it's on the website. Even if the shopper cannot touch or feel the product, he/she must be able to experience it through the images on display, the in-depth and pertinent product information, and anything else that you can put up on the product description pages (videos, audio) that will give the shopper a better understanding of what the product is all about.
The whole idea behind product description is to offer users a chance to make an informed decision regarding the product displayed.

Oops, I forgot the Contact Details

Only those designers who are not really serious about their website, its products and services and the online business it represents, will hide the much needed contact information from website visitors.
They don’t want users to dig deeper into what the company is all about, but what about the online businesses that truly want to make their presence felt in the online world? If a designer forgets/hide contact information on such sites, then the credibility and profitability of the site take a direct hit. Every online shopper wants to know whether they are dealing with a company that is trustworthy, because at the end of the day, they will only part with their credit card information, if they are assured about the site’s credibility. As can be imagined, lack of contact information dilutes the trust factor big time and such website design ends up a failure.

Navigation that Lacks the ‘C’ Factor

The best website design, especially from the navigation perspective is one that makes, the navigation more ‘convenient’, yes forget about the X factor, it's actually the ‘C’ factor that determines the success or failure of the website. If your commerce website’s navigation is all over the place, there is no way in the world, that your target shoppers are going to buy from your site. Designers, at times, try to go overboard with their creativity, when they are designing the navigation for their online storefront. It’s important to remember that in such cases that the shoppers won't be appreciative of this fact. All they want to do, is search for their products, browse the various product categories, go through the product description and finally complete the shopping cycle effortlessly. They are not looking for creativity here, in fact what they are looking for is simplicity.

To Conclude

There is no shortage of black holes when it comes to designing eCommerce websites. If you fall into one of these, there is no coming back. But, on the other hand, if you manage to avoid them, you are creating an environment, when the success of the website is assured.

About Guest Blogger

Albert Vaung works with PLAVEB a Leading E-commerce Solutions Provider company that is also renowned for its web application development services. He is a web designer who has worked on a whole range of diverse project requirements for different business domains. He also loves writing about his designing experiences and sharing them with other like minded people. Oh Yes! And he loves binging on donuts as well!

Wednesday, 25 July 2012

Designing a better landing page

This is guest post by Rob Toledo

Hundreds of thousands of web pages are designed every day around the world, and the vast majority of them are...average. That's because not every web designer puts as much thought into their pages as they deserve. If you're not sure what the most important considerations are with your next web page, check this short list for some commonly-overlooked elements needed to design a great landing page:

Think about how to keep your page loading quickly: It's easy to get caught up in adding more pizzazz and beauty to a landing site, but you rapidly reach a point of diminishing returns. It's more important to most people that your page load in 1-2 seconds than being covered in delicious gorgeousness.

Think about how your visitors will interact in the first 2 seconds: If your visitors never get around to reading the text, it doesn't matter how much your client pays for killer copy. So as the designer, you need to design a page that encourages skimmers' eyes to land on the most important elements first.

Think about what surfers will do if they get lost: It's surprisingly easy to get lost inside a web page. Clicking on a link you didn't mean to or on an image you didn't realize was a link, and suddenly you're not sure how what you're looking at relates to what you were reading. That's why navigation elements are critical on every page of your site, so make room for them.

Think about minimizing the impact of images and videos: There's nothing that affects page load time more than long videos, over-sized pictures, and dozens and dozens of small images each calling their own HTTP request. Instead, edit and minimize picture and size before uploading them to the server, and consider using CSS sprites to handle multiple smaller images at once. This helps reduce HTTP request load.

Think about what people in foreign countries will think of your site: In the USA, white is the color of purity and marriage. But in many African and Eastern cultures, white is the color of mourning. In the USA, the Chevy Nova is a car name that evokes the speed of light (an exploding star). But in Spain, 'No va' means "doesn't go", and that particular car failed utterly. Think about how visitors from around the world will perceive your site, and do your best to keep it culture-neutral.

Think about what your website will look like in the future: Your site might look great now, but consider the last time you surfed to a website and found a broken link, a fact that wasn't true any longer, or some other sign that no one was paying attention to on the website. How long did you stick around? Consider putting some measures in place to make sure that your website doesn't end up like the one you visited. A link checker that runs automatically once a month and a quarterly manual read-through can keep your site up-to-date with minimal effort.

Most Importantly: Think about what a surfer will do with your website: It's hard to believe that there are web designers out there who make landing pages that aren't carefully-crafted to be immediately useful to their visitors, but it's true. So just in case it's slipped your mind, always stop and think about what your website can do for your surfers. That is, after all, what a landing page is for.

About guest blogger

Rob Toledo loves web design, CSS3, Firefox and no longer supports IE7. He is working alongside Shutterstock creating web design guides on the proper use of stock photography and stock videos

Sunday, 15 July 2012

Website Design – Why Simplicity is Beauty

In the world of website design, dynamism and originality make for excellent website concepts. Nowadays, people are after the unique, the scintillating, and the creative. However, despite the growing tide of overdone aesthetics when it comes to website design, more often than not, many professional website designers still veer towards the simple and often monochromatic themes that were the staple of earlier sites.

Social networking sites like Facebook itself is quite popular and winning despite its aesthetics of the plain blue and white variety. Despite the lack of pizzazz, plain websites have something that even the most ornate of websites don’t have – finesse. Plain websites often come in two-colored spreads, and while these are nothing close to the more stylish websites so common today, their plainness and almost Spartan look appeals to many due to its minimalist scheme.

If you’re looking to make a website without too much pizzazz but still want to give it a wow-factor, opting for simple website designs is essential. One of the best ways to meld simplicity with style is to pick colors which are soft and comforting to the eye. Pastels which are not too muted but aren’t too bright usually make for great choices, although darker colors also work well if done tastefully. Picking complimenting colors is a basic no-brainer if you’re looking to make a spread out of just two colors alone, although contrasting colors could also work well only if done-up correctly, which can be difficult for beginners.

The simplicity of the color scheme should not make the website seem half-heartedly done however, as sleek lines, clear and concise content placement, and easy navigation all redeem a site that is somewhat on the plain side. You can add a little spice to the plainness by incorporating some unique features into your website spread, although the primary purpose of a simple spread is to not detract readers from the content.

If your website is laden with useful content and nuggets of knowledge, you wouldn’t want to distract them by creating too opulent a spread that would reduce the readability of your content. Opting for clear and easily read fonts are keys to developing a good spread, while keeping everything orderly helps to improve the aesthetics.

Incorporating images or aftereffects to the site is just another way to add a subtle touch of style to an otherwise plain-looking site, although the color schemes should always compliment the overall site spread and not clash against it. Because website design can be very tricky for those who aren’t in the know, looking at more professional websites should help them in the choice of color scheme and overall style. If your site is blog or a site dedicated to dishing out content that is laden with text, a good font-type and size should be decided upon.

While you may be tempted to opt for more gaudy or stylish fonts, settle on common ones, or using unique but readily legible ones is always a wise choice. Though you may be tempted to color your fonts in the same scheme as your spread, only do so with careful consideration. If in doubt as to the aesthetics of website design, or if you find it difficult to decide on a color scheme, consult a web designer who can procure sample spreads that integrate your site’s purpose with simple yet engaging aesthetics.

About Guest Blogger

Norris Lemuel Lasay has been working as an online article writer for quite some time, covering different topics such as wireless internet, satellite TV and other technology related topics. If you need to find out more about satellite TV, you can visit this website.

Friday, 25 May 2012

Some Basic Principles and Techniques for Web Site Design

This is guest post by Brianne Walter on basic principles and techniques for web design . It's also helpful for you who want to make a custom template for blog .
The principles and the techniques are essential for any design. Therefore, in this case, the website design is no exception. For a good website designing, you will need to apply the principles and techniques in a wise manner. Therefore, you will need to know about these elements and its functions. Therefore, some principles and techniques are discussed for your need.

Layout

The layout of a website can create its aesthetic meaning to the visitors. Therefore, it is very much important to use the composition of the page in the subtle manner. How you will design, the website's page is a vital concern for making the stunning layout. Therefore, for achieving the success of the layout, you have to apply the grid technique in the layout segment. Particularly, the rules of third should be used to make a stunning composition for the website layout. For good layout, you have to consider putting some surprises in the design, so that the visitors can stay on the website page for a long time.

Color

The color for any website design is an important element. So, the color should be used in the website design in intelligent way. Remember color can make or break the consistency of the website layout. Before using color in the website page, you have to study the color harmony in deeply. So, that there will be no scope for error for color placing on the website layout.

Typography

Before using the typography on the website, you have to know the aesthetic sense of the fonts. The reason is that if you use the right font for the website design, then you will make it more user-friendly for the visitors. The exact typography for the website design is vital for the eyes, because, the wrong fonts can damage the viewing angle of the monitor screen.

Navigation

When you are going to design the website, you should remember that navigation in the website should be user-friendly which means the visitors can access the website without any trouble. Moreover, you have to use your intuition in advance, about where the movement of the visitors' eyes will be on the web page.

Usability

When you are designing the website, you should think about the visitor's mind. In advance, you have to realize that what the visitors will do when they make a visit on the website and you have to think about what the visitors will do on the website.

Clarity

The clarity of the website design depends on the pixel usage. So, how you will use the pixels in the website layout which will determine the crisp and the sharpness of it on the monitor screen. Moreover, the edges of the pictures or fonts should be clear as well as looking great on the monitor screen also.

Consistency

Always, remember that the website design should have consistency in all segments of the layout, because, the consistency in every aspect of the website will determine its success. Generally, consistency means making everything match like font, spacing, heading sizes .Etc.

Therefore, the website design requires the principles and techniques to build a good-looking website for the visitors.

About guest blogger

Brianne Walter is a freelance blogger who is passionate about writing. She frequently writes on SEO, marketing, design and social media related topics. Her favorite sites are ecofriend and style guru, which she also happens to work for.

Thursday, 17 May 2012

7 Essential Design Elements of E-Commerce Email

Email is still king. Even as other channels become more popular, email remains popular among Internet users. Marketers still value email as a way to communicate with consumers.
It's important for designers to understand the value placed on email and email design.
With this in mind, let's look at the essential elements of e-commerce email design.

E-commerce companies work hard to build their email subscriber lists. These folks realize the importance of having a list. To have a consumer opt-in to an email program is a sign that they want to receive valuable correspondence from a company. If you can create great email designs you will be a valuable resource for any company looking to hire.

1. Visual Brand Relevance

Source

If you are looking for email inspiration you can't go wrong with Fossil. In the last year or so their program has been stellar. The design really establishes what their brand is about and these days the Fossil brand is cool, laid back and stylish. Fossil has become known for way more than just watches. Their apparel and accessories are sought after by folks that have a little funky and organic style. Use brand images and photography in emails for e-commerce brands like Fossil. It's a great way to really entice people to click through to the site to shop, but it's also something they'll actually look forward to seeing in the inbox each week.

2. Purpose & Call-To-Action

Source

The simple concept and design of the LL Bean Signature emails are great. They focus on simplicity. You won't see a ton of calls to action. Instead, each email has a basic purpose and a call-to-action to support that purpose. In this case, LL Bean Signature is promoting their polos. There are two main calls to action. Shop the featured polo or shop all polos. Simple. Easy to understand.

3. Cohesive Theme

Source

Levenger often has a theme for their emails. This email featured a theme for graduates. The entire email was focused on items a graduate would need for their professional career. Cohesiveness is important when creating emails like this. It is relevant to a target customer. The email is not relevant to everyone, but there are still a few small links near the top and the logo for others to click through to the website.

4. Descriptive Headline

Source

Johnston & Murphy did a great job with a headline in a recent email. The headline is only two words, but you instantly understand what the email is about. This is important. Headlines are key to letting the email opener know they are looking at the right email. The subject line needs to lead to the headline, which leads to the landing page. Johnston & Murphy did this plus they took advantage of a timely event, The Kentucky Derby.

5. Enticing Links

Source

Danner takes a little different approach with their email program. Every month they send out their Danner In The Details email. It's a great series with a focus on content. The design is simple. There is quite a bit of content for each section of the email, but what is really important here is the enticing nature of the content. It leads you just enough to get excited and then the links call you to action to click through to the website. This is good email design and strategy. Get the consumer to the website.

6. Obvious Links or Buttons

Source
Old Navy's emails are entirely unique. They are flashy and in your face. The brand has changed marketing strategies in recent years. They are promotional and fun. Their email program reflects this brand strategy. Another good aspect of the Old Navy email design is the obvious links. On the left side of this email you'll notice four links for Women, Women's Plus, Maternity, and Men. These basic looking text links, but that's what consumers are comfortable clicking. Don't get too crazy with buttons and links. Make them obvious for users so they are comfortable clicking.

7. Consumer Focus

Source

Woolrich has a great email program. The design is visually appealing. The company very much communicates their brand message with their design and imagery. In this example you see the photo of the woman. It's something the target audience of Woolrich will see and understand. Photos like this are great for connecting with an audience.

But what I love even more about this email is the customer-focused list of benefits. It can be difficult to focus on the customer benefits when referring to products. Woolrich does a good job. They understand that a customer is not just buying a shirt. The customer is getting something that will keep them dry in the summer months. This email is selling more than just a shirt. It's selling comfort.

About Guest Blogger

Dayne Shuda is a contributing blogger for Fluttermail, email marketing for small businesses.

Wednesday, 27 July 2011

How to make a blogger template : data tags -part 2

Blogger team tried to make their product easier to use and custom for all users with Template Design function. If you want small changes in fonts, background, layout..., this function can help. But if you want more to make your blog look like a professional website? It's time you need to learn structure of blogger template, APIs, javascripts ... to make a custom template. This serie: “How to make a Blogger template” will take you step by step to creating your own. I will try to make it short, simple and easy to understand, hope it helpful for you .
----------------------------------------------------------------------

Chapter 1 Blogger Template Structure

Chapter 2 Template Header

Chapter 3 Template body and API's

Chapter 4 Inside widget - "Includable"

Chapter 5 Blogger data tags 1

Chapter 6 Blogger data tags 2

Chapter 7 How Blogger widget work

Chapter 8 General steps of making a Blogger template

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

CHAPTER 6: BLOGGER DATA TAGS 2

You already knew about data tags in previous chapter, we will see the rest of data tags in this chapter and know more about the most important widget: blogpost. This widget purpose is to shows posts in a blog. Without blogpost widget, we can't blogging.

Now let's see blogpost widget's data tags :

<data:feedLinks/>: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
<data:feedLinks.url/>: The feed URL.
<data:feedLinks.name/>: The feed name (i.e. 'Posts' or 'Comments').
<data:feedLinks.feedType/>: The type of feed (Atom or RSS).
<data:feedLinks.mimeType/>: The mime type of the feed.
<data:olderPageUrl/>: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
<data:olderPageTitle/>: Title of the link to the older page of posts. It's usually the text "Older Posts"
<data:newerPageUrl/>: The newer equivalent of olderPageUrl.
<data:newerPageTitle/>: The newer equivalent of olderPageTitle.
<data:commentLabel/>: The phrase to use to show the number of comments, e.g. "comments."
<data:authorLabel/>: The phrase to use to indicate who wrote the post, e.g. "posted by."
<data:timestampLabel/>: The phrase to use to indicate when the post was written, e.g. "posted at."
<data:postLabelsLabel/>: Phrase to introduce the list of post labels, e.g. "labels for this post."
<data:backlinksLabel/>: Phrase to describe backlinks to this post, e.g. "links to this post."
<data:posts/>: A list of all posts for this page. You can consider it a set, and each post is an item in this set . We can refer to post's properties by the following tags:

<data:post.dateHeader/>: The date of this post, only present if this is the first post in the list that was posted on this day.
<data:post.id/>: The numeric post ID.
<data:post.title/:>: The post's title.
<data:post.body/>: The content of the post.
<data:post.author/>: The display name of the post author.
<data:post.url/>: The permalink of this post.
<data:post.timestamp/>: The post's timestamp. Unlike dateHeader, this exists for every post.
<data:post.labels/>: The list of the post's labels. Each label contains the following:

<data:label.name/>: The label text.
<data:label.url/>: The URL of the page that lists all posts in this blog with this label.
<data:label.isLast/>: True or false. Whether this label is the last one in the list (useful for placing commas).

<data:post.allowComments/>: 'True' if this post allows comments.
<data:post.numComments/>: The number of comments on this post.
<data:post.showBacklinks>: Whether to show backlinks for this post.
<data:post.numBacklinks/>: Number of backlinks for this post.
<data:post.addCommentUrl/>: The URL of the 'add a comment' form for this post.
<data:post.emailPostUrl/>: The URL of the 'email this post' form for this post.
<data:post.editUrl/>: The URL of the edit form for this post.
<data:feedLinks/>: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
<data:feedLink.url/>: The feed URL.
<data:feedLink.name/>: The feed name (e.g. 'Posts' or 'Comments').
<data:feedLink.feedType/>: The type of feed (Atom or RSS).
<data:feedLink.mimeType/>: The mime type of the feed.
<data:comments/>: A list of all comments for this post (on item pages only). Each contains the following:
<data:comment.id/>: The numeric ID of the comment.
<data:comment.body/>: The body of the comment.
<data:comment.timestamp/>: The time the comment was created.
<data:comment.author/>: The display name of the comment's author, or 'Anonymous'.
<data:comment.authorUrl/>: URL of the comment author's profile, if the comment is not anonymous.
<data:comment.deleteUrl/>: The URL for deleting this comment.
<data:comment.isDeleted/>: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)

Tuesday, 12 July 2011

How to make a blogger template : the header

CHAPTER 2: TEMPLATE HEADER

Because we don’t need to edit anything in 1st section of Blogger template, So we move to section 2 – the header. It is the first thing we should care for a blogger template.

In a default blogger template, there are two lines in this section:

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

The first line

<b:include data='blog' name='all-head-content'/>

insert necessary meta tags to the header. If you view source code of a page, you will see something like this:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
.....................

Instead of <b:include data='blog' name='all-head-content'/>

The next line:

<title><data:blog.pageTitle/></title>

is rendered to the <title> tag:

<title>blog titles .....blah blah ...</title>

What should we do with header?

You can add your own meta tags for 'site description' ,'keywords' , like these:
<meta content='your blog description goes here' name='description'/>

<meta content='your blog keywords ....' name='keywords'/>
Add your own favicon:
<link href='link to your favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
Add link to external script files or css files.

Tip

In Blogger ,we can add meta tags for keywords and description depends on current page by using following code:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
......... meta tags for the homepage ....
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/></title>
....meta tags for category page (or archive page)....
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
.... meta tags for single post ...
</b:if>
</b:if>
</b:if>

Explaination:

- Show the meta tags for homepage in header and blog title in title if the current page is homepage ,
- Show the meta tags for category page in header and blog title in title if the current page is archive/category page ( page that contain a list of posts under a specific category ).
- Show meta tags in header and title of post in title if the current page is a single post.

By using this code ,we can narrow the meta tags (keywords, page description) and title for every page. Although we can't add keywords, page description for a specific post, but it's still better than do nothing, isn't it?

Wednesday, 6 July 2011

How to solve CSS errors in Blogger template using Firebug

Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS

Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website : http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom of browser window .

Click on the arrow button in firebug window

After click this button ,there will be a rectangle around the element that the mouse is pointing . Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .

You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^

Tuesday, 5 July 2011

31 online CSS Cheatsheets that help

Believe it or not ,most of modifications in default Blogger templates that I did were CSS only . And the result are custom templates you see in SimplexDesign blog .Understanding CSS ,even a little can help you in changing elements in website/blog as you want .Changing in Font size,colors ,size of elements ,positions of elements... all of them are CSS ^^
But how can we remember all of them ,we are not developer and we have no time to do this . So here are 30 CSS cheatsheets ,that you can use for reference ,anytime you want to know about an attribute ,what they mean ,and the role of them ...
I hope this helpful to you

This information was found on this site ,and you can go there to get the original post and more interesting posts
This article is divided in 2 major Sections: