Archive for the ‘Tips and Tricks’ Category

Common sense for the modern human – Backups!

Friday, August 5th, 2011

Let’s say you have a laptop that you use as your primary work machine, and it stores lots of important stuff like work documents and old emails. Now lets say one day you boot it up and it won’t start up, and you hear some weird ‘clicking’ noises.

Guess what: your hard drive, arguably the single most likely-to-fail component in your laptop, has just failed. And you desperately need your data, like a key document due to a client today. What do you do next?

If you are one of the fortunate people who, either intentionally or unintentionally, have good, up-to-date backups of your laptop, it’s no problem. Worst case scenario you bring your backup medium, such an external USB drive, over to someone else’s machine and you get at your data. You can skip the rest of this post.

However, if you either do not have any backups or do not have good up-to-date backups of your data, you really only have two options. Option one is to bring your failed hard drive to a data recovery service. They typically charge in the neighborhood of $2000-$4000 to recover data from a failed laptop or desktop hard drive. Option two is to throw your hands up in the air and resign yourself to the fact that you have lost all your data. Better get to work re-writing that document ASAP!

The point of all this is, it is every modern human’s responsibility to themselves that they always make sure that their key data is being backed up, and further, that it is being backed up regularly and succesfully. That is just one of those things that every individual is going to have to have some awareness of sooner or later. Even if you aren’t technically managing your own backups, you’d better make sure that somebody is, i.e. that provisions have been made for backing up your data and that someone is verifying that the backups are actually occuring succesfully and your data is recoverable.

It’s the same on the server or website hosting side as well. If your company has servers, it may sound obvious, but it must be someone’s responsibility to not only ensure the servers are being backed up, but that they are being backed up succesfully. Even if you are using a redundant off-site back-up service, you need to actually verify that it is working and continues to work. And if you are using hosted services, such as hosting a website or email with a company like ours or any other host, it is your responsibility to yourself to both confirm that your hosted data is being backed up and how frequently, and to even go so far as to occasionally request a test restore, just to confirm for yourself that your data really is recoverable.

Bottom line is, if one accepts the need for backups and is willing to take some level of personal responsibility for ensuring that their own  data is safe and recoverable, one can avoid ever having that ‘oh sh-t!’ moment that is what eventually leads everyone who isn’t already to become ‘backup-aware’…

Posted in Tips and Tricks | No Comments »

The Need for Multiple Browsers

Wednesday, January 26th, 2011

I am a loyal Safari user (and Apple fan). Perhaps because I don’t like change and I’ve become accustomed to and comfortable with the look and feel of this browser, I feel no need to switch.

But recently, looking to add a little more excitement and safe adventure to my life, I decided to dabble with a new browser.

For some reason I’ve never liked Firefox. I’m not too sure why, but I don’t choose to use it except for testing purposes. So, I went with Chrome.

But even before I had started this experiment, I would often look down at my dock and wonder why I have three browser icons in there – Safari, Chrome, and Firefox – when I prefer one so highly to all the others.

Today, I got my answer.

While doing local optimization research on a client, I was searching through Google Places and Yahoo! Local. Using Safari as usual, I went to the Bing Local Listing Center and was greeted with this:

Of course. How silly of me to assume that a Microsoft site would support an Apple or Google browser. That would make things too simple.

But that’s not all.

There’s the problem I run into when browsing on my new MacBook Air – when using Safari, I can’t view Flash. So I have Chrome installed for when I visit those types of sites. Which, from an SEO’s point of view, is a problem I should not encounter to begin with because why are people still using Flash on their sites?

And there was Google’s announcement that Chrome will not support H.264 and therefore is trying to make Flash the future of video on the web. And they’ve also pulled Mozilla onto the bandwagon. Another inconvenient battle in the larger war between Apple and Google, as if the Apple and Microsoft feud wasn’t enough.

So I have Safari for general usage and apparently H.264 videos, Chrome for Flash sites and extra plug-ins, and Firefox for testing and those times I need to access certain areas of Bing.

Moral of the story? I need to find a new “Switzerland” browser that will make my web life simpler. And my dock a lot less cluttered.

Posted in SEO, Tips and Tricks | No Comments »

Three Tips To A Successful Web Site Design

Tuesday, March 23rd, 2010

The ever-handy Rule of Thirds

1. Remember the Rule of Thirds.

Ever wonder why TheGridSystem.org is a 12-grid layout? It’s no accident that 12 is a multiple of three.

For a couple of thousand years, the Rule of Thirds, or the Golden Ratio for you mathematically-inclined folks, has worked an aesthetic guideline which states that a given visual space (your web site layout) should be divided horizontally and vertically into thirds, and that important design elements should be placed along the dividing lines, or at their intersections. This, the rule says, provides the most visually appealing layout. Both left- and right-brained figures throughout history, from Euclid to Rothko, have utilized this rule to create ingenious observations and works of art.

The Rule of Thirds is often tagged as the lazy man’s way to lay things out, but that’s really because of its simplicity and universality. In short, the rule works.

Web layouts are a bit trickier since the monitor size and screen resolution on everyone’s individual computers is a variable that the designer cannot control; however, if you stick with non-fluid layouts to constrain the horizontal space of your design, or use percentages in your CSS (a bit trickier, especially if non-scalable images are involved), the Rule of Thirds can provide you with focal points and design layouts that web users find easy to visually digest. Another popular method of utilizing the Rule is to design an “impact area” (often dominated by a “hero graphic”) that is divided in thirds aesthetically and is designed to be the primary focal point for the page. As the user scrolls down, simple 1/3 ratio columns for the text or remaining content can be used. Columns work well in vertically variable workspaces.

2. KISS all those pretty fonts goodbye.

Remember that annoying acronym we all learned in school? Just in case you’ve been living on a deserted island for the last decade or so, KISS stands for “Keep It Simple, Stupid.” And that’s precisely the best way to use type fonts.

I’m not saying you can’t indulge in unique, hand-created typography, or that you can’t mix typefaces, ever. But it must be done with care and artistry. Adding in that really cool font you downloaded for free from the link your nephew in HTML class sent you may not be your best bet for communicating your client’s message.

In fact, communicating your client’s message is the goal of the web site you’re designing. If that message isn’t already contained in the design of the typeface you want to use, skip the typeface and go neutral. Something like Helvetica Bold works incredibly well to get messages across (which is why we’ve seen such a resurgence of it in the self-publishing & blogging trends). The type font does not interfere with the actual words. You have something like 1/gazillionth of a second to get your message across to the web user, so do it the fastest, clearest possible way. If that isn’t with a fancy font that says it all for you, then say it with words, and make the words concise and easy to absorb.

I like to use no more than three fonts (excluding any fancy or unduplicatable logo fonts) in my designs: one main graphic font, one secondary graphic font, and one web-safe HTML font. Save the pretty stuff for non-text graphics.

3. Don’t give up.

Sounds like touchy-feely pandering, right? Well, it’s true.

These days, Photoshop, CSS, and your own artistic talents can pretty much do anything with a layout. Anything you want. If you have an idea in your head that’s just not translating onto a sketch pad or a monitor, keep at it.

Sometimes we all get a little bit too reliant on filters and effects, and when the desired outcome isn’t met with a drop-shadow or a gradient, it’s tempting to settle for “good enough.” Don’t do it. Nobody ever won a design award by settling. No client was ever thrilled to pay for a design that was settled on. And no web user has ever been wowed by “good enough.” If that brush stroke isn’t working for you like it should, go old school: get out your ink, brushes, and watercolor paper and draw precisely the stroke you need. If that typeface just isn’t quite right, pull it into Illustrator and tweak the anchor points until it is. If you think the paper effect you’ve made isn’t convincing, grab a real piece of paper and tear the edges, fold the corners, crumple the middle until it is.

There are also plentiful tutorials and resources on the web for just about any specific effect you’re trying to achieve. Do a Google search and see what you come up with. At worst, you’ll slightly expand your knowledge. At best, you’ll learn skills and tricks that will make your web layouts really shine.

And if all else fails, get up, and take a walk around your neighborhood. Fresh air is a great re-motivator, and inspiration is all around us, all the time.

—

Stephanie Long is an artist and designer with over a decade of web-specific experience currently lending her talents as Creative Director at WebSight Design. She believes that listening to the client is the key to a successful project, and that listening to yourself is the key to a happy life. And she actually likes deadlines — go figure. Stephanie recently got a Twitter account and now feels much younger.

Like this post? You might like this one, too: Design Is Not A Pretty Picture

Posted in Design, Tips and Tricks, WebSight Design | No Comments »

Using the UIImagePickerController in an iPhone OS v2.2.1 app & On A OS v3.0 Device

Monday, August 31st, 2009

So I wrote an iPhone application for a client using v2.2.1 of the iPhone SDK. (The client did not want to go OS v3.0 yet.) I needed to give a user the capability of taking and uploading a picture with the built-in camera or uploading a picture from the photo library on the phone. Seems pretty straightforward so far. Yes? I thought so. It turned out to be pretty tricky but the solution was very simple and was staring me in the face.

The Problem
I had a UIViewController with an UIImageView setup to be used as a container for the selected image. I also had several UIButtons on the page. (One button for calling up the camera. Another button for calling up the photo library, etc…) So what should have happened is that the Camera or photo library UI would display a Modal View window the user instructing them to either take a picture or select a photo from their library. Once they did that, they would be returned to the main view and whatever photo they took or selected would appear in UIImageView as a preview. However, when I was selecting the photo the “editingInfo” NSDictionary object that was supposed to be returned would be there only about 50% of the time. The other 50% it would be returned empty. I double and triple checked my code and it was all correct. Something was zapping my dictionary object and I couldn’t, for the life of me, figure out what it was.

The second part to this problem was that the preview image never appeared whenever the user was grabbing their image from the camera. It worked if the photo library was the source but not if it was the camera. Very, very frustrating.

Here is my original code:

My .h file -

@interface AddPhotoController : UIViewController  {
IBOutlet UIImageView *imageView;
IBOutlet UIButton *snapNewPictureButton;
IBOutlet UIButton *selectFromPhotoLibraryButton;
}
@property (nonatomic, retain) UIImageView *imageView;
@property (nonatomic, retain) UIButton *snapNewPictureButton;
@property (nonatomic, retain) UIButton * selectFromPhotoLibraryButton;

My .m file -

@implementation AddPhotoController
@synthesize imageView, snapNewPictureButton, selectFromPhotoLibraryButton;
- (IBAction)getCameraPicture:(id)sender
{
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
picker.allowsImageEditing = YES;
[self presentModalViewController:picker animated:YES];
[picker release];
}
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(NSDictionary *)editingInfo
{
NSLog(@"Image Meta Info.: %@",editingInfo);

UIImage *selectedImage = image;
imageView.image = selectedImage;
self._havePictureData = YES;
[self.useThisPhotoButton setEnabled:YES];

[picker dismissModalViewControllerAnimated:YES];
}

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
[picker dismissModalViewControllerAnimated:YES];
}

Like I said before, it all seems pretty straightforward. However, there were two things wrong with the above code.
#1. Deprecated Method
The UIImagePickerController method, – imagePickerController:didFinishPickingImage:editingInfo:, is deprecated in v3.0 of the iPhone OS. So even though I built the app using SDK v2.2.1, because the app will be running on 3.0 devices, I needed to use the new and improved method, - imagePickerController:didFinishPickingMediaWithInfo:editingInfo, which contains FIVE pieces of really important information:

  1. UIImagePickerControllerMediaType – Which specifies the type of media that this dictionary contains.
  2. UIImagePickerControllerOriginalImage – Contains the original non-cropped image.
  3. UIImagePickerControllerEditedImage – Contains the user-edited cropped image.
  4. UIImagePickerControllerCropRect – Contains the CGRect that was applied to the original image.
  5. UIImagePickerControllerMediaURL – If the object is a movie, this object contains the URL to be used by the media player.

I simply accessed the “UIImagePickerControllerEditedImage” object from the dictionary and was off to the races.

#2. Dismissing the Modal View
This one was really painful as it was so simple to solve. In order for the UIImageView to be updated correctly, you must dismiss the ImagePicker modal window BEFORE you attempt to update your UIImageView.

As a result of this, here is my updated method call:

- (void) imagePickerController:(UIImagePickerController *)thePicker didFinishPickingMediaWithInfo:(NSDictionary *)imageInfo
{
[thePicker dismissModalViewControllerAnimated:YES];
UIImage *img = [imageInfo objectForKey:@"UIImagePickerControllerEditedImage"];
previewImage.image = nil;
self.previewImage.image = img;
NSData *imageData = UIImagePNGRepresentation(img);
if ([imageData length] > 0) {
[self archivePictureData:imageData];
self._havePictureData = YES;
[self.useThisPhotoButton setEnabled:YES];
}
}

