14 Essential Web Design/Development Tools

The Must-Have Resources

  1. HTML Ipsum. Serves as an advanced website for latin filler text. Provides entire pages of text, various sized paragraphs, sentences, unordered/ordered lists and even navigation.The Webutante - HTMLipsum - A Graphic Design Web Design & Web Development Resource Blog
  2. Adobe Kuler. A vast collection of color schemes with search and rating capabilities. The Webutante - Adobe Kuler - A Graphic Design Web Design & Web Development Resource Blog
  3. BG Patterns. A comprehensive and handy background creator that allows you to modify sizes, colors, patterns and more.
  4. MultiBox. In my opinion, one of the most functional variations of the lightbox. Can display multiple file types and has great transitions and customizability. Freebie from PhatFusion.
  5. Flash Gallery. Probably the simplest gallery feature I have discovered thus far. Allows you to create a slideshow on your website easy and fast from a specified folder or from Flickr photostream. Best Part? It's Free.
  6. PicMarkr. Free tool that allows you to add custom watermark (image or text) to your online images. The Webutante - Pic Markr Image - A Graphic Design Web Design & Web Development Resource Blog
  7. CSS Curved corners. CSS manipulated to provide bullet proof rounded corners, a great way to speed up loading on a website.
  8. Web Developer Firefox Add-On. The most vast system for web developers I have seen thus far. Allows numerous capabilities, including manipulating CSS and CSS Viewing, disabling specific site features and TONS more. The Webutante - Web Developer Toolbar image - A Graphic Design Web Design & Web Development Resource Blog
  9. WuFoo. Free (for the limited version) Form builder application with numerous options for displays and themes, and even the capability to edit the CSS.
  10. Upload Thingy. A file-upload feature that allows for large files to be uploaded on your website. Reasonable pricing, and fairly easy to do. The Webutante - Upload Thingy Image - A Graphic Design Web Design & Web Development Resource Blog
  11. Cushy CMS. An incredibly useful and surprisingly easy CMS system. One of the few free CMS providers.
  12. Browser Testing - IE Net Renderer. A convenient method for testing websites in the Internet Explorer browser, encompassing IE5.5 all the way through IE8. There is no charge for the service and your screenshot shows up fairly rapidly.The Webutante - IE Net Renderer Image - A Graphic Design Web Design & Web Development Resource Blog
  13. Google Analytics. Provides an incredible amount of tools for evaluating your traffic, common visiters, locations, etc. All aspects of SEO are covered.
  14. W3C Validator. Checks your website for alignment with HTML and/or CSS Standards. While it is not always a necessity to maintain 100% compliance, it tends to be important to know the issues that are causing non-compliance which can sometimes be detrimental.The Webutante - W3C Validator Image - A Graphic Design Web Design & Web Development Resource Blog

For more web tools be sure to check out these previous posts:

Labels: , , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

IE6 Update

Down with IE6 Follow-Up

As the trend against IE6 picks up, another website has joined the group: IE6 Update offers an awesome, almost deceptive (but still within ethical grounds) updating toolbar for IE6 users. Be sure to check it out.

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 1 Comments


New Design/Development Links

Latest Updates

I have been a blogging slacker lately, this I know. In an effort to make up for my undesirable behavior, I am posting a new collection of awesome Design and Development links for my readers. Apology Accepted?

Design Links

Development Links

More useful links covering SEO after the jump!

SEO Links
  • Seth's blog points out some important SEO facts and information on How to make money with SEO.
  • SEO Moz has outlined Google Search Engine Ranking Factors using a great hierarchy and a few useful charts and graphs.
  • For an awesome analysis of your website, check out Website Grader. This is an all-around informative SEO tool for analyzing your web pages from the bottom up and outlining ways to improve SEO on each page.
  • SEO Book gives us The Blogger's Guide to SEO, an outline of the essential SEO elements for bloggers.
  • The Web Designer Wall has gathered an all-important SEO Guide for designers. Outlined n this article are some fairly simple and still useful SEO tools and tricks to implement on your websites.

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Exploring the Features of Google Analytics

Analytics Analysis

Everyone who knows anything about the web knows about Google Analytics. However, not everyone knows how far the Analytics capabilities extend. For anyone not familiar with Google Analytics, here is the summary taken from the Analytics website that sums it up pretty well:

"Learn more about where your visitors come from and how they interact with your site. You'll get the information you need to write better ads, strengthen your marketing initiatives, and create higher-converting websites. Learn more about the benefits. Google Analytics is free to everyone, whether you are an advertiser, publisher, or site owner."

Today I have outlined some of the features Google Analytics provides including my personal favorite tools. To provide more extensive explanations, I have referenced one of my own Analytics accounts, my wedding website, www.brentandkaylee.com.

  • Referring Site Visits. Referring websites are important to note for pretty much anyone, but especially for a company that advertises on an outside website, utilizes networking sites to gain traffic, or even those that utilize SEO or SEM. Google Analytics Visitor Analysis
  • Search Engine Visits. Analytics also provides Search Engine information which can be an incredibly useful tool to figure out which keywords to capitalize on, which seem to maintain interested viewers, etc. This is one of the most important Analytics features for anyone doing Search Engine Marketing Campaigns. Of course for my wedding website, this was not all that big of a feature as everyone was given the exact URL via the wedding invitation RSVP card.
  • Filter Yourself. Filtering your IP address out is a must do for any company or freelancer. To do so, find your IP address and set up a filter by clicking on the 'Add Filter' button in the Analytics Dashboard, so Google does not include traffic from your company or personal network. This allows you to analyze your statistics without worrying about your own impact on those statistics.
Visitor Trending
  • Unique Visitors. The 'New vs. Returning' visitor information is important as it allows you to analyze if you are generating new leads or just maintaining the old leads. While they are both important, continuously generating new viewership is important for any type of website as it demonstrates growth.
  • Page Views/Bounce Rate. This feature can really help you analyze your page content. Often times if a landing page does not generate enough interest, you will lose most of your viewers after their initial impression. A high number of page views and a low bounce rate is ideal for a successful website.Google Analytics Page View Analysis
  • Browser Capabilities & Connection Speeds. For anyone unsure of their websites compatibility with other browsers, operating systems, etc., this feature is a must. If you are somewhat apathetic about browser testing, and you monitor the browsers people have used thus far, then it eases the necessity of doing so as you know exactly which browsers you will need to ensure your website is fully functional with. Google Analytics Visitor Browsers Analysis You can also check for screen resolutions, and flash versions to make sure your website is seen the way it is supposed to be seen. In addition, you can analyze connection speeds of your viewers to be sure the website loads in a decent amount of time for your viewers. For more information about cross-browser testing, see my recent post Cross-Browser Testing Methods. Google Analytics Visitor Connection Speeds
  • Tracking links. Google Analytics also allows you to track the outgoing links on your website to further analyze your viewers behavior. Simply insert the following code (forgive my laziness, yes, it is an image): Google Analytics Link Tracking Code
  • Tracking your visitor's actions. You can track the browsing and buying behavior of your website visitor also through Google Analytics, to see who subscribed, mad a purchase/download, etc. using the following script: Google Analytics Visitor Action Tracking Code
  • Advanced Segments: Analytics allows you to analyze subsets of your viewership with the Advanced Segments Tool. You are able to select from predefined segments, which include: all visitors (default), new visitors, returning visitors, paid, non-paid, search traffic, direct traffic, referral traffic, visits with conversions, visits from iPhones and non-bounce visitors; or you can create your own custom segments with a flexible segment builder. See the video below to learn more about advanced segments.
  • Dashboard Customization. You can customize the reports featured in your dashboard quite easily through Google Analytics. This allows you to see your most important reports immediately without digging through your reports to find them. Google Analytics Dashboard Image
  • Email Alerts. Analytics allows you to set-up emails alerts on a schedule for continuous updates on your stats. Go to Analytics settings -- View Reports -- Email -- Schedule to customize your alerts.
  • Export to Excel. For Analytic virgins, the 'Export to Excel feature can be a true time saver. Each Analytics report can be exported to a file type compatible with Excel for personal documentation purposes or for more familiarity. XML, TSV, PDF, CSV
  • Great Visualization Features: From the 'Site Overlay' feature, which provides information regarding the links being clicked on the page (see image below below for brentandkaylee.com's site overlay) to the 'Map Overlay' feature that provides visitors location information by color-coding maps (see image below for brentandkaylee.com's map overlay), to the plethora of graphs created to analyze data, Google Analytics data charts are an excellent supplement for visualizing large data. Google Analytics Map Overlay Feature

Labels: , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments