After The Deadline For Comments by Otto

If you’re not using it, I highly recommend the After the Deadline plugin, which provides contextual spell checking and grammar checking to your blog posts. This plugin extends that functionality to comments (demo).

DukaPress by DukaPress.org

DukaPress is open source software that can be used to build online shops quickly and easily. DukaPress is built on top of WordPress, a world class content management system. DukaPress is built to be both simple and elegant yet powerful and scalable.

Page Template Thumbnails by C. Tullos

This plugin creates a thumbnail list of the available page templates. Clicking a thumbnail updates the Page Attributes -> Templates drop down to the corresponding page template.

Basic Authentication by Klaas Cuvelier

With this plugin, you can ask users to authenticate before they can see your WordPress site. You can either use the WordPress logins to authenticate, or a given password. This plugin can be useful when your website is still under construction or in beta.

Top Contributors by Robin Dalton

Give your loyal visitors and contributors some recognition by adding a list of your top commenters to your blog.

Auto Twitter by Unreal Media

Auto Twitter is a wordpress plugin that automatically tweets each new blog post to the twitter account you specify. There really isn’t anything more to it than that.

WP-IssueTracker by Mahmoud Sakr

WP-IssueTracker is a full (yet basic) issue tracking system powered by WordPress. Currently WP-IT can operate one tracker per blog, however the back-end was designed to allow as many trackers as you might want. This will be targeted in a later release.

WordPress 3 Invoices by Elliot Condon

This plugin lets you generate great looking invoices directly from your WordPress admin panel. Great for freelancers and web designers, definitely worth checking out!

WP ImageHost by Hauke Leweling

The WordPress Plugin WP ImageHost is a simple and easy to configurable plugin to host your images inside your blogposts on a separate subdomain to reduce the number of requests.

Registration-Login by Md. Jamal Hossain Khan

Add a JavaScript loaded widget to your WordPress theme so user can login, registers without leaving the current page.

Remove WordPress to WordPress by Tom Lany

WordPress introduced a new filter called capital_P_dangit that changes all instances of WordPress to WordPress, stirring controversy in the WP community. This plugin removes that filter.

Tabs in Post Editor by Aaron Harun

This simple plugin allows you to use the tab-key inside the post editor to indent code or paragraphs.

Index Press by GrandSlambert

Provides a standard index of content in your site using a short code. Sorts results into alphabetical listings.

WP Chat by Abhinav Singh

WP Chat plugin embeds Jaxl IM (Instant Messenger for the web) for wordpress blogs. Jaxl IM is a hosted solution provided by Jaxl Inc. and requires no additional plugins from your site servers.

BM Shots by BinaryMoon

So this one isn’t that new but very worthy of being in the list. BM Shots is a plugin that makes use of WordPress.com mShots API for automatically creating screenshots of any website.

Conclusion

I try to visit the new plugins section at least once a week to get an idea of what people are working on, the kinds of problems people are trying to solve and to see if there’s anything I can use on my own sites. I’m always amazed at the sheer amount of creativity that people have when it comes to plugins, it’s often very entertaining to browse through.

Have you started using a new plugin that you’ve fallen in love with? Share it in the comments!

And as always, be sure to subscribe to the RSS feed and follow @ThinkDevGrow on Twitter!

• Sharebar WordPress Plugin
• How to Migrate Your WordPress Blog Between Hosting Providers
• Simple Threaded Comments with jCollapsible (new jQuery Plugin)

So one thing is clear: you want/need your own website. But how do you go about making one? Where do you even start? Whether it’s for your business, personal blog or any obscure reason, understanding how the web works and establishing an online presence is crucial in today’s high-tech world.

Understanding the Web and How Websites Work

According to Wikipedia, a website can be defined as a “collection of related web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL).” Simply put, it’s a collection of internet-accessible files stored somewhere and identified by an URL/address. Let’s take a look at some more definitions first:

• HTML – HyperText Markup Language, the name of the syntax/code used to create web page files (usually ending in .html)
• Host – A host makes your files accessible on the web by storing your files on a server/computer and providing a persistent internet connection
• Web Server – The actual machine or piece of hardware where your files are stored (usually by your host)
• IP Address – The numerical address of your Web Server; All computers connected to the internet have an IP address, even yours
• Domain Name – The actual address of the website, ie www.mydomain.com
• Registrar – The company that has permission from ICANN to sell domain names, like GoDaddy
• DNS – Domain Name Servers, used to connect a domain name to a host/server

Now that we have a basic understand of the terms involved, let’s take a look at how they are connected. A website is a collection of HTML files and digital assets (images, scripts, videos, etc.) stored on a web server (provided by a host) that makes it accessible by anyone via a persistent internet connection. How do you find that website? Using a domain name, which is the online address of your website. The domain name is purchased from a domain registrar and before it can be used, it must point to the correct domain name servers that correctly directs traffic to your web server’s IP address. It may sound a bit convoluted at first but thinking about it in simpler terms might help to better grasp the concept:

In the above diagram, the green arrow represents the request you make when you enter a URL into your browser and the blue arrow represents the response sent back. What’s important to note is that many hosts offer all of these services, so from one server you can get hosting (web server access) for your files and complete domain name setup.

Further Reading:

1. Wikipedia Article on Websites
2. HowStuffWorks: How Web Pages Work
3. How Websites Work by Quackit

Creating Your First Website

Now that you have an understanding of how websites work, it’s time to create your first web page. The below steps will take you through the entire process, from picking a domain name to uploading your files.

1. Picking the Right Host

This can be a bit complicated depending on your needs but for nearly all starters, a simple shared hosting plan is enough to host a basic website. I suggest Media Temple’s Grid Service to most of my clients and Host Gator to those feeling a little cheaper. Both providers have been around for a long time and are fairly consistent in their services.

2. Getting a Domain Name

There are many providers that offer domain names for a variety of prices. In reality, they are all resellers for ICANN and whoever sells the most can usually offer the cheapest prices. Personally I use GoDaddy because they are one of the cheapest (use CHRIS3 coupon during checkout for $7.95 domains) but their website feels a bit spammy. Throughout the entire purchasing process, they’ll suggest purchasing a million of their other services (including hosting) but I would personally advise against those.

3. Configuring Your DNS

When you register for your domain name, you’re given the option to edit it’s DNS information. If you skip this, you can find it (at least in GoDaddy) under Manage Domains by checking the relevant domain name and selecting Set Nameservers from the top menu. Enter the addresses of the DNS servers your host provided when you signed up with them to let GoDaddy know where to send visitors when they enter your URL.

4. Creating a Basic Web Page

As I mentioned earlier, HTML provides the backbone for web pages. In fact, you can right-click on any website and click View Source to see the HTML code that is powering the site. While it may look daunting at first, HTML is not really that complex and can be learned within a few days with some patience. On your desktop, create a blank file and call it index.html, then enter the following HTML into it:

The above code will produce this, a simple white page with the words ‘Hello Word’ written on it. HTML is all about tags that must be opened and closed. Every page should have a head section with a proper title, this is the text that is visible in the title bar of your browser. The body section is where any content you want shown on the website itself should go – in this example we have a simple paragraph (<p>) with that contains the ‘Hello World’ statement. Also note that each tag must be closed properly and in the correct order.

5. Upload and Sit Back

Now that you have your first web page ready, you need to get it online by uploading the file to your web server. This is done using an FTP, or File Transfer Protocol, program like FileZilla (OS-independent) or WinSCP (Windows only). When you signed up for your host, you should have received an e-mail that contains an FTP address, usually ftp.mydomain.com, and some login credentials. Start the FTP program, enter your credentials and transfer the index.html file from your computer to the public_html folder (or sometimes www) on your web server.

Congratulations! Your Website is Now Online

If you have properly configured your host, purchased a domain name and set your DNS information, entering your URL into a browser should load up your Hello World page.

Make it Better With Open Source Software

The example above is too simple for any practical use and chances are, you want something that looks nice and has more functionality. While I would definitely recommend learning as much about building websites as you can first, there are a few ways to get a nice website up very quickly and with limited knowledge. Open source software makes this possible, there are literally hundreds of blogging platforms and content management systems that you can install to have a very complete website running in minutes.

Most of these scripts require the minimum of PHP and MySQL, both of are included in 99% of shared hosting services. Create a database, upload the script and point your browser to the install file, the rest is taken care of automatically. The best part is that open source software is completely free to use, so definitely check it out.

A Few Open Source Options:

1. WordPress Blogging Software
2. phpBB Forum Software
3. FrogCMS Content Management System

Conclusion

This article is meant to be a very basic introduction into the very big world of web development. It’s meant for my friends who have always expressed interest in creating a website but don’t have the time to invest in learning to make one. Feedback is appreciated and comments are always welcome!

Also remember to subscribe to the RSS Feed and follow @ThinkDevGrow on Twitter!

• Best Bet CSS Practices
• Quick and Simple PHP Honey Pot Spam Prevention
• Simple Threaded Comments with jCollapsible (new jQuery Plugin)

Rules for Setting Realistic Deadlines

Many web designers and developers tend to make a key mistake when setting deadlines: they underestimate the amount of time or work involved. The trick is to keep things as realistic as possible, and to consider all factors that may slow your workflow down, including:

• Lack of interest in the project
• Unexpected client demands (or the dreaded infinite revision syndrome [IDS])
• Personal or side projects that take up too much time
• Prior engagements, family issues or illness

As a rule of thumb I usually multiply the amount of time I think it will take me to complete a project by 1.5 – this provides some cushion for whatever inevitable hurdles you’re bound to face. For example, if you think a project will take 2 weeks to complete, give your client an estimate of 3 weeks instead (2 x 1.5). Or if it will probably take 1 month, give yourself 1.5 months to complete. As long as your client is okay with it, you have nothing to lose by setting an extended deadline – it is in no way cheating the client of their time. If you finish in the original time frame, the client walks away happy as they’ve received their work early.

The 1.5 rule is probably a bit too much for long term projects (anything over 6 months), however the point to take home is that you should always give yourself some cushioning time.

Maintaining Your Schedule

If you’re a full-time freelancer working from home, maintaining your schedule and meeting deadlines can be a very difficult task. There are endless distractions when working at home, everything from family to the freedom of being able to work as you please can become an issue. Here are some techniques to deal with keeping to your schedule in these circumstances:

1. Separate Work and Play

Keep your work and leisure activities separate – and yes, that means no TV while doing client work. If at all possible, try to isolate yourself from distractions during work hours. Whether it’s in your room, the office or even the basement, find a place where you won’t be disturbed and you can devote all of your attention to the task at hand. Avoid working for long stretches at a time and take breaks often, it can help to keep your mind fresh and reduce the chances of burning out. There are also a lot of tools to help you focus and increase productivity that are worth checking out.

2. Set Tasks and Milestones

While you may only have one official deadline for your client, set multiple milestones (mini-deadlines) along the way to make sure you are keeping pace with your schedule. Milestones can be small tasks and in my opinion, the more frequently you set them the better, as they quantify your work in a very visual way. Usually I set 2-3 milestones a week, each with multiple tasks that are required to complete that specific milestone. I also have a To-do list that I try to keep updated on a daily basis that helps me reach these milestones.

3. Communicate with Your Client on a Regular Basis

Keep in constant contact with your client. Update them about completed tasks and milestones, touch base with them about the overall progress or just e-mail them to learn more about the project you’re working on. All of this will help you maintain your schedule and, more importantly, keep your interest/focus on the project itself. One drawback of freelancing on the web is that we tend to dehumanize the people we work with – opening a clear channel of communication can help rid of this feeling and make you feel personally responsible for the success (or failure) of their project.

4. Use Project Management Apps and Other Productivity Tools

There are a ton of great online tools you can use to help manage your freelance business. Take a look at the list of 20 web apps that I recommend for freelancing – in it you’ll find apps to help you manage your project, handle invoicing and deal with customer care. The more organized your workflow is, the more efficient you become and as a result, the more likely you are to keep your deadlines.

5. Learn to Say “No”

You know your own skills and capabilities – do not take on more than you can handle at once. Too many projects at once means sub-par work and missed deadlines, two things that can make a project even longer and more painstakingly difficult (revision after revision, etc.). Keep things simple and learn to say “no” to clients when you have enough work to keep you busy without overwhelming yourself.

How to Handle a Missed Deadline

When you’re in the business of freelancing, you’re bound to miss a deadline or two (hopefully not more). In most cases this usually isn’t too big of a deal, however you should always take the following steps in case you do miss a deadline:

1. Immediately Notify the Client

Give them an honest excuse/reason as to why you’re late and how you’re going to solve this problem. Provide them with a new deadline, what you plan to do in this new time frame and why you won’t miss it. This may sound like too much but dealing with the situation professionally can turn a bad situation into a good one. An apology now may help get you a client referral later, so always try to maintain courtesy and provide the best customer service you possibly can.

2. Identify the Problem

Figure out what you did wrong and how you’re going resolve it. Did you miss the deadline because of personal issues? Was the client too demanding or did they change their requirements half-way through? Find out what went wrong and create a plan of action on how to fix it.

3. Prevent Future Mishaps

Learn from your mistakes and try to prevent them from happening in the future. This is a bit more common sense than anything else, however many people find themselves making the same mistakes and missing deadline after deadline. If you find yourself in that loop, make a conscious effort to identify and fix the problems, then learn how to avoid them in the future.

Conclusion

Meeting deadlines shouldn’t be a burden, rather it should be a consequence of good work ethics and proper project management. Give yourself enough time, don’t take on more than you can handle and organize yourself – these are the keys to making deadlines and ultimately keeping clients happy.

Parting Questions:

• Have you missed a deadline recently?
• Did you do anything to correct the situation?
• What could/should you have done differently?

Post your suggestions and feedback in the comments. And as always, please consider subscribing to the RSS feed and following us on Twitter.

• Mastering CSS Floats

Step 1 Prepare the Canvas

