Attackr.com » Developer Portal for web designers, developers and programmers

Thinking Outside The LightBox – TOP 10 PICKS

Gregory Milby — Wed, 10 Jun 2009 23:04:33 +0000

You know what a lightbox is – even if you don’t think you do. They’ve penetrated our daily internet lives as a way to dramatically display some content by popping up the content while graying out the background.

There have been some lists created with names of list boxes, but no one has sorted them out into designer-friendly categories. Especially sorted by value-type perspective. Though there are a variety of javascript classes/methodologies used to reproduce the lightbox effect. This post will review the high function lightbox scripts regardless of the class variety used to produce the product.

I’ll rehash the lists, and add some of my findings too – My opinions will be poised from the ease of use, how fast they load and complexity (is it more of a pain in the butt to implement it than it’s worth).

Here are the lightbox clones that seem to stand out, but as I soon learned, standing out means it’s bulky… the prettier it is, the more baggage it is (Kind of like a rich lady traveling?).

Greybox (& Greybox redeux) may be one of the most amazing ones out there, er – I mean pop up lightbox clone scripts. It handles iframes with ease (including a web page inside the pop up) – all of the close buttons are appealing and it’s smooth as butta. Just make room for the 50 suitcases though.

Leightbox (Yes, it’s spelled correctly). I may be in love with script… it’s light – insanely fast, and a painless install. It’s not the flashiest script out there, but when you need something rock solid and fast – it’s Leightbox to the rescue.

Lightbox2 is like it’s namesake – it performs as the original, but it does take things a step (or 2) further – it can handle image sets, so you’ll have the forward/reverse arrows are visible on the popup image – which saves the viewer a little trouble while browsing images. It’s package load is reasonably light, but the ‘Close button’ for lightbox 2 is easy to spot for the user. Lightbox2 seems to have taken the user into account while developing this script.

Lightwindow is a newer one on the scene, but it is a good contender. Easy setup, VERY clean design make it a good choice to integrate into 2.0/3.0 sites. Only a designer could appreciate the rounded corners feature, and the fast image preloading.

Weebox is small, fast and flexible. It’s self-explainatary name says it all. It’s actually one of my final picks along with Leightbox. There is a reported problem with safari web browser, so keep that in mind for the mac audience.

Thickbox is like “old faithful” JQuery-based – always there/always works, but the only complaint is that the stock close button is hard to find for new & inexperienced web users. A big hold back when designing anything that is retail oriented.

Slimbox is another top choice – it’s fast, easy to use and even looks good. One of it’s most useful features is that it does a lot of the ‘little stuff’ that saves some time – auto centers images into the lightbox pop up, scrolls through images in list – even does horizontal scrolling without missing a beat.

Shadowbox the project goals for Shadowbox are rare – their project goals were to develop an unobtrusive piece of code that performed the same way every time. This script even will refuse to scroll – big pitfall of most of these iframe based lightbox clones. If an image is too big – it only shows the area that is within the spec’s of the window – keep the user experience clean and neat.

Smoothbox is another extremely light-weight lightbox script. The setup is quick/easy – it’s not bulky or clunky, and only requires 2 files to operate (css & js, and images of course).

Modalbox is the balance of all of the goals. It’s big enough to look “AMAZING” & light weight enough to move around & setup easily. If you’re developing an online application and want to add the “WOW” factor without a headache – here ya go. You MUST click on the examples and ‘see it in action’ buttons on this page. The confirmation box along with the ability to enable/disable client side features is a great idea.

The Top 10 Best FREE Image Editors On The Web

Gregory Milby — Sat, 09 May 2009 15:42:45 +0000

There are a lot of free image editors out there if you know which virtual rock to look under.
1. Irfanview has actually been around so long now that it’s a staple in a lot of digital photographers arsenal. It can create html pages of thumbnails on the fly – great for proofs, or quickly delivering the family pictures to impatient relatives & friends. One benefit to Irfanviews longevity is that there a lot of plug-ins for it, and most of them are actually useful.

2. Photobie is one that I recently started using myself… mostly to see if all the plug-ins were as awesome as they seem (so far they are). For a professional, the provided templates may seem ‘beneath them’, but for the other 99% – these templates appear to be useful – at least to inspire creativity if nothing else.

3. Get Paint is one of those editors that you want when you do not want to spend 3 hours getting intimate with the tool set or the logic of how the program works…. it’s simple, direct and does a limited amount of tasks “very well”. A good tool to have on hand for quick photo/pic adjustments.

4. Yes, GIMP has to be on the list. If you haven’t heard of GIMP – I’m speechless. It’s intimidating interface rivals photoshop (yes, it really rivals photoshop for $1200-$1800 less [it's free]). The support, community, and innovative plug-in support is unmatched. If you want to invest time in a tool that will have infinite payoff’s – GIMP is it.

5. Picasa would have to be on the list too. I resisted the google app for many years, but finally caved in once I saw a friend importing over 50 pictures from her digital camera, tagging photos, and choosing/uploading pictures to her online album. It’s not the wicked graphic editor GIMP is, but it’s not meant to be. It’s a good solid vehicle for organizing your photos locally & on the web on a free website. There are permission levels that can be set on web albums, so only authorized people can view the specified albums.

6. VicMan’s Photo Editor is a straight forward editor, I wasn’t able to tell how extensive the support was, but the product worked well – and the twain (scanner/image device) worked much better than my purchased HyperSnap.

7. Photoscape is a great attempt at combining photoshop’ish editor with an old product I used to use by MGI that was basically a bin of effects – which were all good, but way overused by the ‘webmaster’ generation. Yes, there can be tasteful embossing, riveting reversed polarity, and bedazzling beveling without anything blinking…

8. i.Mage is a great paint replacement… it’ll never be a high speed editor, but it’s a good choice if you ever find your resourced peaked, and need to edit something to make a quick change (rotate/touch up a basic shape),

9. Online Image Editor messed with my sense of reality some, but this is a solid little tool if you are trapped like a rat at a remote location, and need to make a change or develop a quick graphic. Defiantly worth bookmarking/xmarking so you can get to the link when you’re on a jobsite.

10. The best for last… Splash Up is when you’re back is against the wall, you need photoshop, but you’re on your friends computer and they don’t have $1200-$1800 dollars to spend on the CS*<--(insert latest version number) master suite either. It's an online app which is key portability, but it also does many of the layering properties that only a high speed locally-installed application like GIMP or PS will handle. I found this application while writing How To Fix Your Sucky Website, and it has stayed bookmarked on my laptop sense.

How To Fix Your Sucky Website With Minimal Effort

Gregory Milby — Tue, 03 Mar 2009 16:16:59 +0000

We do not have en excuse for having a sucky website anymore. There are so many resources on the internet that anyone can have a decent looking website with a little work. Some people have a natural gift for creating a wicked website – while someone may be a very strong coder without an artistic gene in their body. With a little planning - anyone can have a website they can be proud of – or at least not embarrassed with anymore.

A site like this one would be a good place to start to get the feel of how to use a template before experimenting with a more complex css templates like the ones found here. Swapping around your look & feel gets easier once you get used to how CSS and xhtml are laid out. You’ll soon find that most of the templates start to look alike other than color choices, graphic style and flavor (size of object/text/etc…).

The template resources are virtually endless. This google search produced over 500,000 pages of free css templates sites. Like anything else, just because it’s free doesn’t mean it is good or ‘what you should use’. So if you have any choice dilema’s while browsing templates, remember to try to pick simple to start with until you get used to the designers layout style.

If you have a good design, but need to spruce it up a little, there are a lot of resources on the web for creating cutting edge menu navigation, editing/creating graphics, and a mind boggling 16 milion sites waiting to give you ideas for gadgets & widgets to add to your site.

There is no crime in asking for advice either… There is a seemingly endless line of patient people waiting to help you. Just a word of advice, try to examine the work of the person you’re about to ask advice of – they may not share your same goals, taste or style. If you’re not sure how to view their work – ask them. They will usually have several samples they will be proud to show you. If they don’t – move on to another web design advice forum.

There are some complete solutions out there – just in case you are at your wits end – and just want to be free to focus on the content. Don’t forget blogs (in the rare case you’re delima can be solved with one of these type of solutions). Likewise, there is usually some really good design support for some of the bigger solutions like Joomla or WordPress.

Reference used for this post:

http://www.splashup.com/

http://www.joomla.org/

http://wordpress.org/

http://www.google.com/webhp?hl=en

http://www.alistapart.com/

10 Reasons Why Your Website Failed

Utah web design — Mon, 12 Jan 2009 14:00:55 +0000

10. You Hired Your Nephew

So he is an electronic wiz. He plays video games, accumulates 2,000 texts on his phone a month, knows how to use the remote for your entertainment system plus took a website class in high school. You’ve heard that he has created a website or two and see an opportunity to save a few bucks. Sure, you can hire him for dirt cheap, but that’s about what you’ll end up with for your website. A few hundred dollars later, you find that the website he created has done more damage than good. You find yourself taking your URL off your business cards, stationary and email signatures. Worst of all you’re missing out on potential customers and profits.

9. You Hired out Your Web Design and Development to a Near-Third-World-Country

Hiring outside of the country is often difficult and disappointing. If you caved into the idea of hiring a professional for less outside of the country you’ve probably found like many of my colleagues and myself included that the hassle and work you received isn’t even worth it being done for free. Save yourself the stress, and hire a competent firm close to home.

8. You Used Hosting Software to Easily Build Your Own Website.

How hard can building a website be? The honest answer, not very hard at all. HTML is one of the easiest things to learn. You can find tutorials or a class that can get you started in building a website within hours. Templates make it even easier. Just about anyone can create a website, but being able to build a website that brings success takes a lot of experience and a lot of talent. If you’ve decided to try it out as a hobby, go for it, I personally find very few things more enjoyable than crafting new designs and programming new systems. But if you want a website that gets results, turn it over to the professionals.

7. Your Web Design Sucks

If you don’t take your business seriously, how can you expect your clients to do the same. Your visitors are looking for the latest and greatest products or services. In short, get with it, or fail.

6. You Have an Intro Page

Even if you think your splash page looks “cool”, you’re providing little to no benefit to your visitors. Our studies have shown that websites with Intro or Splash Pages lose a multiple of visitors compared to if they didn’t have Splash Page.

5. Your Website contains little to no content.

Usually in this case you have a website because you were told you needed a website. Not only is this tactic looked down upon by your users, but search engines as well. Create something of value for your visitors, design a strategy to get them to build your revenue. A one page site says, “I only did this because I had to.” If you only have one page, your site is a failure.

4. Your Site Has No Appeal

Keep things fun, keep things light and above all keep things interesting. It is interest that brought your visitor to your site in the first place and it will be interest that will keep your visitor from leaving. If everything about your website is boring, you’ll never convince them to stay long enough to take a chance on you.

3. Your Budget Only Included Web Design and Development.

It doesn’t matter how influential, beautiful or amazing your web design or development are if you have no way of getting people to your website. When budgeting out your website, make sure to appropriate sufficient funds to attract an audience to it. It is suggested that you budget enough to build your website, and hire an Internet Marketer to get targeted traffic to your site. You need both to succeed.

2. Your Website is Too Generic

A good looking website and a well branded website are two very different things. A good looking website might impress your audience but a well branded website will influence your audience to a profitable action. If you’re running a business, the latter is the smarter choice. Every aspect of your website should be communicating the same message, from your design, to your logo, to font, text and style. Keeping these aspects of your website consistent will create a stronger and more influential brand.

1. Your Site is Not Based On Achieving Your Website Objectives.

If you didn’t plan out the primary and secondary objectives of your website, then your website is probably spinning your visitors in circles. Give your website an objective, and every aspect of it should be accomplishing it. If you’re trying to sell a product make it appealing and easy for them to do so, if you want them to call you on the phone do the same. Too often a website is about a company and loses its potential influence it can have to make your company more money. If you aren’t getting what you need from your visitors, your website has failed.

Steps to Greater Website Profits

Utah web design — Fri, 26 Dec 2008 10:00:02 +0000

Giving Your Audience What it Wants

Too often web designers make a web site that only contain fluff. The problem is, visitors don’t come to your site to wast time, but usually have a distinct purpose. Don’t give them what they want, and they are gone!

So how do you appeal to these visitors? The easy answer, “Give them what they want.” The more important question you should ask is, “What do my visitors want?” To answer this question, you need to research three imperatives,

Who are your visitors?
What attracted them to your site originally?
What do they want when they come to your site?

Once you know who your visitors are, what attracted them and what they are interested in, it becomes very simple to attract and retain them.

So now your wondering how you find this out about your visitors. luckily there are plenty of tactics to help you do this. First tactic, just ask them. Find a way to speak to them and ask them, you’ll find that this is a very helpful tool. Another tactic is using analysis software like Google Analytics. This software is easy to set up, and can tell you mounds of valuable information about your visitors. These are very helpful ways to learn more about your visitors, and in turn, helps you to provide unique and very valuable content to them.

Attract a Larger Targeted Audience

By catering to your customers needs you’ll see an increase in traffic from past visitors returning to your site. But by extending your marketing reach you can compound the number of visitors your site will recieve. In this section we talk about some of the most important traffic building methods used by professionals each day.

If you want immediate traffic now, Pay Per Click (PPC) advertising is the way to go. I offer a fair warning though, carelessness and lack of expertise can lead to a waste of your money. If you are new to PPC advertising we recommended to use a budget of $5 or less a day and use one of the most popular PPC systems: Google Adwords. One great benefit of using Google Adwords is that it connects directly to Google Analytics for extra detailed reporting. If done right, you’ll find PPC advertising as a very valuable tool in bringing in new sales every month.

If you like free relevant traffic, your going to love SEO (Search Engine Optimization). SEO is about optimizing your web pages to become more search engine friendly, adding valuable and unique content and providing trusted links from within and outside of your website. The better ranked you can get your website in the search engines, the more free and relevant traffic you will receive.

Focus Your Website to Make Money

As mentioned earlier, you want to make it quick and easy for your visitors to get what they want. On the other side of the coin, you need to make it easy for your visitors to do what you want them to do. For example, why make them click through endless pages to sign up for a membership or newsletter? The easier you make it for your visitors to do what you want, the more they will do it.

Keep your website clean by only providing content that your customers want, and what you want your customers to do. Draw your visitors attention to a profitable action by using proper design such as color, contrast and varying fonts. Don’t forget to try new ways on different web pages to get your visitors attention.

The number of methods you can use to increase customer action seems enless. A few of the many worthy mentionables are branding, cross promotion, A/B testing and improving your call-to-action. Remember, the higher the rate of visitor to customer conversion the more revenue your website will receive.

Don’t Do it Alone

Too often we look to do our web design and marketing ourselves, and sometimes as a result, we lose more money than we save. Unless you’re dedicated and experienced in this area of specialties, you will find yourself beneath your competition when it comes to building an effective website.

Top 10 Freelance Web Design Sites

Web Developer News — Mon, 20 Oct 2008 10:00:11 +0000

Working as a freelance web designer, developer, graphic artist, or outsourcing service provider can be challenging. Long hours, high competition for jobs, tight deadlines, and low budgets make running your own web design firm difficult. There are a lot of websites that provide a way for clients and designers to come together, but which of these are reliable places to find quality jobs? We did a review of the top 10 freelance job boards on webdevnews.net, and the results may be of interest to those looking for new places to network and find clients.

Our top 10 Freelance Sites for Web Design are:

These sites are also good when your workload becomes too much and you need to build a team to work together on projects. Outsourcing through the freelance boards builds a lot of new possibilities for independent web designers. If you need a custom theme designed, a new module coded, someone to do your SEO work, or to lay the installation groundwork for a site to finish up later, you can usually find good people on these boards to work together with from around the world.

We chose oDesk as the top freelancer site because of the number of jobs listed, the quality of the development projects, the innovative billing, collaboration, and work monitoring options, as well as its overall quality and professionalism. GetaFreelancer doesn’t even come close at second place, but the volume of projects posted their and the low rates for outsourcing make it a vibrant marketplace. We had issues with the membership fees at elance, but it is really a top quality site for finding good projects.

To see the full review and find out more information on these freelance sites, or to post your own comments and experiences with freelancing, visit the original review at webdevnews.net.

The Top 10 Open Source Content Management Systems

Web Developer News — Fri, 10 Oct 2008 10:00:14 +0000

One of the main characteristics of Web 2.0 publishing is the change from HTML websites to DHTML Content Management Systems. Another is the Open Source model itself, leveraging user communities for development of the CMS platforms. Content Management Systems include all of the Web 2.0 calling cards – social networking, blogs, forums, wikis, image galleries, comment threads, ecommerce, voting, social bookmarking, tags, embedded video, and many other features through extensions and modules. Consequently, the CMS is the preferred platform for most web designers building sites today. Working full time in Open Source CMS development for the last four years, we decided to review the best and create a top 10 list at our website to see if developers agree on which publishing platform is tops for Web 2.0.

The Top 10 Open Source Content Management Systems:

1. Drupal
2. WordPress
3. Joomla
4. Media Wiki
5. Liferay
6. TYPO3
7. Moodle
8. Dolphin
9. Pligg
10. Movable Type

Honorable Mention:
Xoops, Geeklog, e107, Mambo, Nucleus

We gave the top spot to Drupal because of its ease of use, vast number of modules, great user, developer, and support community. WordPress is really a close second, but is best for single blog websites and personal publishing, lacking many of the social networking functions, ecommerce facilities, forums, wikis, etc. used on more expansive sites. Joomla has one of the largest user communities of any CMS, and everything you need to develop social networks, ecommerce, & archive sites, but includes too many commercial products for Open Source development, and is more difficult to learn than the top two.

After the top three, the list includes more specialized CMS platforms, like Media Wiki for collaborative document authoring, Moodle for education, and Pligg for social bookmarking. TYPO3, Dolphin, and Liferay all offer unique feature sets and a distinct design that sets them apart from other platforms. Movable Type is a questionable choice for the last spot, and will face strong competition from other blog platforms such as XOOPS, Geeklog, and Nucleus.

For more information or to see the full review and discuss the rankings, visit webdevnews.net.

Magento – Best for Open Source eCommerce?

Web Developer News — Mon, 06 Oct 2008 10:00:15 +0000

Magento was only released last March, but already has been downloaded over 425,000 times. In that short time, Magento has become the preferred choice for ecommerce development for many web designers working with Open Source solutions. Why are so many flocking to Magento, and is the hype really justified by the functionality? We put Magento through a demo install and development process to test the software. Magento has the professional, Web 2.0 look many designers are looking for, and that is surely one of the main reasons for its popularity. In comparison to other ecommerce platforms like OScommerce, Zen Cart, etc. there is a definite improvement in both theme and display out of the box. Magento uses custom themes and block positioning like most popular CMS software for design. The templates are clean and dynamic, and it is easy to set up your catalog display. Magento includes a shopping cart, a large number of payment gateways, product comparisons, tags, polls, internationalization support, advanced reports, analytics, and SEO optimized URLs. There is support for coupons, discount codes, catalog management, wishlists, cross-sells, and related items. You can create orders from the admin section for offline or call center sales, and managing shipping is easy with built in calculation for USPS, UPS, DHL, Fed Ex, and other delivery services. Magento will also automatically calculate sales tax on orders and supports multiple currencies on the same site. The user account stores existing order information, shipping and billing addresses, as well as a user’s wishlist, recently viewed, and recently compared products. Users can submit reviews, edit and manage them from their account pages. They can also submit tags for products, subscribe to newsletters, and send recommendations and wishlists to friends.

The closest approximation to the Magento user experience that I can site as an example is amazon.com, which is really quite amazing coming from an Open Source, freely available software. To see our full review of the Magento Ecommerce Platform, please visit webdevnews.net.

First Release of Drupal Carbon Upcoming

Web Developer News — Wed, 03 Sep 2008 21:30:07 +0000

Acquia, a start-up headed by Drupal founder Dries Buytaert is scheduled to release the first commercially supported version of Drupal, code named “Carbon” within a couple of months. The release is generating a lot of buzz in the development community, and many people are wondering what effect it will have on this popular Open Source Content Management System. According to Dries, there is no need to worry – Carbon will be released to the public under the same GPL license as Drupal and be freely available for everyone to use. Acquia will be providing paid technical support and development consultation to corporations who contract their services. They will also empower other design and development firms to do this by offering Acquia certification in Carbon / Drupal development. This will be similar to a Brainbench certification, and should become popular with those working professionally with Drupal.

While not all the details are known about Carbon, the release is essentially an “installation profile” that combines the core Drupal code base with a set of popular and reliable contributed modules. Views 2, CCK, a WYSISYG editor named Kupu, Voting API & Fivestar, Tagadelic, PathAuto, and Organic Groups are just some of the popular modules that will be included in the release package. Other new features will include Mollom, an anti-spam module developed by Acquia, and Spokes, an auto-update module. There is also a “to be determined” social bookmarking integration slated. Carbon is sure to breathe a new inspiration into the Drupal development and design community. Some worry that it could threaten its Open Source development model, but that has been actively dismissed by Dries himself. Following this example, other design firms may move to build and release installation profiles with paid support that combine upon the core Drupal system and contributed modules with new themes and customizations.

A good discussion on this issue is found on webdevnews.net, and there are also some interesting posts on the Drupal site, such as:

http://drupal.org/node/282254

More information on the release of Carbon can be found on the Acquia website.

Free WYSIWYG Editors

Dan Stephenson — Mon, 01 Sep 2008 17:36:20 +0000

WYSIWYG (pronounced /ËˆwÉªziwÉªg/ or /ËˆwÉªzÉªwÉªg/), is an acronym for What You See Is What You Get. Popular WYSIWYG editors include Adobe Dreamweaver and Microsoft Expression Web (formerly Microsoft FrontPage).

A WYSIWYG editor has a user interface that allows the web designer to see a result very similar to what their website will look like on a web browser. Often, they also include tools that allows a web designer to create a webpage with little or no HTML knowledge, using visual tools. While this can be a good way to put together a page quickly, the code that is produced is often bloated, does not validate, and on some tools, is all table based.

NOTE: Why YWSIWYG editors often have their own rendering engines for displaying your website, be sure to still check it in actual web browsers, to see how the page actually renders. There are times when WYSIWYG editors can be horribly off.

Free WYSIWYG Editors?

For many years, in order to get a good WYSIWYG editor, a web designer would have to buy one of the many commercial packages on the market. In 2005, Daniel Glazman released NVU Version 1. NVU is an open-soruce WYSIWYG editor that is based on the Mozilla Composer source code. It has many of the same features of the popular commercial products, and based on my own personal tests, seems to generate more standard compliant code than Dreamweaver or Expression Web. NVU is a popular choice for web designers and developers looking for a powerful tool for free. As great of a tool as NVU is, it has been discontinued with some bugs going unresolved. For some users, these bugs are a deal breaker, and prevented them from using NVU as their primary development tool.
After NVU was discontinued, Kompozer was created. it uses NVU as a code base, and aims to improve and fix NVU. If you are deciding between one of these two products, you should pick Kompozer, as it is more up-to-date, and has not been officially discontinued (as of this writing), which means there can and probably will still be more future versions released.
If you are new to web design, or just want to try a new tool, I suggest checking out Kompozer (and perhaps NVU). It’s a pretty good tool for HTML and CSS, though doesn’t always play as well with server-side scripting as some commercial products.

Feel free to share your experiences with NVU, Kompozer, or another open-source WYSIWYG editor.

Attackr.com » Developer Portal for web designers, developers and programmers

Thinking Outside The LightBox – TOP 10 PICKS

Related Posts:

The Top 10 Best FREE Image Editors On The Web

Related Posts:

How To Fix Your Sucky Website With Minimal Effort

Related Posts:

10 Reasons Why Your Website Failed

Related Posts:

Steps to Greater Website Profits

Related Posts:

Top 10 Freelance Web Design Sites

Related Posts:

The Top 10 Open Source Content Management Systems

Related Posts:

Magento – Best for Open Source eCommerce?

Related Posts:

First Release of Drupal Carbon Upcoming

Related Posts:

Free WYSIWYG Editors

Free WYSIWYG Editors?

Related Posts: