6.10.2009

11 Case Studies in Single Page Website Designs

Keep It Simple, Stupid.... The right way

A new trend on the web I have noticed increasing in popularity is the single page website design. This is constituted by an all inclusive, all important Home page. The reason to use a single page design is varied, however there is one indisputable result: fewer people can get lost in a website when there is just one page. That said, there is a right way and a wrong way to handle a single page website design. Below I have listed 11 single page website case studies and examined the fundamental details of why they went right or where they went wrong.

The YES YES's

  • Gotta Get to FOWA (Future of Web Apps)
    Single Page Website Image - The Webutante Comments: Web 2.0, clean, bright
    What makes it work: Staying Power. This site is looking for sponsors. People who support their aspirations to get to FOWA. People who will join their facebook groups or read their Tweets. Everything is clearly laid out and easily accessible. You don't get lost in the page because of anchored text throughout. It's length is used as a tool.
  • RZMota
    Single Page Website Image - The Webutante Comments: Graphical interface, ease-of use, potent functionality
    What makes it work: Content. RZMota does not sacrifice information or functionality in order to fit everything in one place. Instead, RZMota utilizes a clean structure to entice the viewer to check out the portfolio, learn about the designer and contact the designer. Usability remains in tact and the functionality does not deter the viewer.
  • Sofa
    Single Page Website Image - The Webutante Comments: CSS-driven, pure, simple
    What makes it work: Accessibility. All that is needed is there in an easy format for viewing.
    Faux Pas: No contact method other than a listed email. I let it slide for Sofa because of their powerful design, hence they are on the YES YES list.
    Webutante Fix: Small contact form at the bottom for potential clients.
  • Maurivan Luiz
    Single Page Website Image - The Webutante Comments: Perfect.
    What makes it work: The page is all encompassing. There are multiple methods of contact so the call-to-action is not neglected, numerous portfolio items, and all the information you need about Maurivan - including his sense of humor (which you see with the panic button).
  • Kobe
    Single Page Website Image - The Webutante Comments: All-inclusivity, usability, functionality
    What makes it work: The site maintains its curb appeal and stature while exploring the information about Kobe. The email sign-up is constantly present in addition to a separate contact form, and it's graphical appeal is excellent.
  • MPlusZ
    Single Page Website Image - The Webutante Comments: Clean, CSS-Based, comical
    What makes it work: MPlusZ keeps your interest throughout their single page site through their entertaining design, increased functionality and user prompts. Their work is elegantly featured on a slider, a contact form and contact information is available. Content and graphics are both used effectively without overloading the viewer with either.
  • Vanity Claire
    Single Page Website Image - The Webutante Comments: Hello, beautiful.
    What makes it work: While the design really speaks for itself on this portfolio site, there is also an element of charm in Claire's usability. With lighthearted leads and clean/pure functionality, you really get sold on the website...and Claire. That, my friend, is the point of a portfolio website, which makes this single page site get five stars in my book.

The NO NO'S

  • Alessandro Cavallo
    Single Page Website Image - The Webutante Comments: Great Design, beautiful work
    Faux Pas: Contact me link is merely an email link! Anyone who uses a webmail system (Yahoo or Gmail for example) will not be able to send Alessandro a message without installing Mac Mail or Outlook. Remember: Single page websites should not be a compromise, but rather a solution. Details should not be sacrificed for lack of room. Every t should be crossed and every i should be dotted.
    Webutante Fix: A contact form in a multi-box to maintain the one page feel but increase functionality
  • Basil Gloo
    Single Page Website Image - The Webutante Comments: Clean, Wow-factor, distinctive
    Faux Pas: The website lacks both information and functionality. There is no contact form, merely an email link instead, there are no explanations or featured works. Sure, we are linked over to Everyone Knows and Webmasters International, Basil's companies, however we know little about Basil or his work by looking at this site.
    Webutante Fix: Add sectionalized features via JavaScript with brief informational resources. Add a Contact form as well as work examples. Link the latest blog post to another section of the page. Familiarize the viewers with Basil and Basil's story. A website is supposed to serve more of a purpose than merely that of a business card. It is a tool.
  • Creative People
    Single Page Website Image - The Webutante Comments: Clean, Graphical, Distinctive
    Faux Pas: It took me a few minutes before I was actually able to find the navigation for this website. It blends in with the background and almost leads you away when all of the sudden you notice it (or you hope to). That's a huge problem considering that without the nav, the site is simply an off-beat image of a dude holding a sign and a squirrel.
    Webutante Fix: Make the navigation using buttons or icons. Use a different color for the buttons other than white or gray so they stick out more. It's called usability - and it is an absolute necessity on any website, much less a single page site.
  • Daniel Stenberg
    Single Page Website Image - The Webutante Comments: usable, functional, clean
    What makes it work: Everything is right there to see. The functionality is blazingly obvious so it can not be mistaken, and as a portfolio it serves it carries out all necessary functions.
    Faux Pas: Anyone who uses a webmail system will not be able to send Alessandro a message without installing Mac Mail or Outlook.
    Webutante Fix: A contact form that follows the 'About Me' section to maintain the sites single page appeal but increase the usefulness.

Labels: , ,


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

4.18.2009

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

3.20.2009

Creating a Design Concept

Customizing your Project's Design Direction

When it comes to designing anything from a website to an advertisement, it is pretty easy to lose track of your concept along the way. You can start with a BMW Mini and all the sudden find yourself in the midst of a project resembling more of a Daewoo than the quality German Engineered vehicle you were trying to portray. Often times it can be pretty easy for a designer to lose focus of the foundational elements of a design project, which allows this sort of 'design sidetracking' to happen. If you are a professional/unprofessional designer who often finds themselves in this circumstance, today's post should serve as a constructive tool for you. Today I will be discussing an in-depth design process to assist designers in maintaining a consistent project direction and concept while staying aligned with the goals and substance of the project.

  1. Color Scheme - If you are designing for a company, you will probably want to use the colors the company has already used to brand themselves. If the company does not have distinct colors yet, or their colors are somewhat felxible, I recommend checking out Adobe Kuler, an excellent color scheme resource, to pick your appropriate color scheme.
  2. Typography & Fonts - Usability is often a function of (among other things) legibility - a direct function of typographic styling. The importance of typography simply can not be ignored on a website or advertisement. Several of the most important aspects: Font, size, weight, line spacing, paragraph spacing, color, and hierarchy. These aspects can be varied somewhat throughout a project, but varying too many and/or too much can make the project lose consistency and redundancy - two pretty important design principles. Usually I don't use more than two fonts per project (potentially 3 if the logo is a typographic logo). Also, don't forget to evaluate your content when working with typography for a website or advertisements. If you have a ton of info, stick with a more simplistic, legible font, with fairly consistent styling throughout. If your content is lacking, often times you will want to dress it up a bit- widen your spectrum of fonts, and maybe throw in a few fun fonts and styling. For more information check out the Periodic Table of Fonts, or Six Revision's article on Typography Tools. You can also check out my previous resource post which features several more Typography Resources.
  3. Theme - Whether you realize it or not, pretty much every design project has a overriding theme present in its elements. A popular theme on the web is the Web 2.0 look, which tends to be identified with usability, legibility, icons, gradients, and reflections: see image. Other sample themes include Grunge: see Von Dutch; Retro/rounded: see Moose or Tutorial 9; Authentic: see Glocal Ventures; Class Act: see Live at Sandstone; and Bubbly/Animated: see Brian Handley Design.
  4. Supplements to the theme - Theme upplements include background images, textures, fabrics, patterns, whitespace, etc. Included in this is establishing your primary aesthetic direction: for example, will you be using straight lines with sharp points or circles, bubbles and rounded edges? Will your page feature drop shadows, reflections, gradients, etc? See Digital Web's Principles and Elements of Design for more ideas and suggestions for supplementing your project theme.
  5. Images - Your next step is to choose your image style. Will you be posting photographs on your page? If you are going for a classy portfolio look, photos are often a good way to supplement your theme. If you have a Retro theme, or a bubbly/cartoon theme, you probably will skip the photos and stick with Animations/Cartoons. Another big portion of this step is icons. If you are using a grunge theme, icons can be pretty hard to incorporate (although Smashing Magazine shows us some great grunge icons). If you are using a web 2.0 theme, icons are practically a no-fail.
  6. The Hierarchy - Establishing your hierarchy will not only help you establish your design, but it will also clearly define the most important aspects of the page/ad. Your hierarchy will be used to establish dominance for the most important aspects of your design, and emphasis to the key features. A company logo usually tends to be at the top of any design hierarchy. The logo is often (but not always) followed by the navigation. After the navigation tends to be the purpose. This can seem like it would be at the top of the hierarchy, yet if you are advertising car sales and the consumer can not remember who the company was in the advertisement - instead they simply remember some dealership that sold cars, you are not going to be the dominant thought in their head when they go out car shopping. The hierarchy goes into every detail of the design, and should be aligned with each element. The hierarchy is also very important in establishing a 'Call to Action,' which you can read more about in Boagworld's 10 Techniques for an Effective Call to Action article
  7. One of the most important steps in designing a website (designers can skip this step unless dealing with annual reports or books) is to characterize the navigation. When we characterize the navigation we are evaluating the amount of content we have, the number of sections in each category, and primary versus secondary navigations. At this point the designer needs to begin thinking more about his/her layout. Will there just be one primary navigation? This is good for a company who wants just a simple brochure presence with 'home' 'about' 'portfolio' and 'contact,' but once you step into territory above 5 -8 pages, categorization is pretty much a necessity. Possible navigations scenarios include drop downs, top navigation, side navigation, tabs, subnavs, page specific navs and more.
  8. Design Inspiration Resources - Based on what sorts of details you chose in the last steps, you can use design inspiration resources to see how other people have used these elements successfully in their designs. Remember never to use a resource as a template. To produce quality work, elements of uniqueness are incredibly important. But sometimes the work of others can serve to inspire and guide our design by generating ideas for the use of particular elements. For some great design resources, be sure to visit my post on the Top Design Galleries
  9. Template Resources - If you are still not quite there, template resources may help you better define places for specific elements on a page. Using the information you now know about your navigation, fonts, color scheme, you can begin constructing page layouts, and templates will often offer ideas on how to perfect them. Although I don't recommend you use an exact provided template (that kind of ruins the whole 'custom project' concept), you can use various templates as inspirtation to create your own unique wireframe layout. For CSS based web design templates, be sure to check out 101 Quality CSS & XHTML Free Templates from 1st Web Designer.
  10. Mock Up - Now you are prepared to use all the elements you have so carefully established to create a unified artistic vision for your project.

Elements to keep in mind:

  • KISS - Keep it Simple, Stupid!
  • Never ignore the concept of Usability
  • DON'T FORGET THE MESSAGE!

Be sure to let me know if you have any additional suggestions by Contacting me.

Labels: , ,


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

3.16.2009

Cross-Browser Testing Methods

Hassle Free Website Browser Testing

Since the early days of the web when Bill Gates made Internet Explorer the default browser for PC purchasers throwing Netscape for a loop, web developers have had to test their creations on multiple browsers to ensure cross-browser compatibility. Although most developers reserve a sacred spot in their hearts for the Mozilla Firefox browser, a browser sponsored by anon-profit organization that devotes its resources to promoting openness, innovation and opportunity on the Internet, the general public has yet to completely catch on. Therefore we are left with the largely ungratifying and often times tedious task of correcting our website creations in those other browsers... Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 (just forget about 5 and lower- too much hassle for such a small audience), early versions of Mozilla (for the slackers that refuse to update), Opera, Safari, and optionally Google Chrome (...and sometimes others). Whoever actually 'won' the browser wars is debatable. What we can say, however, is that we do know who lost... Web Developers.

The Webutante - Cross Browser Testing Methods - Browser Image

Because of the inconvenience testing a website in all of these browsers can be, I have compiled a couple of methods for cross browser testing that increase developers efficiency and quality when conducting cross-browser tests. Check them out and be sure to Contact me if you have any additions, modifications, or even just commentary.