Create a new Photoshop document about 600px wide and 300px high, that should give us plenty of space to work in. Fill the background with a light grey color (I used #eeeeee) and apply the Noise filter (Filter -> Noise -> Add Noise) with the following settings:

Step 2 Create the Base Shape

Create a white rounded rectangle (hot key: U) with a radius of 3px and with Anti-alias turned on. I made mine 150px by 40px but any size will do. Make sure the button itself is white (#FFFFFF) as that will help when it comes to applying effects in the next step.

Step 3 Apply Layer Effects

This step is really where the button gets it’s 3D feel from. We’ll be applying a number of layer effects:

To summarize, we are applying:

1. Drop Shadow – #000000, Normal blend mode, 15% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
2. Inner Shadow – #FFFFFF, Multiply blend mode, 30% Opacity, Angle: 120, Distance: 2, Spread: 0, Size: 2
3. Inner Glow – #000000, Normal blend mode, 40% Opacity, Choke: 100%, Size: 1
4. Bevel and Emboss – Style: Inner Bevel, Direction: Up, SIze: 2, Soften: 2, Angle: 120, Altitude: 30, Anti-aliased, Highlight Mode: Hard Mix, Highlight Color: #FFFFFF, Highlight Opacity: 50%, Shadow Mode: Multiply, Shadow Color: #000000, Shadow Opacity: 35%
5. Color Overlay – Mode: Linear Burn, Color: #b6f27a (you could use another light color instead)
6. Gradient Overlay – Blend mode: Luminosity, Opacity: 25%, Gradient: Black to white (left to right)

The above settings should produce a 3D-looking button effect. Applying both gradient and color overlays allows us to easily change the color of the button – simply change the color overlay until you’re satisfied with the color of the button.

Step 4 Add Text

Depending on whether or not you chose a light or dark color overlay, your text will have to be either black or white. For light backgrounds use black and for dark backgrounds, use black text color. I used the Gotham Bold font with uppercase letters. I cranked the layer fill opacity down to 75% and applied the Bevel and Emboss style with the following settings:

Step 5 Create Hover and Active States

To create the hover state, I simply change the Color Overlay value to something a little lighter and punchier – in this case #ccff84. As for the active state, I change a few settings on both the text and the button itself.

Active Button:

The button itself has the gradient and bevel reversed, a different color overlay and a inner shadow among other things. The exact values are:

1. Drop Shadow – #FFFFFF, 50% Opacity, Distance: 2, Size: 2
2. Inner Shadow – #000000, 30% Opacity, Angle: -60, Distance: 2, Size: 2
3. Inner Glow – Same as default and hover states
4. Bevel and Emboss – Change Direction from Up to Down, Change Highlight Opacity to 25%
5. Color Overlay – I set mine to #7ab91f
6. Gradient Overlay – Reverse gradient and set to 45% Opacity

Here are the same settings in Photoshop:

Active Text:

For the text, I changed the color to white (#FFFFFF) and lowered it’s fill opacity to 85%. I also moved the actual text down by a pixel, which gives it the feeling of being pressed. Lastly, I applied a Bevel and Emboss layer effect with the following settings:

Final Results

As you can see, I also made some darker colored buttons. For the text on those, I used the same settings as the Active state of the lighter buttons, with the only difference being the Fill Opacity was turned up to 90% instead of 85%.

Download

The complete PSD is available under the Creative Commons License, feel free to download and share as you please:

Conclusion

This is my first real Photoshop tutorial. Were the screenshots helpful? Did I cover everything needed to reproduce the desired effect? As always, feedback is highly appreciated.

Also, subscribe to the RSS feed and follow us on Twitter if you’re not already, there’s going to be a giveaway soon you don’t want to miss!

• Super Simple CSS Buttons
• iPhone Style Radio and Checkbox Switches using jQuery and CSS
• Slick Animated Menus Using Only CSS3

The Header

The overall layout of the header is perfect – I have only a few minor color and typographical tweaks that I think would enhance the user experience.

Current:

My Version:

Differences

Most of my changes for the site take place here – I reduced the overall height of the header by about 10 pixels, removed some of the padding around the top navigation bar and grouped all the top links together. The font size of the current date and last updated timestamp were increased, and I also changed the color of the main navigation bar – lighter background helps add a bit of contrast and slightly improves readability when it comes to fonts that small. I also added a slight border radius to most of the square shapes (3px), just to make it feel a little smoother.

The Main Homepage

Like the header, most of the content is placed pretty well – my only gripe was with each featured element stacked on top of one another.

Current:

My Version:

Differences

I didn’t do much here, really, just added bullet icons to make the lists more noticeable and placed the ‘Also in the news’ and ‘Sports’ sections next to each other. This last move allowed an additional story and link to both sections without changing the overall height of the page.

Article Page

Like the main homepage, the article page feels like it could use a little tweaking in terms of content placement. The first thing I noticed about the layout was the huge gutter to the right of the content – while I’m not sure why they chose to have it, I left it as is in my redesign.

Current:

My Version:

Differences

The only real changes are in the footer of the article – instead of having a ton of stacked elements, I widened the entire section and made two columns instead. It just feels like a waste of space otherwise and forces the reader to scroll heavily to find related information. The column setup also puts more focus on the Google ads, possibly increasing conversions/click-throughs (would take some A/B testing to confirm).

Conclusion

This was just a bit of a design exercise for me, taking a popular homepage and trying to come up with changes that could help improve usability and overall user experience. My suggestions are far from perfect and I’m sure the BBC staff has excellent reasons for each of their design choices, so take my suggestions lightly.

Please post feedback on my version and the actual site – are my changes completely unnecessary? Do you have any suggestions of your own? If you’re in the mood, try making a mockup of your own and post it in the forum!

No related posts.

A honey pot trap involves creating a form with an extra field that is hidden to human visitors but readable by robots. The robot fills out the invisible field and submits the form, leaving you to simply ignore their spammy submission or blacklist their IP. It’s a very simple concept that can be implemented in a few minutes and it just works – add them to your contact and submission forms to help reduce spam. I’ve used them extensively in my last few projects, I’ve found it to be well worth the small time investment.

Contact Form Example

Here is an example of a simple contact form that uses the honey pot spam prevention method:

The HTML:

The PHP:

The CSS:

In the above example link, I added some optional CSS to make it look a little nicer. Also, you’ll notice the actual e-mail form doesn’t work, as the to e-mail address is a fake one. The contact form part is just to illustrate the honey pot, the important thing to notice is that the last text field is hidden using CSS (the entire paragraph) and that if text is entered in the field, the entire form fails.

Conclusion

This concept is certainly not my own and in fact, there is even an entire project dedicated to catching spammers using dummy forms and blacklisting their IP addresses (rightfully called Project Honey Pot). Again thanks to Aaron for reminding me about this technique, I’ve been meaning to do a write up on it for a while now. This post is also thanks to Forrst, I’m quite pleasantly surprised at the amount of interesting information I’m finding there.

• Simple Threaded Comments with jCollapsible (new jQuery Plugin)
• Best Bet CSS Practices
• The Complete Guide to Creating Your First Website

Design Changes

There are several new design changes to the site, most of them carried out to improve usability and make your overall experience more pleasant. One of the first things you’ll notice is the new header – I tried to keep it as simple as possible while still providing the necessary navigational links. I’ve also moved the RSS and social links to the header, so hopefully that will entice you to subscribe to the feed and follow me on Twitter if you’re not doing so already. In the previous design, the About, Advertise, Archives and Contact links were at the very bottom of the page and thus received almost zero traffic – I’ve now moved that to the very top of the page, along with a register and login link for the really cool people who actually join the site (it’s free and only takes a second).

I’ve also changed the way the main content is displayed in an attempt to improve readability and keep the primary focus on content. Font sizes are bigger, line-heights are higher and just for you, my dear readers, I went through all of the posts to change the syntax highlighter code to support CodeColorer, my new syntax highlighter of choice. I went with the dark/vibrant color scheme – let me know if that works well for you guys or if you prefer something lighter (GeSHi?). I also finally got around to adding an author info box at the end of the post, something that’s been long overdue.

Lastly, you’ll notice a brand-spankin’ new footer, complete with a Facebook fan box, RSS e-mail subscription form and a mini-sitemap. There is also a huge button that says, ‘Write for us’ in big bold letters – please, please consider contributing to DevGrow if you have the time for it.

Introducing DevGrow Discussions

As I mentioned in my first blog post here, DevGrow initially started out as a community for entrepreneurs and investors, a place where they could discuss topics and connect with each other. After two years, I still have an itch to build a community for entrepreneurial developers, web designers and bloggers. DevGrow Discussions is meant to be just that – a place where knowledge and experiences can be shared with the community.

I’ve limited the forums themselves to cover broad topics: Web Design, Programming, Marketing and General Discussions. The main site and the forum (running bbPress) are fully integrated, so you only have to register once on the site to comment on articles or post in the forums. Check them out and let me know what you guys think!

Inspiration Gallery

The last new feature is a website showcase gallery, where you’ll find incredibly designed websites and apps. I have plans to expand on this section so it’s a bit minimal right now, however you can still comment and rate each gallery entry (thumbs up icon next to the title). Feel free to submit your own site to the gallery if you’d like.

Articles: The Past, Present and Future

I have been pleasantly surprised at the reception of my WordPress and JQuery plugins – it is humbling to see many others benefit directly from your work. I’m working on fixing all issues and bugs on all of them as they are reported, but please keep in mind that I am just one person, so it may take a few days (or weeks) to patch and update.

Redesigning this site has required a lot of work and effort, specifically in creating custom hacks/plugins for WordPress and bbPress to get the results I wanted. That said, I want to make life easier for anyone else attempting to make something similar so I’ll be writing a series of posts on how I put this site together, covering:

• A Smarter WordPress-bbPress Integration
• Caching individual parts of your blog (reduce load, reuse outside of blog)
• WordPress Custom Post Types the right way

Participation and Feedback

DevGrow is a community resource. It depends on active user participation and contribution to work – this is the fuel to my fire and the reason I am able to keep writing. There are several ways to participate, including:

• Submitting an Article
• Posting in the forums
• Submitting in the Inspiration Gallery
• Commenting, Subscribing to the RSS feed and Following ThinkDevGrow on Twitter

As always, I would love to hear you feedback and thoughts on the redesign, new features or DevGrow in general. Do your best (or worst) and thanks for you support!

• From Zero to Blogger in 3 Months: A Look Back
• The Rebirth
• All Plugins Moved to Github

Creating a Sitemap

A sitemap is simply a listing of all the important pages of your website. It’s a directory that can be easily and quickly understood by both search engines and visitors who may be lost. Your sitemap can be a simple page on your website that lists all of the inner pages, but ideally you should use an XML sitemap, as it is preferred by most search engines. The structure of your XML sitemap is simple:

The above example indexes two pages from my site, a blog post and the main article homepage. Obviously this method can be time consuming if you have a lot of pages, and this is the perfect reason to use services like MakeASitemap.com or the XML Sitemap Generator to automatically index your site. If you’re running WordPress, I highly recommend the Google XML Sitemaps plugin, which automates sitemap creation for you blog. If you’ve manually created the file, save it in the root of your site.

Submitting Your Sitemap

After you’ve created your sitemap, submitting it to search engines is a great way to help them identify which pages on your site are worth crawling, how frequently they should be crawled and their overall search priority. A good sitemap can help bring traffic to your site by essentially providing search engines with a guideline to correctly index and rank your pages.

Places to submit your XML sitemap:

• Google Webmaster Tools
• Yahoo! Site Explorer
• Bing Webmaster Tools

You will have to login and verify you own the site in order to submit a sitemap, however it’s well worth the time.

Conclusion

If you haven’t submitted your sitemap, do so to help search engines better index and rank your pages. If you’re using WordPress, be sure to check out that Google XML Sitemaps plugin, it can make life a heck of a lot easier.

If you have any other SEO tips, please leave them in the comments. And as always, subscribe to the RSS feed if you haven’t already and follow us on Twitter!

• Quick SEO Tip: Set Preferred Domain in Google Webmaster Tools

Principles of Scalable Web Design

Often times people refer to scalability as how well a website can handle huge surges of traffic, akin to the Slashdot/Digg/Reddit-effect or being featured on TechCrunch. While being able to serve the website without overwhelming the server is a feat in itself, a truly scalable website should be one that maximizes usability and user conversions.

Planning ahead is really the key to scalability – try to understand what difficulties a user may face and how you can minimize them. There will also surely be unforeseeable challenges as you experience rapid growth, but a little preparation can go a long way. A few best practices for creating a scalable design include:

1. Modularity

As your userbase increases, so too will demands of new features and functionality. You can prepare for this by coding your website modularly – this means using little to no inline CSS or Javascript (link to files instead) and breaking apart the website itself into different files (header, footer, sidebar, etc.) and calling them from your pages. The goal of creating a modular design is to be able to quickly and efficiently update the design if needed, and it’s much easier to edit one file rather than dozens.

2. Maximum Coverage

Just like poor cell phone coverage, a user is likely to leave your site immediately (and increase bounce rates) if they find it difficult to view or incompatible with their limited technology. I’ve mentioned this in previous articles but browser/OS/resolution compatability are vital to successful growth of a website. While you can argue that old technology is just that – old and obsolete, there are still many corporate companies that use IE6 as their primary browsers. Small or big, all websites should be accessible to their visitors. This is not to say you should design for every browser and resolution to have ever existed, try to understand the market you’re targeting and build accordingly to that.

3. Convincing Call to Action

With any surge of traffic comes an opportunity to convert temporary visitors into users – try to get your visitors to participate by commenting, register or at least subscribing to an RSS feed. Make sure your design has some kind of call to action, be it a button asking to sign up for a free trial or a simple RSS e-mail subscription form. Most people have relatively short attention spans and much more so online, don’t make your visitors look for what to do, put it in plain site with a large typeface to help convert them to repeat users (split testing can work wonders here).

4. Reason to Come Back

Give your users a convincing reason to keep coming back to your website. The key here is really the constant addition of content, be it from you or your visitors. If you don’t have one, consider adding a blog to keep your users in the loop, or provide some means for your users to contribute content themselves, which increases participation and reduces workload for you. Having a pleasant user experience (via an intelligent UI design) can also help to increase user retention, so make your design as painless as possible for your users.

5. Leverage Social Networks

I’ve previously outlined several methods to market websites for free and I’ll repeat one of my suggestions here again: take advantage of the proliferation or social networking sites. Try adding social sharing buttons to strategic locations in your layout (or use something like Sharebar) so users are able to spread your content in a viral nature.

Conclusion

It doesn’t have to be difficult or painful to create a scalable website, and the bulk of the work really involves having a strategic plan of action before even building it. As a web designers, there are several things you can do to make sure your website handles rapid growth with grace and is able to convert new visitors into lasting contributors. Do you have any other tips for creating a scalable design? If so, leave them in the comments.

And as always, please consider subscribing to the RSS feed and following us on Twitter if you haven’t already.

• Web Designers: Not Everyone Uses A Mac

The following is a compilation of the top 5 free, web-based screencasting apps available right now:

1. Screencast-O-Matic

Screencast-O-Matic offers a free and paid service, with the free service allowing you to record watermarked videos of 15 mins in length (or 10 mins if exporting to YouTube). The paid service has a one-time $5 fee, bumps record time to 1 hour and removes the pesky watermark (not a bad deal!).

2. Screentoaster

Screentoaster is another 1-click recording service that is completely free and provides the user registration so you can access/manage your screencasts from any computer. I found their new capture tool fantastic – it worked fast and effectively, plus the preset size options were very convenient.

3. ScreenCastle

This one is dead-simple – on the homepage you’re greeted with a giant red button that, when clicked, loads the Java applet to record any portion of your screen. Once you’re done recording, the video is uploaded to their servers and you’re given an array of links, including one to view the video and another to the FLV file (in case you need to download it). There are no user accounts or paid plans, this app follows the KISS principle to the T.

4. ScreenJelly

ScreenJelly is another 1-click service that also gives you the option to create an account and manage all of your recordings. Once you’ve recorded a video, you can easily share it on Twitter or Facebook for maximum exposure. This service is pretty useful for quick recordings, however there is a 3-minute time limit.

5. Screenr

This one is probably my favorite of the bunch, not because of it’s feature set or recording, but rather the complete experience it provides. Screenr makes it easy and more importantly worthwhile to share your screencasts using Twitter, leveraging your own network of friends for maximum exposure.

The recording tool is great, the commenting system (via Twitter) is awesome and overall the site feels trendy and complete. The public stream is also fun to browse and actually has screencasts you may just find interesting. My only gripe with this otherwise excellent service is their 5-min limit.

Conclusion

If you need to record a screencast, try out one of the above services – they’re often just as good (in terms of quality) as a downloadable application and remove one step from the video tutorial process: uploading. Most allow you to manage your videos from a central location and at least a couple have great sharing features to get your videos some immediate exposure.

If you found this article useful, please consider subscribing to the DevGrow RSS feed or follow us on Twitter!

• 20 Web-based Tools to Help Run Your Freelancing Business
• Tools to Help You Focus and Increase Productivity