For years people have always made an effort to really focus on increasing their Google pagerank as much as possible. I always ask people, what is it about Google pagerank that makes you want to increase it so badly? Many times they really didn’t know how to answer the question or at least answer [...]
For years people have always made an effort to really focus on increasing their Google pagerank as much as possible. I always ask people, what is it about Google pagerank that makes you want to increase it so badly? Many times they really didn’t know how to answer the question or at least answer it correctly.
For many years Google pagerank was the sought out factor for many people diving into search engine optimization. Over the years it has been severely abused as people seek out science project like marketing campaigns only to increase page rank. News flash, rankings alone don’t grow a business and the search engines are really starting to evolve and change the way that they rank websites. They are tweaking and modifying search engines to only reward those who take a natural approach to building their business. An approach that builds over time with heavy branding and marketing elements rather than pouncing on loop holes to achieve rankings in search engines. Internet marketing company HubSpot based out of Boston MA had this to say about Google page rank: “Page Rank has nothing to do with SEO rankings or results. I know of websites that have a Page Rank of 0, and yet they still get organic rankings and search traffic for competitive search terms.”
Basically what HubSpot is saying is that businesses and websites should be focusing on building their brand and their business and not worrying about what the Google pagerank of their website is. At the end of the day page rank does not offer any value. You can’t track where your page rank comes from or why it is even there. It has almost become a distraction for website owners that have lost focus on what it really means to market your business online. Even Google has removed any mention of pagerank from their guidelines.
A recent Q&A session on one of Google’s forums had this to say: “Q: My site’s PageRank has gone up / gone down / not changed in months! A: Don’t worry. In fact, don’t bother thinking about it. We only update the PageRank displayed in Google Toolbar a few times a year; this is our respectful hint for you to worry less about PageRank, which is just one of over 200 signals that can affect how your site is crawled, indexed and ranked. PageRank is an easy metric to focus on, but just because it’s easy doesn’t mean it’s useful for you as a site owner. If you’re looking for metrics, we’d encourage you to check out Analytics, think about conversion rates, ROI (return on investment), relevancy, or other metrics that actually correlate to meaningful gains for your website or business.”
When Google comes out and says it than you better believe that it is true in every possible way. You can read more about Google’s view point on page rank on the Google webmaster forum. I given touched on the subject of Google PageRank sculpting as a waste of time a few months ago as well.
If you have been conducting search engine optimization efforts for your website for some time and you are wondering why things just are not working out like they should you might want to take a step back and take a look at some other factors that could be holding your website back from climbing in [...]
If you have been conducting search engine optimization efforts for your website for some time and you are wondering why things just are not working out like they should you might want to take a step back and take a look at some other factors that could be holding your website back from climbing in the rankings.
Here are a few important areas to consider when marketing your online business:
• Proper Steps? – Did you dive into link building or did you take the proper steps to optimize your website first? If you’re trying to build links without taking the time to focus on your website first you will never see the results you are looking for. Link building before on-site optimization is a lot like putting the buggy before the horse.
• Brand Power – Have your tired to increase the power of your brand? Strong branding elements often times will get a website visitor to reconsider things when they make it to your website. Try either re-branding or branding your business website even more to get people interested what you have to say. Branding is playing an even more important role in today’s market place than it ever has before. Website traffic wants to see your logo and company info in many different places so make sure that you are branding your business actively. • Website Structure – This is very important, have you taken them time to make sure the layout of your site is completely ready for your business goals. If your goal is online sales on your online store than you should have many ways for that website visitor to make it to your online store. If you want leads your lead form should be visible on every page of your website. You want to make sure your URL’s to all your web pages are clean and optimized and all content is clearly visible on all your web pages.
• Age of Website – Did you just launch your website a few weeks or months ago? If you just recently launched your website you will have to diversify your marketing approach until you start ranking in search results. Rankings are given to websites who have been around for some time and you have to have your expectations in order when launching a recently new website.
Search engine optimization requires a unique and carved out plan that requires some patience and time to get right. It is more than just building relevant inbound links to your website. It is building a business and on any platform building a business brings its own challenges.
I believe that the hardest part of SEO is simply keeping up with the trends. Our industry moves extremely fast and as a result, my co-workers and I have spent countless hours searching through old blog posts, articles and e-mail threads while trying to find small tidbits of information. Each of us have separate lists of our favorite resources and up until now, we haven’t had a convenient way to aggregate these.
Luckily, we are finally fed up enough to try to do something about this problem.
Together, we are going to spend the next month putting together an SEO Knowledge Center that will contain information on the best practices and important information for various SEO elements. After they are done, I am making it my responsibility to keep these pages up to date for the duration of my employment at SEOmoz. (Read: Job Security ;-p)
While my co-workers and I write these, we would like to offer up all of our drafts for peer review. Below you will find the first three SEO elements that we are tackling. We are big fans of the wisdom of the crowds and would love to hear all of your feedback.
Please note: These pages are not yet finalized! That is why we are submitting them for review Please feel free to leave us feedback, including your favorite resources and tools for these specific SEO elements, in the comments below or with me on Twitter.
Mini Update: Thank you to everyone who has offered suggestions so far I just wanted to clarify the editing process for these pages. The first version of the SEO Knowledge Center will only be updatable by people who work at SEOmoz. I don’t think that is sufficient long term, so I would love to hear ideas on how to add a better feedback system. My first thought was wiki style, but given the nature of these pages, I don’t think this is the best solution. What do all of you think?
I believe that the hardest part of SEO is simply keeping up with the trends. Our industry moves extremely fast and as a result, my co-workers and I have spent countless hours searching through old blog posts, articles and e-mail threads while trying to find small tidbits of information. Each of us have separate lists of our favorite resources and up until now, we haven’t had a convenient way to aggregate these.
Luckily, we are finally fed up enough to try to do something about this problem.
Together, we are going to spend the next month putting together an SEO Knowledge Center that will contain information on the best practices and important information for various SEO elements. After they are done, I am making it my responsibility to keep these pages up to date for the duration of my employment at SEOmoz. (Read: Job Security ;-p)
While my co-workers and I write these, we would like to offer up all of our drafts for peer review. Below you will find the first three SEO elements that we are tackling. We are big fans of the wisdom of the crowds and would love to hear all of your feedback.
Please note: These pages are not yet finalized! That is why we are submitting them for review Please feel free to leave us feedback, including your favorite resources and tools for these specific SEO elements, in the comments below or with me on Twitter.
Mini Update: Thank you to everyone who has offered suggestions so far I just wanted to clarify the editing process for these pages. The first version of the SEO Knowledge Center will only be updatable by people who work at SEOmoz. I don’t think that is sufficient long term, so I would love to hear ideas on how to add a better feedback system. My first thought was wiki style, but given the nature of these pages, I don’t think this is the best solution. What do all of you think?
CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.
In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.
Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!
src="http://imp.constantcontact.com/imp/cmp.jsp?impcc=IMP_DIMPBPRSMASHRSS&o=http://img.constantcontact.com/lp/images/standard/spacer.gif" alt="Spacer in 45 Powerful CSS/JavaScript-Techniques" border="0" width="1" height="1" />
CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.
In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.
Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to
href="http://rss1.smashingmagazine.com/feed/">subscribe to our RSS-feed and
href="http://twitter.com/smashingmag">follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!
We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.
By the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources —
href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1252__zoneid=0__cb=c3f655874b__oadest=http%3A%2F%2Ftwitter.com%2Fsmashingmag">follow us on Twitter.
Interesting CSS Techniques
href="http://www.zurb.com/article/304/behind-the-scenes-building-the-new-visual">Building the New Visual Annotations
/>These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a
href="http://www.smashingmagazine.com/author/dmitry-dragilev/">series of articles on Smashing Magazine as well.
href="http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/">Sexy Music Album Overlays
/>This aticle shows how to style your music streams and provides you some graphics to do so.
href="http://tutorialzine.com/2009/12/colorful-clock-jquery-css/">A Colorful Clock With CSS & jQuery
/>This tutorial describes how one can create a clock using basic CSS and JavaScript.
href="http://www.pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/">How To Create Depth And Nice 3D Ribbons Only Using CSS3
/>We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
href="http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/">Advanced Event Timeline With PHP, CSS & jQuery
/>This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
href="http://www.romancortes.com/blog/css-3d-meninas/">CSS 3D Meninas
/>“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.
href="http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/">Sproing! – Make An Elastic Thumbnail Menu
/>“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.
href="http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na">How to Create Simple and Effective Sub Navs with Definition Lists
/>“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”
href="http://designm.ag/tutorials/sticky-sidenav-layout/">Sticky SideNav Layout with CSS
/>Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.
href="http://css-tricks.com/unobtrusive-page-changer/">Unobtrusive Dropdown Page Changer
/>Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.
href="http://kntl.org/css-imageless-but-cool-javascript-and-jquery">CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
/>CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.
href="http://www.code-pal.com/how-to-code-an-overlapping-tabbed-main-menu/">How to Code an Overlapping Tabbed Main Menu
/>Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.
href="http://css-tricks.com/long-dropdowns-solution/">Solution For Very Long Dropdown Menus
/>“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”
href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/">Mega Drop Down Menu w/ CSS & jQuery
/>When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.
href="http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css">How to Create a Cool Anaglyphic Text Effect with CSS
/>Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.
href="http://csswizardry.com/2009/12/typographic-work-planner/">Typographic work planner
/>Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.
href="http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/">Thinning Text in Webkit (Safari)
/>Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.
href="http://jackosborne.co.uk/articles/pseudo-drop-caps/">Pseudo Drop Caps
/>They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.
href="http://perishablepress.com/press/2009/11/09/perfect-pre-tags/">How to Create Perfect Pre Tags
/>If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.
href="http://forabeautifulweb.com/blog/about/improve_your_web_typography_with_baseline_shift/">Improve your web typography with baseline shift
/>The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.
href="http://lamb.cc/typograph/">Typograph – Scale & Rhythm
/>This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.
href="http://tutorialzine.com/2009/11/fancy-quotes/">Fancy Quotes With jQuery, AJAX & CSS
/>Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.
href="http://www.cssnewbie.com/how-to-create-simple-stylish-and-swappable-image-captions/">How To Create Simple, Stylish and Swappable Image Captions
/>Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don’t communicate clearly that they belong to an image. Let’s see what we can do to address these problems.
href="http://www.devlounge.net/design/styling-photo-captions-with-css">Styling photo captions with CSS
/>Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS.
href="http://www.cs.tut.fi/~jkorpela/www/captions.html">Image captions on Web pages
/>This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.
href="http://www.sohtanaka.com/web-design/styling-post-headings-that-stick-out/">Styling Post Headings That Stick Out
/>“Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.”
href="http://www.electrictoolbox.com/ellipsis-html-css/">Using ellipsis with HTML and CSS
/>If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.
href="http://www.jcargoo.org/2009/11/5-message-boxes-to-style-your.html">5 Message Boxes to Style your Notifications with CSS
/>This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.
CSS Lists
href="http://www.cssnewbie.com/word-style-outline/">Create a Microsoft Word-Style Outline with CSS
/>As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!
href="http://mattbango.com/notebook/web-development/pure-css-timeline/">Pure CSS Timeline
/>“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”
href="http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/">Automatic numbering with CSS Counters
/>When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.
href="http://css-tricks.com/elastic-calendar-styling-with-pure-css/">Elastic Calendar Styling with CSS
/>A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.
/> You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.
href="http://css-tricks.com/style-a-list-with-one-pixel/">Style a List with One Pixel
/>A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.
href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Style Your Ordered List
/>By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.
href="http://blog.innovativethought.net/2007/06/11/simulating-a-table-using-an-unordered-list/">Simulating a Table Using an Unordered List
/>Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.
href="http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html">8 different ways to beautifully style your HTML lists with CSS
/>“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”
href="http://buildinternet.com/2009/09/quick-tip-simplify-list-margins-with-css/">Quick Tip – Simplify List Margins with CSS
/>Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.
href="http://perishablepress.com/press/2009/08/16/sexy-html-list-tricks/">Sexy HTML List Tricks
/>Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.
href="http://iloveusability.com/usability-tip/clickable-list-item/">Clickable <li>
/>I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.
href="http://www.p51labs.com/simply-buttons-v2/">Simply-Buttons v2
/>This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.
href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">How to make sexy buttons with CSS
/>This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.
href="http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/">Liquid & Color Adjustable CSS Buttons
/>When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.
href="http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/">Create a Button with Hover and Active States using CSS Sprites
/>Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.
href="http://stopdesign.com/archive/2009/02/04/recreating-the-button.html">Recreating the button
/>“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”
href="http://stackoverflow.com/questions/520640/how-can-i-use-googles-new-imageless-button-how-could-i-reverse-engineer-or-rol">Google’s Imageless Buttons
/>An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.
Stay tuned!
This is the first part of our large round-up of fresh CSS/JavaScript-techniques. Don’t forget to
href="http://rss1.smashingmagazine.com/feed/">subscribe to our RSS-feed and
href="http://twitter.com/smashingmag">follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!
On December 20, 2009, In SEO, by Search Engine Watch
Link building is one of the most important elements to obtaining high rankings in the major search engines. It involves ongoing effort and a long-term strategy to ensure a Web site continues enjoying success in organic search results. …
Link building is one of the most important elements to obtaining high rankings in the major search engines. It involves ongoing effort and a long-term strategy to ensure a Web site continues enjoying success in organic search results. …
If you are a small local business owner and you are still contemplating if you should launch a blog for your business stop procrastinating and just launch it. The search engine optimization benefits will help you website a great deal at the very least. You have absolutely zero to loose and much to gain from [...]
If you are a small local business owner and you are still contemplating if you should launch a blog for your business stop procrastinating and just launch it. The search engine optimization benefits will help you website a great deal at the very least. You have absolutely zero to loose and much to gain from launching a blog on your businesses website. A blog is not just for larger businesses anymore. They can be used for many different reasons. It is important to realize that a blog is a direct extension of your business and can act as the voice for your brand.
Take the first step and launch the blog directly on your website and get one post per week just to get things started. If you already have a list of targeted keywords for your business over time you can start to target blog posts around specific keywords and really start to generate some quality traffic. Small business owners need to realize that there are no rules to launching a blog. You can write about anything and everything you want. Some people use their blog to let their audience know what type of company they are. You can write about everything from what happens in the office all the way to specific resources that your audience can use each day. It is entirely up to you. Over time you will figure out how to structure your blog posts and what to write about to keep visitors on your website. The advantage of building your blog on your website is that you get the visitors landing on your website so you can add elements to create a sense of urgency to get website visitors to submit their information for a lead to make a purchase or come directly to your physical or online store. It all depends on your business goals.
Launching a business blog does not have to be difficult. You don’t have to get scared that something won’t work out how you planned. Half the battle is simply getting up and doing it. Once you have the blog it might be wise to schedule out your blog posts. If you plan on being conservative with your frequency you could very well come up with small handful of topics you could write about for that particular month. You don’t have to write everyday when you first start. You very well could if you want but just getting some new material in the blog on a monthly basis is a good start regardless.
On December 7, 2009, In SEO, by Search Engine Optimization, Google Optimization - RSS Feeds
In the last article on Google AdWords we talked about three core pay-per-click elements keywords ad text and landing pages. In this article we will delve deeply into landing pages since that s where conversions actually take place. This article is the third part of a four-part series….
IT Degree Online Online IT Programs. Flexible Scheduling. Financial Aid Now Available.
In the last article on Google AdWords we talked about three core pay-per-click elements keywords ad text and landing pages. In this article we will delve deeply into landing pages since that s where conversions actually take place. This article is the third part of a four-part series….
IT Degree Online Online IT Programs. Flexible Scheduling. Financial Aid Now Available.
On December 2, 2009, In SEO, by Search Engine Optimization, Google Optimization - RSS Feeds
In the last article we covered the basics of Google AdWords. In this one we ll touch on keyword research writing ads ad elements and landing pages. This is the second part of a four-part series….
In the last article we covered the basics of Google AdWords. In this one we ll touch on keyword research writing ads ad elements and landing pages. This is the second part of a four-part series….
One of the most important elements of web marketing is search engine optimization and a very important aspect of that is your listing in the search engines. It’s important to understand that Google does not use your meta data for ranking purposes. However, your meta data is important for Google in its display of your [...]
One of the most important elements of web marketing is search engine optimization and a very important aspect of that is your listing in the search engines. It’s important to understand that Google does not use your meta data for ranking purposes. However, your meta data is important for Google in its display of your site within the rankings. Two of the most important meta tags are the Title tag and Description tag. Your Title tag appears in Google SERPSs as a blue clickable link in large font size above your Description, what Google calls the snippet.
Google’s primary concern is delivering quality content to searchers. If you don’t provide good Titles and Descriptions for that purpose then Google will substitute your information for something it deems more useful to searchers. In your meta title tag you should provide the most important keyword for the page you are optimizing, but don’t stuff it with keywords that you want to rank for. That will work against your. Also, don’t make your Title too long or Google will rewrite it. You don’t want it to be more than 60 characters.
In your meta description tag you also want to use your most important keyword for the page and possibly a secondary keyword. Again, don’t stuff it with keywords you hope to get ranked for. Also, don’t make it too long. 160 characters or less is optimal for a meta description tag.
You need to also understand that your Google snippet will be different based on a searcher’s search query. That means Google will not always use your meta description. But if you provide quality content on your web page then no matter what search query a searcher uses the snippet will always come from your page. If your content is not helpful or less than reasonable quality then Google could replace it with its own description of your site. That’s a good reason to make sure every sentence of your web page is of the highest quality.
If you write your web page content and meta data with quality and your visitors in mind then you can maintain control over your Google SERP listings. Don’t be careless with your content.
Often times I get phone calls from potential clients that start off telling me how they are looking for search engine optimization services and begin to ask for certain requirements on the strategy side of things. There is nothing wrong with that except that some of the requests look more like a recipe for a [...]
Often times I get phone calls from potential clients that start off telling me how they are looking for search engine optimization services and begin to ask for certain requirements on the strategy side of things. There is nothing wrong with that except that some of the requests look more like a recipe for a science project than actually online marketing efforts to help grow a business.
Since when did building a business online go from a traditional marketing mind set to a formula? Yes the search engines run on a mathematical algorithm but approaching the process of building an online business through quantitative efforts is not exactly the best approach. What if you hire a search engine optimization expert and they make the strategy look like a giant science project with no actual marketing elements? Sure you might get some keyword rankings but if your website has not one conversion marketing aspect on it corrected all the rankings in the world will not get your site to convert well or even at all. Major announcements have come out recently regarding significant changes in the ways that search results pull information and I can bet that this type of science project approach to search engine optimization is going to go away very soon. Since the day the search engines where introduced to the public the engineers have been working hard to clean up search results and get rid of websites that take scientific approaches like this. Long term search engine optimization is about creating in bound marketing efforts with quality content. Having well campaigned viral marketing efforts sweep through an industry like a giant wave or have well written articles, so well written that every online magazine and blog just has to write about it. This is what search marketing is all about, not how many PR3 links you can get in one month.
The definition of SEO is partially the fault of the search engines. Certain changes are consistently being made making everyone shift their focuses in other directions. It fundamentally starts at the search engine so if they allow it what else can you really do but follow the path that has been paved. This is the reason why so many businesses are just worried about rankings which is a horrible way to approach your online business. If your search engine marketing strategy for your company looks like something out of a chemistry class I think it might be time to rethink your plan a little bit. Some of the best SEO approaches have a strong emphasis and marketing and branding. Those three elements combined can go much farther than just rankings.
Please feel free to leave us feedback, including your favorite resources and tools for these specific SEO elements, in the comments below or with me on Twitter.