The Webutante - graphic design and web development resources - browser statistics
  1. Browser Shots offers both a free service and a paid service for testing an awesome selection of browsers on PC's, Mac's, Linux and more. So why pay? Buying Browser Shot's service gives you priority, meaning if you don't pay, you are essentially last in line to be provided with your request. So, needless to say, the main drawback on the free browser shots service is rendering time. I put in a request for one of my personal websites to test it out a little bit for myself, and...well I am still waiting with my queue estimate being somewhere between 3 minutes and 1 hour and 30 minutes (!).
  2. IE NetRenderer offers a convenient method of testing the Internet Explorer browser, encompassing IE5.5 all the way through IE8. This is one of my faves because of its straightforward utility, and no hassle service. There is no charge for the service and your screenshot shows up fairly rapidly. Drawback: NetRenderer only gives you a screenshot of the browser, so interactivity and usability testing is pretty much out of the question.
  3. For testing a website in Mac browsers be sure to check out Browsr Camp, which tests with with the latest versions of 12 different Mac OS X browsers. Drawbacks: this baby costs money, even if it is only $3 for a two day pass or a $99 year long pass - and although you can test Safari 3.1.2 for free, the website I chose to test showed up flawed in the screenshot for some reason... It also only entails the most recent versions of the Mac OSX browsers, leaving out the previous versions that many people still have. Either way, however, Browsr Camp's rendering speed still makes this program pretty sweet.
  4. Xenocode Browser Sandox could be considered the free alternative to Browsr Camp. Despite being less browser inclusive (Xenocode only tests for Internet Explorer 8, 7, and 6, Mozilla Firefox, Apple Safari, Opera, and Google Chrome), it still covers the primary browsers necessary for testing and even features multiple versions of IE. The main drawback with Xenocode is its incompatibility with Mac users.
  5. Another good PC freebie is IE Tester which allows PC users to download the program to test all relevant versions of the IE browser on both Windows and XP. Again, the drawback with this program is its incompatibility with Macs.
  6. For more browser testing programs that cost money, check out Web Worker Daily's recommendations.

Until the day comes that all browsers unite their standards principles, functional capabilities, and visual interpretations, we must cope by utilizing the cross-browser testing methods listed above. Oh- and if you are viewing this on IE, please do me a solid and download Mozilla. Trust me, it's for your own good.

Labels: , , ,


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

3.10.2009

The Latest Design/Developer Resource Collection

March's First Collection of Faves

This week's resources are focused primarily on (although not strictly limited to) web developers and web designers. I decided to go this route due to the struggles I have been facing with some of my latest projects. I wanted to emphasize the details entailed in designing and structuring a website because of the struggle I, myself, have had in the past week working on just that - the details. When I say details, I am referring to icons, typography and layout structure...those little irritating features that can either make the website what it is, or if handled incorrectly, take away from what it is supposed to be. If you have any suggestions or anything you would like to add, please feel free to let me know.

ICON RESOURCES

  • iconPot is an awesome icon resource bank featuring a wide range of icons for web development projects. What I like about iconPot is its no limitations policy - all icons listed are free for BOTH commercial and personal projects without the obligation to provide back-links and/or credit to the author.
  • Always offering impressive resources and helpful file collections, Noupe does it again with their recent collection of the 50 Most Beautiful Icon Sets Created in 2008. What I liked most about this collection? The pragmatic utility of each set. There is sure to be something of use to everyone in this compilation.

NAVIGATION & BUTTONS

  • Da Button Factory is a fun website that allows anyone to make shiny, web 2.0 style buttons online with the click of a button.
  • Smashing Magazine is always coming up with new tips and tricks for their tech-obsessed readers, but with their latest collection of Navigation Menus: Trends and Examples they seem to have outdone themselves. This article is both useful and surprisingly inspirational with their Web 2.0 navigation suggestions for a vast range of websites.

TYPOGRAPHY

  • The Web Designer Depot examines 5 Simple Ways to Improve Web Typography in a recent article. Featuring very useful suggestions for accomplishing better legibility, this article is straightforward and to the point, and useful to anyone who even occasionally struggles with the art of typography.
  • For a great typeface reference guide, be sure to check out the Periodic Table of Typefaces created by the Behance Network. As a ranking system for the 100 most popular, influential and notorious typefaces today, this periodic table is a great tool to reference when deciding on the proper typeface for use in any design.

"NEATNESS" FEATURES

  • James Padolsey familiarizes his audience with the JQuery Auto-Resize capability that adds a touch of class to just about any form. Try it out for yourself to test out the coolness factor.
  • DesignM.ag never fails to offer useful tutorials and tips, and their latest jQuery feature, Easy Display Switch with CSS and jQuery proves to be another of my DesignM.ag faves. This feature doesn't just add to the 'neatness' factor of a website, but also adds an excellent form of customization that many people will appreciate.

Labels: , , , ,


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

2.22.2009

Free Photoshop Brush Resources

My Compilation of the Most Useful Resources for Photoshop Brushes

For designers using Photoshop, brushes are a hot necessity that simply can not be ignored. Because of their great utility, I gathered a few excellent resources websites that feature great Photoshop Brushes for you to download and use. Be sure to post a comment or Contact Me if you have any additions.

  1. As a full-on PS Brush resource website, PS Brushes is a useful tool for finding a wide variety of Photoshop brushes. With its frequently updated and carefully categorized brushes, PS Brushes offers everything from grunge brushes to around the house brushes.
  2. One of my favorite resource blogs, Noupe has pleased me again with their brush compilation 1000+ Free High Resolution Photoshop Brush Sets. Although the list is almost too lengthy to sift through (!), the distinct collections and high quality is enough to make any designer swoon.
  3. My Photoshop Brushes has a large selection of PS brushes that everyone will love. I personally had quite a bit of fun sifting through this brush repository - you can even follow their website on Twitter!
  4. Brusheezy is an excellent tool for locating the PS brushes you want or need. The clean and pure website displays brushes visually quite well, and makes it easy to determine whether the brush is what you are looking for. Their stock photo-esque website offers filters including category, PS version and sorting preferences, and even features a convenient 'Search' feature that sets this website apart from its competition.
  5. Photoshop Roadmap brings some great tools to the table in their collection of 100 Awesome High Resolution Photoshop Brushes. With just 100 to sift through, we are quickly directed to the best brush options which are displayed visually (similar to Brusheezy) allowing for easy browsing.
  6. Abiding by it's mantra of Free Quality Brushes for Photoshop, QBrushes is an excellent PS Brush resource. It's clean site design and variety of searching methods allow for a positive and beneficial user experience.
  7. Brush King is another great PS Brush resource website that I simply could not leave out of this post. While it's website is slightly busier than some, it still offers an aesthetic display of a wide range of brushes. It even features categorization and a search tool.
  8. Get Brushes offers a great collection of free Photoshop brushes for all to enjoy. What I liked about this website was the in-depth description details that include ratings, the number of brushes, and even the download size. It also features categorization labels for easier searching.
  9. For lighter brush versions (you may actually be on a strict time schedule), be sure to check out 50 Free Photoshop Brush Sets for Modern Design Trends by Six Revisions. Also, Techzilla's Free 40+ Photoshop brushes sets offers a couple great brushes I did not see anywhere else. For Gimp users: Techzilla also gathered Over 1400 Brushes for you!

Labels: , , ,


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

2.21.2009

Latest Design/Development Resources

Top Notch Picks for Quality Production

I have been severely slacking on my posts this week, so in order to make it up to my readers, I opted to scan for some new excellent resources on the web. This time I will be breaking it up into 3 categories: 1.) Web Development; 2.) Design Oriented; 3.) Inspiration/Humor. Enjoy.

Category 1: Web Development.

  1. The curious blog, Noupe, featured an incredibly resourceful article recently entitled 40+ Useful & Handy Web Designer's Web Services & Tools. I found a few things in there I have used recently as well as a couple of items both designers and developers can use (I loved #2, Wordle, and I found #19 really useful for businesses and freelancers).
  2. Compiling browser safe resources can be quite an un-fun task, but, no need to worry, DesignM.ag has done it for you in their latest article 10 Helpful Resources for Cross Browser Testing. The free tools, like IE NetRendering, are my personal faves - I don't really like to pay to please Bill Gates and his Windows Posse ;).
  3. One of my own favorite web logs, Smashing Magazine, has compiled a list of 50 Beautiful And User-Friendly Navigation Menus. Featured are CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. This is a great compilation resource for anyone who appreciates the importance of website navigation.

Category 2: Design Oriented.

  1. PSD Tuts+ posted a fun resource for Photoshop Users called 50 Insanely Weird but Awesome Photoshop Brushes. Not all of these brushes may be useful for you, but you are sure to find at least several brushes that you have been dying for. My faves are the grunge, smudges, sparkly and lace brushes.
  2. Best Photoshop Tutorials Blog posted a fun article recently compiling the The Coolest Text Effects on the planet. This collection truly does not let down; the 'Fire' effect and 'Funky' effect are both killer looks that are hard to find.
  3. Smashing magazine just can not do wrong. Case in point, their recent post The Ultimate Collection Of Useful Photoshop Actions. While some are a little cliche (the comic book look is slightly overrated), this article is a real treat for people like me who like to conserve time with Photoshop.

Category 3: Humor & Inspiration.

  1. I could not stop laughing when looking at Urlesque's collection of the Top 10 Moments Caught on Google Maps Street View... At least until I saw a kid pointing a gun at an even smaller kid!
  2. Even I have been guilty of posting one of the Top 20 Male Poses of Facebook. 2Birds1Blog did a great job with this piece.
  3. Nearly everyone has written a Passive Aggressive Note at some point in our lives. However when they are posted together on a website online, hilarity ensues.

If you found this information useful, be sure to check out some of my related posts:

Thank me later.

Labels: , , , ,


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

2.10.2009

10 Client-Side Editability Options

Offering Clients Hands-On Updating Options without Hiring a Programmer

Not all web developers are PHP or JavaScript wiz kids. In fact, a lot of us draw the line after complex CSS... maybe even after cut'n'paste JavaScript. So when it comes to offering clients the opportunity to edit the content of their web page, it can often be a struggle for web businesses to figure out the best way to go about doing so.

To help those businesses, and myself, I decided to do some research on the subject. Based on my own experience in addition to other reviews and information, I gathered the top 10 most useful applications and software that allow for clients to edit portions of their website without paying a web developer to do it for them. These will come in handy under many circumstances, but especially when you are working with a client on a budget that does not necessarily need a custom back-end system that a programmer can build.

If you find this information useful, be sure to check out some of my related posts:

The Top 10:

  1. Cushy CMS is a straightforward method for offering client editability without sacrificing time, money or design. With Cushy CMS your editable regions are pointed out via CSS classes, allowing for clean-cut code and purity in CSS. Vandalay Design offers an excellent Cushy CMS Explanation and tutorial to help you get started.
  2. Adobe Contribute is a handy way to offer clients a simple content management system for under $200. With an interface similar to MS Word, Contribute allows for rich-media files, in-browser editing capabilities, and Adobe Dreamweaver compatibility.
  3. Tiny MCE is a WYSIWYG web based Javascript HTML editor control to help assist your clients with content management. Released as Open Source under LGPL by Moxiecode Systems AB, it has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is also has the ability to integrate into other Content Management Systems. Drawback: You have to use file/image managers to relay the information.
  4. For those clients who only need to provide clients with the ability to edit their website's gallery, Zen Photo is for you. With a wide variety of gallery features, customizable CSS-based templates, comment capabilities, support for Flash Video, MPEG4, Quicktime, and 3GP (.3gp), ZenPhoto is the way to go for anyone seeking an all-around gallery solution.
  5. Using an interface similar to that of the popular project management application, grouphub, WidgetFinger is free with limited use. However, unlimited use of the application can be bought for the low price of just $10/month. The Widgetfinger editor will enable your clients to edit a live web site in real time, while also helping to maintain standards compliant XHTML and CSS code by separating the content from design.
  6. With features including WYSIWYG editing, video compatibility, photo galleries and blogs, Light CMS is free to start (pricing begins with increased users and pages) and offers a clean, hassle-free CMS experience with web 2.0 functionality. Featured on the website are useful video tutorials (which helps with client training). The drawbacks with this system is the hosting requirements (hosting with them) and the graduated pricing.
  7. Available in ASP, ASP.net, or PHP, Content Seed allows your client to visit a page that you've "seeded", hit control-y on their keyboard and log in, at which point they can change the text, upload images, add links, and anything else they want to do within the area of the page you've given them editing privileges over. It's customizable toolbar (to control the editing capabilities of the client) is what distinguishes this content system. Pricing runs from $150-$300 for unlimited deployments.
  8. The award-winning Joomla is a content management system (CMS) that enables you to build Web sites and powerful online applications. Its ease-of-use and extensibility have made the open source, freely available Joomla a popular choice among developers. Websites presently using Joomla include the United Nations, Ihop, and LA Weekly.
  9. Drupal may be a little more challenging at first compared to some of the other applications/software I have posted here, however for anyone willing to invest some time, Drupal is a great open source CMS software to learn. The primary drawback: Time is money.
  10. Finally, there's always the blog option. Although this option will only allow for editability on the actual blog page, itself, sometimes that is all a client really needs. Some reliable blogging websites you can use to create client blogs: Blogger, BlogSpot, and Word Press

