PRESS CMD + SHIFT + CONTROL + 4

That’s it! Now the image is in your clipboard, ready to paste into whatever program you choose. (cmd + v) Aaaaah no more desktop waste, no more arbitrary ‘Picture-1.png’ files…

Oh, You Don’t Like The default .png Image Format? Change it!

Here’s how to change the default format that Mac uses for screenshots:

Open Terminal and type:
defaults write com.apple.screencapture type [image-type]
killall SystemUIServer
Just replace ‘image-type’ with your preferred image format.
Types that work are:

• bmp
• pdf
• gif
• jpg
• png
• tiff

That’s all for now…I found this to be incredibly useful since I take a zillion screen shots every day…I hope you get some use out of it!

Where to Start When Troubleshooting Web Pages

The simplest way to troubleshoot the code web pages are built on is to make sure it conforms to the W3C standard. While there is some debate about whether having pages ‘validate’ or not is really necessary, there is no doubt that the validator can find mistakes in both HTML and CSS, which can save you hours of searching for bone-headed coding errors. The W3C Validator should be your first stop on the road to troubleshooting code. If the site is live on the web, just paste the page link right into the validator, or if it is not live, just copy & paste the generated HTML right into the validator’s ‘Direct Input’ form. It will scrutinize your HTML and find any non-standard conventions, mistakes, or just typos, etc…

Use the Custom Options

A handy feature of the validator is the ‘More Options’ section – this allows you to fine-tune the results for your needs. Checking the ‘Show Outline’ box will give you an overview of the page’s structure to make sure you are using H1, H2, H3 tags correctly. This is a big help for SEO. The ‘Show Source’ option allows you to see the errors right in your original code. It’s like having a paper graded by your elementary school teacher!

The ‘Verbose Output’ option will give more details than you probably wanted, but the suggestions are helpful and you might learn something new.

Don’t Forget the CSS Stylesheets

The other important part of the validation system allows you to check your CSS code. It is very easy to overlook some of the obscure syntax (or even the not so obscure!) when writing stylesheets. Just paste a link, upload a file, or copy the code straight in – the validator will do the rest and let you know if there are any mistakes. It will also show any warnings for non-standard code.

Just like the HTML validator, the CSS checker gives you options, even allowing you to validate against different versions of CSS – VERY helpful if you are writing mobile apps or web pages. Clicking the ‘More Options’ link will open a little dialog with the following dropdown for ‘Profile’:

The ‘Medium’ selections will even allow you to validate based on the intended viewing medium…screen, projector, print, braille, handheld, etc… Pretty cool!

Save Time and Just Check It!

It seems like a no-brainer, right? Just run your code through the W3C service and get quick, accurate results, which will save time and money. Best of all, it is free…and won’t confiscate your chewing gum.

HTML Validation

CSS Validator

Choosing The Best Technology

Instead of arguing over which technology will ultimately win the war, I’d rather focus on choosing the right one for a given project. Sure, HTML5 is new and has a long way to go before it catches up with Flash, but the future is promising thanks to aggressive developer efforts. Plus, HTML5 offers some things that Flash does not, and it is an open language – not a proprietary technology whose future is determined by a big company. So, How do you know which is right for your project?

HTML5 Compatibility

The main hurdle we face today with HTML5 is browser compatibility. Firefox, Chrome, Opera, and Safari all have varying levels of support, while IE trails far behind. Add to that the fact that Internet Explorer does not have an aggressive upgrade approach like Firefox, which (constantly) prompts it’s users to upgrade with each new release. IE is also widely used in the corporate world, where a browser update can mean broken intranets, web applications and other related mayhem, so full compatibility is still a couple of years away at the earliest.

Breaking Down the Issues

A recent project inquiry prompted me to face the HTML5/Flash topic head on. If you take some of the big issues with each technology and break them down, you can narrow your choices down quite easily. Does the content need to display on iPad or iPhone? Use HTML5. Is SEO a concern? Use HTML5. Sure, there are some workarounds for SEO in Flash, but let’s not get too far off. Is the animation and multimedia very complex? Use Flash. Sorry HTML5 aficionados, but HTML5 just isn’t there yet. Not even close really. No doubt this will change over time, with the HTML5 language gaining traction quickly.

For Now, Use Either As Needed

Flash isn’t going away any time soon, and still reigns supreme for complex animations and interactivity…just not on iPads or iPhones! There’s always Apple’s XCode if you need a rich graphic/multimedia app for those platforms, but for the web we are ‘stuck’ with HTML5. I say pick the one that works best for the job and worry about the battle between technologies another day! I’m off to learn some more HTML5 coding…

Whether it’s a corporate intranet or public-facing website, businesses often under-utilize the power of the web. Once their site is up and running with the bare-necessities, they usually leave it untouched for months or even years, much to the detriment of the site itself. Going beyond the basic ‘About Us’ and ‘Contact’ pages can make a site more engaging for visitors and more productive for a company and it’s employees.

What is Possible With Web Apps?

From the most basic contact form to elaborate accounting systems, today’s web application architectures can support complex programming and database functionality, making modern web applications behave similarly to desktop apps like Word or Excel. Job applications, banking services, appointment setting apps and more can be built to live right on a web server, available to users with no installation or complicated software update processes. Web apps can also be designed for compatibility with any type of computer, be it PC or Mac. Why limit your users based on the hardware they choose?

Adapting Desktop Applications to Web Apps

On a past project, I was tasked with translating an existing support desk ticket system to a web-based application. The existing program needed to be installed on each user’s PC, requiring valuable support time from the help desk, as well as compatibility troubleshooting for each new operating system change that occurred, making the desktop app more trouble than it was worth. Moving to a web-based system meant that software updates could be done once on the server and would be instantly ‘rolled out’ to all users. In addition, users could access the program from any computer with internet access, whether it was from home via a VPN (virtual private network) or via the corporate office computers.

Security For Web Apps

A well-designed application can utilize the same security technology as your bank or a government website, with the proper security measures built-in to ensure the data is safe from hackers or other prying eyes. Secure logins and encrypted data transfers make sure the database and user info are protected from attacks, while giving full access to the app’s users where needed. Modern browsers support these technologies better than ever before, making them a solid platform for secure web-based business software.

Informing Business Owners of the Options Available

As mentioned before, most sites stop at the basic static pages, never taking advantage of the myriad web application possibilities available. A web project manager or developer should help the company identify processes that could benefit from a software solution. Many day-to-day functions could be streamlined to save hundreds or thousands of man-hours, thus saving the company money. Private intranet sites and internal applications are more and more common these days for large companies, but can also be utilized by small businesses trying to cut down on costs by reducing tedious jobs or recurring tasks that would be well-suited to a web app. Some Examples are: appointment setting programs, calendar apps, order taking apps, custom contact or information request forms, accounting software, or employee scheduling apps. Mobile web applications are another entirely new frontier, offering portable functionality with the same access as desktop apps with a simple, mobile-friendly interface. The possibilities are truly endless, and in many cases the app itself can help to generate new business, by engaging the customer in new ways.

Leverage the Web’s Power and Reap the Rewards

On your next web project, think beyond the same old static content and find some ways to incorporate web software solutions that help increase your productivity. Chances are there are existing business processes that would be well-suited to a browser-based program, or new creative solutions that could be introduced that will enhance the business and save valuable employee time.

Contact Jgm3 today for a free web app consultation

In a (misguided) attempt to thwart online piracy, our friends on the Hill have come up with a frighteningly overreaching bill that will give content providers and their legal eagles far too much control over what goes on the web. I don’t need to explain the whole bill – you can read all about it here. I just want to pile on the opposition to it.

SOPA + PIPA = Slippery Slope?

If this bill passes, the legal fiasco(s) that will ensue will be such a mess that the internet as we know it will slide into the abyss of censorship, financial warfare and corporate control. In other words, once things start sliding down the slope, the mess will be far-reaching and can’t help but hurt us in ways that don’t really help the situation they are ‘trying’ to fix (piracy/intellectual property rights,etc…)

They Just Haven’t Caught Up Yet

Even With all of the intellectual firepower at hand on this globe of ours, the entertainment industry just has not been able to figure out a way to protect their goodies, which has created a divide in the world of finance and the world of entertainment. There’s an ‘old guard’ and a new one, which boils down to one side has embraced the new economy and ‘gets it’, while the other side is so bogged down in the old ways and their corporate minutia, they can’t get a foothold on this new system. So what do they do? Of course, create ridiculous legal spiderwebs to catch and sue the violators…which will affect us all in the end.

Don’t support it, tell your rep you hate SOPA/PIPA and tell your friends who don’t know about it. Awareness is an amazing tool when used correctly.

Gone are the days of randomly guessing what terms people will search for on the web. These days competition is heavy to get on top of the search engines, and the only way to compete is to know your stuff. Instead of picking terms out of thin air and peppering your site with useless phrases you ‘think’ will get you found, there are some much more strategic ways to approach the issue.

Don’t Guess Which Phrases Will Rank Highly

Let’s say your business is Auto Glass & Windshield Repair. Certainly you can fill your site with the terms related to ‘Auto Glass’ and ‘Windshield Repair’, which are obvious terms, and also high-competition terms. Some people might just search for ‘chip repair’ or ‘cracked windshield repair’, along with the city or county name where they are located. Google has become pretty specific in how it handles phrases and the order of words within them, to the point where getting the right combination of terms can be the difference between page 1 and page 2 of the search results.

Keyword Tools Focus Your Efforts

There are tools we use to discover the appropriate terms and variations on them which will bring the most traffic. Google even provides it’s own keyword tool which takes some learning to really use properly, but provides valuable insight into what phrases people are really using. The info can be interpreted in many ways, so it is definitely a good idea to have an expert assist or take the time to study the ins & outs of the system. (I can recommend just such an expert!)

SEO Campaigns Take Time

Business owners want to see results fast – any business expense should have tangible ROI that returns real results in a reasonable amount of time. Instead of randomly choosing search terms and hoping your site will jump to the top of Google, it pays (pun intended) to learn the ropes or hire an expert to do the legwork when it comes to keyword research and implementation. Even with the right keywords, there are other factors to consider, such as avoiding ‘spammy’ usage of terms, ‘keyword stuffing’ which flags Google that you’re gaming the system, etc… Many neophite SEO consultants will jump in a little too heavy, going overboard with adding keywords in ways that can actually hurt the site’s ranking. Dirty SEO tricks are no longer tolerated by search engines…they are getting too smart to be fooled easily!

Keep things Fresh

Once you have established good SEO habits and have some targeted phrases, be sure to keep them updated – don’t think you can ‘set and forget’ with web content. The search engines are smart enough to know when your content has changed, and they give more importance to new content in most cases. There is plenty of voodoo involved as to how this really works, and is a subject for another article…but for now, just remember to keep things from getting stale – the competition may just be a little bit fresher!

Contact Jgm3 today for a free SEO consultation

Have Sketchbook, Will Travel

Buy yourself a sketchpad and a couple of pencils or pens…whatever is your medium of choice, and keep them in the car or next to your desk – and get in the habit of using them! Sure, there are millions of apps and note-taking devices for your phone, laptop, iPad, etc…but there is something visceral about the act of scraping a pen across paper that makes it more fun. Maybe I’m just old-fashioned, but for me, writing and drawing will never be replaced by voice recorders or tablets and other digital doodling devices. They even have pens that record audio…talk about redundant technology! The simple sketchbook will go anywhere, travel well and doesn’t require batteries. You don’t even have to turn it off on a plane.

What if I Suck At Drawing?

Most kids love to draw—that is why crayons are marketed to them—they have no inhibitions about drawing or painting and just dive into it, without fear. Adults can learn a lot from this, as we tend to ‘grow out’ of art, which is a shame. There are hardly any efforts made to market the practice of art to adults, and when asked to draw something most adults just shy away “Oh I can’t draw at all!” There are plenty of great drawing books on the subject, which are targeted specifically at people who left drawing behind in their younger days, or stopped at lollipop trees and stick figures.

All in the Eyes

If there is any one ‘secret’ to sketching or drawing well, it’s the fact that the skill is more about ‘seeing’, not penmanship. It has been said that if you can write your name neatly, you probably have the technical skill to draw. It has to do with how you observe shapes and spatial relationships, as well as light and dark values. Other than that, it’s practice. Learning ‘How to see’ is the real secret. And it won’t just help your sketching ability—it can make you a better conceptual thinker, designer, and generally more creative. How? Because the act of drawing engages the senses in a way that most people don’t experience in day-to-day life. It forces us to think in dimensional, spatial, aesthetic ways—concepts that have been shelved for most adults, but usually nurtured in children.

Just Let It Fly

So grab a sketchbook and a scribbling device and see what happens! Most importantly, don’t be self-conscious or timid about what you create – just let it fly and have fun with it.

The Online Gauge of Trust

When a potential customer first visits a site, they start with a clean slate of trust—a clear, unclouded opinion of this world they have just entered. As they take in the information and graphic treatments that make up a site, they judge the site's credibility by the presentation of info, imagery, and general usability. If the site is for a photography business and the photo work is second rate, the visitor is immediately going to lose some of that trust. Likewise if the site is for a copywriter and there are misspellings or bad grammar on the site, there is an instant drop in that gauge of credibility. And all it takes is one tiny slip!

Watch Those Pixels!

The human eye has an incredible ability to detect spatial alignment. Even the tiniest inconsistencies in typography, graphic elements, or form elements will be noticed by the observant web surfer. Setting proper CSS margins, padding, floats, and line heights are crucial for a designer, not just because it ‘looks pretty’, but because when things are not well styled, the business takes the hit, not the designer.

As I mentioned, a site visitor shows up with an unbiased opinion of the business behind the site—after a bit of clicking around, how much of that opinion is still positive? How many times did they think “Hmmm…that looks a little Off…”
Each little moment of “hmmmm…” is a ding for the business.

What's wrong with this form submit button? Even a quick glance and you can see that the 'Password' label is too high in relation to the field, the 'sign up' text is too far down within the button's border, and the button itself is not lined up with the password field above. In other words, a big mess! And that is only subtle alignment issues. Poor grammar and misspelled words look even worse, lowering that gauge quickly.

Spending the extra time it takes to polish up every piece of type, layout, or imagery on a website can mean the difference between new customers and lost ones. Don't let tiny pixels make a giant dent in your bottom line!

What is Involved in a Website Plan?

Unless you routinely manage projects and have that experience under your belt, planning even a small project can be a dreaded exercise. There are two sides to this:

1. 1. The Client
2. 2. The Company or Individual Building the Site

In many cases, the client is a small business owner with limited time for planning web projects, since they are obviously running a business. That is why they hired a developer, right? They want to be led through the process by an expert with experience. The developer's job is to make sure things are planned and executed correctly and delivered on time.

The Basic Site Plan

• Set Goals – What should the site offer?
• Set Timelines – When should things get done?
• Assign Responsibilities – Who needs to deliver what and when?
• Test & Launch the Site

Set Goals

At the onset of a web project, the first goal is usually very simple – the client needs a web presence, or needs to revise their current one. Beyond that, there are many specific issues that need to be decided as far as site design, layout, navigation, technology utilized, etc… All of these decisions make up the site's overall focus. The more specific you can get here the better, since a loose, unfocused set of goals can lead to never-ending time lines, indecision, and ultimately a weak end-result.

Some simple ways to set goals can vary from drawing out a basic plan on paper to using some of the free online tools like Mockflow or Balsamiq, to just using your favorite software like Photoshop, Illustrator, or Visio. Once you have a visual reference for how the site is structured, you can start to see how things are organized and if there are potential problems with navigation or future expansion. Once you have an overview of what the site is supposed to do and how you want to lay things out, you need some deadlines for getting things done.

Set Time Lines – Solid, But Flexible

The hardest aspect of many site projects is setting a solid time frame to complete and launch the site. The client has a business to run and is often unavailable when decisions or input are needed, and technical issues can arise that hold up the developer from completing tasks on time. Folks with experience planning projects know that a too-rigid time line is a bad idea waiting to happen, and factoring in some cushion is a skill learned only from that experience.

A good rule of thumb is to add 20% to a project's deadline, assuming that things will go well. It takes a really honest look at the possible delays and complications, which go with every project. Just make sure there is enough elasticity in the plan to compensate for these delays.

Responsibilities – Define Who Delivers What

