Bringing opportunities to the prepared mind.

Archive for the ‘Web Design’ Category

The @Font-Face Rule and Useful Web Font Tricks

 

“The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.

This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.”

Read the full article @ SMASHING MAG.

A Handful of Fascinating Typography Tidbits

“Today, I present to you a small handful of informational tidbits which will act as glimpses into the world of a typography enthusiast.

You may not currently think about the impact of a period, types of fonts, or understand why people grumble about Comic Sans, but hopefully after this article, you might.

1. New York Times Nameplate – The Impact of a Period

The period in the New York Times nameplate died on February 21, 1967. Around the time of the removal, they put out a news release claiming that removing the period from the nameplate would save tons of ink every year.

Although the alleged ink savings were beneficial, they were not the original reason for the redesign, theTimes was looking to update it’s appearance and hired Ed Benguiat to make a number of typographical alterations. According to his Wikipedia page, Benguiat has designed over 600 typefaces, including Playboy, Sports Illustrated, and, the original Planet of the Apes film.”

Resources

You can find the full article @BUILDINTERNET.

How to Create Social Media Buttons Using CSS3

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.”

You can also read the full article @ SIXREVISIONS.COM

How to Create Animated Shine Effect with jQuery & CSS3

“Addy Osmani shows us how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

You’ll also learn today how you can successfully use layering in your designs to give your gallery that extra bit of detail that can make it stand out from the others.”

Shimer

Requirements: jQuery Framework & CSS3
Demo: http://www.addyosmani.com/resources/shinetime/
License: License Free

This article was written by WebAppers.

Designer Portfolios to Inspire You

danny

“Today we will be starting with a new post string where we will be featuring designer portfolios weekly. Today will be the first installation of these posts, but we want to make sure that the showcased portfolios do inspire you. We also want to involve the community in these posts and do highly encourage you to post a link to your portfolio in the comments if you would like it featured on Creativeoverflow in the future.”

Checkout creativeoverflow for all the creative designs.

3 Tips for Maximizing Engagement With Facebook “Likes” and Shares

“David A. Yovanno is the CEO of Gigya, Inc., a leading social optimization platform for online business. He can be found on Twitter at @daveyovanno or e-mail dave(at)gigya(dot)com. 

When it comes to Facebook, if you’re uncertain where and when to place a “Like” button on your site and when to use “Share,” you’re not alone. Social sharing technologies have evolved significantly in the past several months, but it’s not as complicated as it may seem. Used in concert, “Like” and “Share” are some of the best tools around for driving referral traffic from social networks, opening new communication channels with customers and prospects, and building relationships with your best advocates.

Here are three best practices for applying them together.


1. Design for Both “Like” and “Share”


Rather than choose one or the other, sites that combine “Like” and “Share” into the user experience see the greatest level of success in terms of driving referral traffic, building relationships and learning more about their customers and visitors. Why? Not only do “Like” and “Share” have different strengths and different applications, they actually drive the most value when used in concert. Let’s drill into the specifics to illustrate.

The “Like” button has many benefits:

  • When clicked, an item is published to the person’s Facebook feed, driving referral traffic to the website. If the user is already logged into Facebook, this is a one-click process.
  • “Liking” adds data to the user’s profile on Facebook.
  • “Liking” is an easy way for users to make a connection with the things they have an affinity for — just a single-click user experience.
  • “Liking” opens a new communication channel for publishers that can subsequently share news to the feeds of Facebook users who have “Liked” that item on their site.

Facebook recently released data on the value of a “Liker” which provides compelling reasons for engaging them:

“People who click the Facebook Like button are more engaged, active and connected than the average Facebook user. The average ‘liker’ has 2.4x the amount of friends than that of a typical Facebook user. They are also more interested in exploring content they discover on Facebook — they click on 5.3x more links to external sites than the typical Facebook user.”

So where does the next generation of “Share” functionality fit into this picture? Enabling “Share,” in addition to “Like,” enhances both the overall user experience as well as the power of the “Like” button for the site:

  • Sharing provides a way for people to express themselves and share with friends when “Like” (or “recommend,” which is another form of the “Like” button) is not the appropriate sentiment. People typically “Like” things or social objects, but share activity. For example, if someone makes a comment on an article or reviews a product, they are more likely to want to share their point of view with friends rather than “Like” it.
  • When a Facebook user clicks the “Like” button, the website hosting the button does not get access to information about that user or about the “Like.” Integrating sharing into the site — via Facebook’s Open Graph API — effectively closes the data loop by asking a person to connect with a website the first time he or she chooses to share something. Once a user connects, his or her “Like” data is available to the site owner, enabling a more personalized user experience outside of Facebook.”

This article is an excerpt from MASHABLE. Click the name for the full article.

 

Top 15 SEO Blogs To Follow If You Want To Brush Up Your SEO Knowledge

“For all we know, Search Engine Optimization, better known as SEO, is used for obtaining the right keywords when we search for something on the internet. But only few of us know is that SEO is used in obtaining rankings for a site under relevant keyword phrases.

SEO has several uses not only in business, but also in making research at school, or at work. Admit it, if this was not invented, you would really be having difficulties in searching and of course, a good SEO means, you won’t be having difficulties and the saves you time looking for what you want.

Following are some of SEO blogs that I consider in the top 15 of my list. And after you go through with them, the more you will appreciate about SEOs.

Seomoz

Seomoz is a website that offer tons of SEO tools and information. Some of the tools are free, and some of them require premium subscription. Their SEO blog is updated frequently and you will always find quality articles over there.”

Read the full article @WEBDESIGNBOOTH.

 

Things You Should Do Immediately After Launching a Website

So you’ve just launched your website. The only thing left now is to start creating content and arranging for some promotion, right? Well, not so fast. You first have to do several things to ensure that your site is set up properly and ready for the public.

Here are a few things you should do right after launching a website (and if you can, do them prior to launching your website publicly).

 

Create a Sitemap.xml File and a Robots.txt File

What are these files? These files are essential for search engines and other web services. They are two out of the five web files that will improve your site.

The Sitemap.xml file is a standard protocol for listing all the URLs that are contained within your website. It gives web spiders like Googlebot a better understanding of your website’s structure.

If you’re using WordPress, you’re in luck: The only thing you need to do is to install a plugin called Google XML Sitemaps, and it will do all the work for you. This is a valuable WordPress plugin, and is one of six plugins that Six Revisions uses on the site.

If you’re not using WordPress, you can have a look at XML-Sitemaps.com, a simple tool for generating a Sitemap.xml file just by providing your website’s URL.

Read the full article @ SIXREVISIONS.

 

Warping Drop Shadows to Give Depth

Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth.

I ran into a similar situation in a recent client project, and decided to use a recent trend of warping drop shadows to help add some extra excitement to the page. You might have seen similar effects in other tutorials involving deleting a circular section, but this method will keep the edges from being too sharp. It also allows you to work with non-rectangular shapes because all points are editable in the warp tool’s grid.

Read the full tutorial @ BuildInternet.com

50+ Fonts for Big, Bold Headlines

type

“Font selection for headlines on websites can be critical to achieving the right look and drawing the proper attention with the headlines. Here is a look at more than 50 fonts that will give you some options for creating strong headlines that communicate a message. Some of these fonts you probably already have, some of them can be downloaded for free, and others can be purchased. Each font is linked to a page where it can be downloaded or purchased.”

Written by DesignMag.