If you have any suggestions for additions to this post, be sure to Contact me or post a comment with any helpful information.


Labels: , , , , ,


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

2.07.2009

New Design & Development Resources

This Week's Top Picks

Listed below are some of the best design & Development Resources I have Discovered this Week. Check them out, and be sure to leave a comment or Contact Me if you have found any awesome resources this week that you would like to share.

  1. For all you Mac junkies out there (like me), Noupe recently posted an article called Readers Pick: 30+ Incredibly Useful Mac Apps for Web Design. With a wide variety of applications for the Mac interface, there is something for everyone in this collection even if you are not a developer or designer.
  2. The web design blogRedswish created a list of 10 SEO elements all websites should have. From the basics to the more advanced, this article will help you ensure you are covering the SEO basics with each website you develop.
  3. Vandelay Design recently posted an incredibly useful article featuring 77 Resources to simplify your life as a Web Designer. This article covers a wide-range of issues, from colors to favicons, most of which are pretty useful for web developers.
  4. You've got to love CSS Trick's awesome tutorial about Setting Font Size Based on Word Count. It may not be a feature you want to use for every website, but it is a great tool to use in some instances, and it is a pretty cool typography effect.
  5. Sebastian de With hearts making icons and interfaces. So his latest project, the Icon Designer definitely is fitting for Sebastian. His beautiful and clean website design is only amplified by the tools it provides to developers and designers all over.
  6. Smashing Magazine makes this weeks cut for design resources with their resource-filled article 100 Beautiful Free Textures. Nearly everyone needs random textures from time to time, and this inventory will come in handy for those people time and time again.
  7. Along the same lines as the previous resource, Dzine Blog shares another group of useful resources, this time in the form of Photoshop files, in their article 30+ Free Quality PSD Files to Download. Featuring tech resources, design templates and more, this article is equipped with an awesome selection of Photoshop files that many people (such as myself) have found themselves in need of in the past.

I hope you find these websites and articles both beneficial and useful. If you feel like I am leaving any out feel free to share with a comment. Be sure to check back again soon for more for resources!

Labels: , , , ,


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

2.03.2009

Top Design Galleries

Design/Development Resources

So I'm finally back from my fun-filled Atlanta vaca, and it's time for blog updates! Due to my lack of posts during vacation, I thought I'd throw a couple of good resources your way to make up for my absence. Today's resources are for both designers and developers, and coverage will focus on the best design galleries (primarily web, but a few cover a more expansive range of design). If you would like to add any websites you think are notable, feel free to post comments and I will update the info asap.

  • The Best Designs recognizes the best CSS and Flash websites from around the world. This website is reliably updated (every weekday) and uses keywords to categorize the website type, offering excellent utility when you need style-specific design inspiration or motivation.
  • With nearly 13,000 websites to sift through, CSS Mania is an excellent resource for web designers and CSS enthusiasts, and is probably one of the best web 2.0 resource out of all of the websites I post (excluding the fifth post). Although it does lack thorough descriptions, it's images reveal the style and type of the website on their own which allows readers to click only on relevant sites.
  • Best Web Gallery is an inspirational gallery website featuring a wide range of quality design websites (Flash & CSS). A notable feature is its istockphoto-esque hover viewing appeal.
  • One of my personal faves, Faveup provides a simplistic but useful gallery of inspirational designs. What I like about Faveup is it's variety, featuring business cards along with Flash/CSS designs, and it's permalinks are a gift any designer can appreciate.
  • The CSS Zen Garden aims to inspire, excite, and encourage participation in pure CSS-driven designs. Offering impressive designer CSS showcases, CSS Zen Garden appeals to the beauty of standards based, clean coded websites.
  • Tag Society is a criterion-based network of quality websites organized by their respective tags. The impressive aspect of tag society is its vast collection of websites in addition to the ease of searching for type/style specific sites.
  • Website Design Awards is a clean-cut Flash/CSS design showcase with a ratings system that makes this site especially fun. One drawback: it's difficult to figure out what website style/type you are clicking on as there is no description and the preview contains such a small portion of the design.
  • Design Licks boasts a neat collection of top web design picks displayed in a flashy (but still subtle) manner. The 'Site of the Day' feature is the aspect that truly sets this website apart from its competition.
  • Finally, Type Sites is a website showcase updated weekly that emphasizes the beauty of typographic design. In addition to its narrowed focus on typography, Type Sites is also set apart by its informative commentary that guides readers through the art of typography and how it is successfully used on various sites.

Other notables:



Labels: , , , , ,


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

1.24.2009

Development/Design Resources

My Latest Faves

Lately, in an effort to develop my blog audience by offering helpful tips and information, I have spent quite a bit of my free time scanning the internet. In doing so I have compiled several valuable websites that offer useful resources for individuals in the tech industry. These are some of the latest to be added to my collection of bookmarks.

  1. As a repository of Sifr fonts, sIFR Vault offers quite a selection of sIFR fonts and font inspiration. The 'Resources' page will also familiarize you with sIFR if you have not yet had experience using it.
  2. With information on the latest calendars/date picker features, resources for the cleanest sliders, and the most beautiful web UI galleries, Italian blog woork has helpful resources that every web developer could appreciate.
  3. Designer Folio (a helpful website all around) recently posted an excellent Free Flash Gallery with cool effects and great versatility features web developers will love to toy with.
  4. For those people who desire to be known as one of the CSS Elite, web developer Adam Oliver compiled a few Useful CSS Tips that are sure to come in handy.
  5. From SEO, to PHP, Devlisting links to an expansive collection of web resources for web developers to utilize. While some are better than others, the large variety makes the website useful for a broad spectrum of beginners and professionals.
  6. Delicious is a great tool to discover the latest hot topics spanning the entire web. It also serves as a handy organizational tool for bookmarks.
  7. Finally, for website form advocates, Feckless Mind shares Purified Form Mark-Up for anyone to use on the web.

I will try to post a few more of these beneficial websites and articles each week, so be sure to check back again soon for updates.

UPDATE: I discovered this late, but just could not leave it out: 30 Useful Open Source Apps for Web Designers

Labels: , , , ,


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

1.23.2009

My Gift to You

20 Free & Open Source Image Galleries for Web Developers

Website image of CMD+Shift Design blog - web development resources

I found probably one of the most useful articles I have ever come across on CMD+SHIFT Design Blog, and I could not resist sharing it with you: 20 Free & Open Source Image Galleries for Web Designers.

I tested out a couple of the galleries mentioned as I was so excited, and they seem to work quite well. I especially like the Space Gallery which mimics the effect of Mac OSX's Time Machine feature. Another gallery I enjoyed was Hideslide. The Hideslide website offers quite a few pretty sweet lightbox manipulation features, although there is a small fee associated with its commercial use.

This article should definitely be bookmarked for future use. Enjoy!

UPDATE: I found another great article with 57+ (!) Free Image Gallery, Slideshow And Lightbox Solutions. It covers some of the same territory as CMD+Shift, but also expands on it quite a bit.

Labels: , ,


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