12 Useful Browser Bookmarklets For Domain Name and SEO Research
by Mark Fulton
A bookmarklet looks and works just like a normal browser bookmark, but contains simple JavaScript code to perform a unique task. Bookmarklets put some amazing tools and resources right at your fingertips and save you time.
In this article the bookmarklets may appear like regular hyperlinks, but you will need to drag and drop these links to your browser toolbar or save them as bookmarks for them to function.
Consider creating a folder to drag them to if you plan on using many.
Domain Name Bookmarklets
These bookmarklets, when clicked, will provide you quick access to important information about the current website you are browsing.
Bookmarklet: DomainTools (Drag & Drop link to your toolbar)
Description: Redirects to WHOIS lookup for the registrant of the domain you are currently browsing. This includes such information as name, address, email and phone.
Bookmarklet: Alexa Info (Drag & Drop link to your toolbar)
Description: Redirects to Alexa traffic rankings and data on current website. Provides a glimpse into the popularity of a website.
Bookmarklet: Compete Info (Drag & Drop link to your toolbar)
Description: Redirects to Compete report; another popular traffic rankings provider.
Bookmarklet: Archive.org History (Drag & Drop link to your toolbar)
Description: Directs you to the complete archived history of any domain dating as far back as 1996.
Bookmarklet: Estibot Appraisal (Drag & Drop link to your toolbar)
Description: Loads an automated appraisal report on current domain. Estibot reports consider the keywords within a domain name and analyze many factors to produce a valuation along with other interesting data.
Introduction to CSS
A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.
At this point you have some choices of how to use the CSS, either internally or externally.
Internal Stylesheet
First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below.
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.
External Stylesheet
Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
Or you can also use the @import method as shown below
<style type=”text/css”>@import url(Path To stylesheet.css)</style>
Either of these methods are achieved by placing one or the other in the head section as shown in example below.
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
CSS 3 is Coming
CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.
In this post we present useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
Visual Effects and Layout Techniques With CSS3
CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.