That was it. Hope that was helpful.

Tags: , ,
Posted in Code, Tips and Tricks, iPhone | No Comments »

WebSight Design SEO Success Story – Storage Seeker

Thursday, August 6th, 2009

WebSight Design understands how important search engine optimization (SEO) is to your site. Having bad SEO is like opening your shop in the middle of the desert, and forbidding people from having your phone number and address.  Not much business is going to happen that way!  But buyer beware, there are many different SEO scams out there, some of which could even get your site banned from Google.  When it comes to SEO, you want experts who have years of industry experience and understand best practices.

Recently one of our SEO experts, Alan Bleiweiss, published a case study for StorageSeeker.com on Search Engine Journal, one of the premier SEO blogs online.  In it he shares the methodology he used to get our client to the top of the first page of Google.  Alan and the SEO team at WebSight Design are masters at best-practice SEO techniques and achieving awesome organic search results.

Read the article: Sitemaps and Internal Links – 10000 Page Test

Tags: ,
Posted in Clients, News, SEO, Tips and Tricks, Web Development | No Comments »

Flash vs jQuery – Is it in the budget?

Thursday, July 9th, 2009

In the beginnings of the internet there was only two options for animation on a webpage. The first was animated gifs, an animated gif is essentially a web-based stack a flip cards, stringing together static images to create the illusion of movement.  Unfortunately animated gifs can end up being large files, pixilated and don’t look very sharp.

In 1996, Macromedia released a product named Macromedia Flash.  This was a vector based animation platform that allowed web designers to create animations using tools provided by Macromedia.  This resulted in smaller files with cleaner animations.  The major drawback to this was it required a browser plugin to view and most of the internet wasn’t on board with this yet.

Now days, there are better options then animated gifs when it comes to adding features to your site.  With the new advances in HTML and JavaScript, major browsers vendors are investing huge efforts in improving JavaScript engines in their browsers.  With all of this new attention to JavaScript dozens of frameworks, have popped up as tools for web developers to use.  Common frameworks include jQuery and jQuery UI, YUI, Prototype and Scriptaculous, and the Dojo toolkit.

When it comes to deciding between JavaScript based features and Flash based features in your site there are many different advantages and disadvantages you need to weigh.  JavaScript has several distinct advantages over Flash, first it no plugin is needed because it uses open Web technologies like Document Object Model, HTML and CSS.  Secondly, it is much easier to make animations that are accessible and 508 compliant and JavaScript is also viewable on many mobile devices, unlike Flash applications.

Although, jQuery/ JavaScript cannot be used for all animations, when it comes to certain types there are things that jQuery just can’t do.  It cannot handle 3D animation, audio/video players or fine user controlled animation.  When using JQuery you are also at the mercy of user end controls such as disabling JavaScript in a browser and resized text.

Is it in the budget?

When considering whether to use a jQuery or Flash based solution you are also going to want to look at the development and maintenance hours versus what the features are that you are looking for in your project.

JQuery can be used for almost all modules for a standard website, including scrolling images for the banner and photo galleries, interactive menus, form validation, and pop-ups and tool tips.  Because most of these tools are available as JavaScript frameworks this can end up keeping the development costs of your site down.  All of these features can be integrated with the CMS and dynamically updateable. Changes to the design of jQuery features most front end designers can handle and this will lower any maintenance costs you may incur.

A Flash application encapsulates all the code in the application itself.  First, this means creating the application require the use a specialized Flash developer, but this can be to your advantage if you are looking for features to your site such as audio/video player or 3D animation.  If you are looking to have complex multi-media in your project, you are going to have a higher development cost.  Changes and updates to Flash content can be executed via updateable XML files, but if you want to change the design of the application you will need to use a Flash developer with can cost more in maintenance hours.

What this decision really comes down to is asking yourself what are the features that you need.  Much of the “flash” in Flash can be mimicked at a lower cost with jQuery, but if your site is multi-media heavy; your best option would be to go with the Flash application for the ease of the end user and yourself.

Tags: , ,
Posted in Design, Tips and Tricks | No Comments »

« Older Entries