This one should be fairly easy to define: Who is responsible for providing each piece of content or info? Start with a list of deliverables and assign them to the appropriate folks. Sure, it can get more complicated than that, but even for small projects this can eliminate confusion and unintended delays because someone was waiting for something you didn't know you were delivering! In the planning stages, have each party sign off on the list to make sure there are no issues that may hold the process up.

Testing – Websites Just Work, Right? Right…

Oh, how we wish that were true! Testing and fixing errors can actually be the longest phase of a web project. Things like browser compatibility, coding errors, typos, client change requests, and poorly planned web applications will all factor into the testing and quality assurance phase. This can be tough when the client and developer both have small teams and little time to devote to testing, but needs to be a priority with a dedicated time line. If you see a project plan with the building phase quickly followed by the launch, with no testing factored in, chances are someone forgot this most important of all pieces.

Ideally, testing a piece of software or a website should be done by a team of professional testers, who have a list of activities to carry out, while being observed by a user testing expert. This obviously is not always possible, or within budget. So, you often have to get creative with your test methods. You might recruit your relatives…your kids, your friends or co-workers to try out the app or site, giving you feedback where needed. Sometimes an outside party can bring a perspective you would not have thought about, spawning new ways to solve a tricky problem or finding issues that an expert user would not find.

This would be a good time to point out that expert users do not make great testers. Why? Because they know how to get around better than novice users…they are familiar with all of the common conventions with apps and websites, and don't get tripped up as easily as a novice user. The site or application needs to be as user-friendly as possible, with the novice user being the target user. You want people to say 'It's so simple even a _______ can use it!'. A good plan for testing and user acceptance will go a long way towards earning you that 'accolade'.

Embrace the Plan, Check Back Often

All of this planning and effort can get you started on the right track, but it is also important to refer back to the plan and make sure things are staying on track and the goals are being met. Don't be afraid to revise the plan as well, since unintended circumstances can always crop up, requiring a change of thought, new addition, or modification. Maybe the client decides to scrap the contact form and just wants an email address, or perhaps they want to add a mobile formatted site, or change the look & feel. Get used to incorporating any changes into the original plan and adjusting time lines as needed…the fewer surprises the better!

The New Web Designer

I like to think of the term 'Designer' as more than just a graphic designer. The design of a site encompasses all of the content, not just imagery. A well-designed site has a clean layout, organized content, good font choice, and is easily maintained. Thus, a designer needs to also be a planner, organizer, and (how terrible!) have an understanding of the code.

Focus on Site Content

Modern web design has come a long way from 2 minute Flash intros, scrolling banner text, iFrames and other hideous design trends that hinder site performance. Today's designs focus on user experience, proper information display, navigational ease, and cross-browser compatibility. With the mobile device revolution and popularity of tablets like Xoom and iPad, sites are focusing more on simplicity and speed, with designs that let the content shine instead of blinding the user with gaudy graphic novelty.

How to Make Your Web Design Better

Instead of starting with the colors and size of the logo, a site should be planned first around the presentation of content and ease of use. Map out the placement of content on a high level – Where does the contact info go? Where does the news section go? Think about your visitors – what are they looking for? Narrow that list down to just a few things…take the top 3 things a user will want to find and make sure those things are dead-simple to locate. Even a split-second of indecision can mean a lost visit. Think hard before implementing that fancy navigation system – is it adding to the user experience or does it just look cool?

Once the few primary content items have a home, you can determine how the rest of the site will flow. If you have a blog or news section, make sure the older articles are search-able and categorized. Just because it isn't the latest article doesn't mean someone out there has seen it. While you are at it, make sure the content is easily index-able by search engines. Those old articles can still help your Google rank. Most CMS systems have built-in search functions that allow users to find articles…yet another reason to use them.

Good Designers Always Think Ahead

It is important to make sure your site has room to grow. If your site continuously adds content, (which it should!) where will it go? Is there room to expand or is the layout so fixed graphically that any changes are a massive headache and require a committee to solve? Taking on the mentality that EVERYTHING on the site may expand is a good strategy. Most modern design techniques are rooted in the concepts of fluidity, adaptation, flexibility, and simplicity. Your site should deliver it's content to the user in a usable way no matter what browser or device they are using.