SMICK.NET | Website of Mike Smick Graphics and Web Developer

My thoughts on website animations

Everyone seems to want animations these days. And they usually don’t realize how much more expensive it can get. Animation has its place on the web and finally we are creating experiences that we have dreamed of being able to do. But at the same time, I can’t help run through my mind a series of questions when animation starts getting hairy as part of a project where it has no business being, whether for ROI or being in the budget in the first place. The biggest question with animation is, if it’s easy enough to be cheap, is it worth doing or has everyone already seen it, making it just white noise.

Animating-stuff-on-your-website

Upon multiple viewings, does it become something you’re just waiting for?

Is it slowing performance on any device?

Does it make editing your site more difficult?

Does your audience care that something moves around?

The sun will eventually burn out taking all of humanity with it. Knowing this, will you still care about spending money on the animation?

Is it a commonly used trendy convention (played out?)

Is it your idea, or was it somebody selling it to you?

Does it likely score you more business?

Does it pull the eyes away from other important messages?

Does it make your offering look more expensive?

Does it help get point across?

Is it impressive (to people that actually matter)?

February 16, 2014 at 7:55 am | design, graphics, webdev | No comment

Ways of organizing your CSS to achieve flow

Could you be writing your CSS better? I’ve been thinking about my project flow lately and noticed there’s a lot less flow and a lot more rework than there should be. I think that’s because I’m always trying new things. But I suffer the consequences of not establishing consistency and clarity. In this post, I’m talking specifically about how you wire up your main CSS file. When I talk about organization here, I’m talking about categories inside that css, so it’s easy to traverse. I firmly believe it can help speed up development and improve everything.

CSS Comments

This is how you can create categories. Write CSS comments out so they visually look like category headers.  Example:

/* ========   This is a Category Separator CSS comment   ========= */

Everything under this comment would be idenfied with it as a category.  I’ve made a lot of variations on this type of header. I’m not sure what  you like but using special characters appears to work well. I like Equals signs because they create a thick obvious border.

Categorize by function

What are the bits of CSS affecting?  Consider that if you are covering font changes, you can group all your typography under one header. So when you make a font change, presumably that section will be easy to find and less stuff to read through. Same for layout. Are you changing the padding for one or more divs? Put it under the Layout / Div category.

/* ========   Reset (if applicable)   ========= */

/* ========   Colors   ========= */

/* ========   Typography   ========= */

/* ========   Layout / Div   ========= */

/* ========   Misc classes   ========= */

Categorize by task / override

CSS means Cascading Style Sheet. The cascade is like the waterfall down a multi-level rock formation. The code described at the top, falls all the way down. So the global rules you put at the top. Underneath that, you continue with the exceptions to the rule, going from genral to specific. You can think of this and how your project is built. The template will have some standard things, and trickle down to the very specific. Some changes might only occur on specific pages, while others only occur in a single spot on one page and never again.

/* ========  Base (styles every page)   ========= */

Things like the menu bar, the header maybe (unless it will change in appearance leveraging CSS)

/* ========   Site Section Level changes   ========= */

/* ========   Specific Page Styles or Overrides   ========= */

/* ========   Occasional Styling   ========= */

/* ========   Minutiae (could almost be used inline but decidedly better here)   ========= */

Categorize By Visual Areas

This one is really common for me, but I grow it organically for each project rather than commit to specific labels each time. I’m not necessarily sure how not to do this in some respect on projects because my brain thinks this way.

/* ========  Body  (A few type or color global values )  ========= */

/* ========  Header  ========= */

/* ========  Navigation Menu  ========= */

/* ========  Content / Main  ========= */

/* ========  Gallery  ========= */

/* ========  Sidebar  ========= */

/* ========  Footer  ========= */

/* ========  Misc. or further addendum ========= */

I just want to point out this last Misc. section I also would add things like classes that the WYSIWYG editor uses.

Collaborating with Others

If you work alone, you benefit from being able to drive standards 100%. If you work with others, you want to best conform but also to discuss and agree to ways to do projects. Mostly it will come down to cross-training.  A lot of developers do quick and dirty CSS while fixing the widget they are working on and unfortunately never go back to clean it up.  This behavior will go on and it just needs to be repeatedly trained.  Ongoing project improvements and maintenance require some attention to details.  When you put things in categories a benefit you’ll find is eliminating redundancy. When everyone is referring to the same codeblock of CSS for edits to the base or header or typography, there’s a good chance they will see the previous entry for that class so it won’t be repeated.

When you work in a version control system you can see who added what to the code, but whether or not that’s the case, consider this. Some changes might be best identified near the code itself.  Let me give a quick scenario.  Let’s say you are a 3rd party agency taking on a new section of the site.  Your front end dev may not have a couple days to get a full understanding of the site, and all the current or outdated pages under the hood. Your task might be to build a certain landing page page in the CMS. If you have say 4 hours to work on something while the main developer is on leave. Instead of meddling with the code, create your own section.  If it happens to break some outdated legal page, at least your code is easy to find.

/* ========  Edits by Open Ground Co (for x landing page 11.30.2013) ========= */

Another variation on this, if you happen to need to make a fix to an existing line, consider a quick comment after it:

.classname {padding-left:-1.2em; }  /* == OG edit 11.30.2013 == */

These variations and tips are attempting to say the same thing: “Begin with the end in mind.”

December 1, 2013 at 12:36 pm | computers, CSS, design, freelance, Front End Development, graphics, webdev | No comment

How to pronounce GIF – a protest

Just learned the creator of the GIF image format is surprised there’s still a debate on how to pronounce GIF.  The maker of the GIF file says it’s supposed to be a soft G and sound like J. Well, I’m not doing that ever. Here’s why:

  1. It’s an acronym so making a word out of it is a fun exercise, but it doesn’t carry a lot of weight. But if it did…
  2. Through reasoning, we can deduce a logical hard G for the pronunciation because the first letter in the acronym stands for “Graphic” or “Graphical” which, thank you, is a Hard G.
  3. If we must make a word out of it, sorry but the word Gift is a lot older and has a convention we follow which is, you guested it, a Hard G.
  4. There’s a peanut butter brand called JIF and that is distracting.  I’m trying to show you how to export a file and then you’re off thinking about peanut butter. No.
  5. One guy doesn’t decide how a language evolves. Social groups and culture evolves it. Got a problem with that? Take a salt tablet. Hard G.

SamuelJackson

May 22, 2013 at 1:36 am | graphics, nothing, rants | No comment

The Forgotten Adobe Customers

Adobe has announced their move to Creative Cloud this week.  And though it seems like a great deal to some, I’m beyond skeptical and downright disappointed. For one thing, it’s not really a great price as far as cloud storage goes. To get 20 GB of space, you can spend a heck of a lot less on your own hosting where a much smaller number of people will be hitting your own server every day. So your throughput will be better elsewhere for less money.

I’m sure Adobe knows who their customers are right? But I think they will find after a while, these forgotten user-types will have stopped buying the software and Adobe is going to miss it.  Will somehow the funds recovered from piracy make up for it?  Maybe. Or will the pirates just continue to pirate the best version out there?

The Administrative Assistant

This user is employed at small or medium business, like an architectural firm and the boxed Creative Suite Standard was purchased for them for occasional uses such as photo work, newsletter development, presentation graphics. The facts about this user are interesting. They don’t actually need the Creative Suite. It’s way too powerful for the kind of superficial edits that it will be used for. Lucky for Adobe though, the company boss purchases the license for the potential use by the employee. And it’s convenient for them to have the software around.  They get it installed and don’t have to think about it much.

The IT Guy with a Creative itch

This is a very common archetype if you will. The IT guy might own his own copy or convinced the boss to purchase the extra license.  The IT guy bangs on the companies fledgling website using Dreamweaver and a little Photoshop. Of course his graphics always display out of proportion, but things work. Maybe he’s aware of other options for web development, but this is the tool he knows is popular and was easy enough to get started and find tutorials. . Again seeing the potential of it’s use over time, it was a purchase made to get tasks done and scratch that itch.

The Retiree Hobbyist

He or she has graduated their careers and maybe is moving into a new hobby or startup doing weddings or nature videography / photography, and to maybe play around with music a bit.  Sure their Windows computer has the movie maker software on it but they never bothered to notice.  The Video Collection was a steep purchase, but they were sure they will have EVERYTHING they need to get things done. Because they often get stuck on things, weeks or months will go by on projects because they aren’t sure how to complete various tasks. They also have the patience and available time to return to something completed and rework it after they’ve learned a new technique.

The Disenchanted Freelancer

This person is me.  Not on the continuous upgrade path, but willing to spend on the new Adobe Collection every odd or even version to stay up to date with colleagues and vendors. Things are expensive to stay current but on the plus side, a having those older boxed versions to outfit a second computer for an intern or collaborator, or to make an aging machine capable has been great.  As far a loyalty goes, a freelancer is about the best Adobe can hope for. Despite being more than capable of learning other tools, the freelancer uses Adobe because it’s convenient. The freelancer owns his / her own company name. They like having their own systems in place. They like not having a boss to tell them what to spend time and energy on.

All of these users are valuable customers and revenue for Adobe. And yet all of them represent a thin thread, easily broken.  That thin thread for many was the creative potential that owning your own software brings. Sure they won’t be able to crank out webpages, or videos or right away, but if they can sit on it for a while, let the ideas digest and come to fruition.  Then they can make something special or useful.  Or they won’t. But the point was the potential. With Creative Cloud, you remove that potential.

The disenchanted freelancer will sign on for a month when absolutely necessary to fix up a problem in an incompatible proprietary file, but otherwise, there’s no benefit to paying to borrow software for many of us.  Ask the IT guy whether he’s cool with yet another subscription. I mean he only pays for TV, ESPN, HBO, Family Cell Phone plan, kids hockey, Netflix.  Will the boss pay for a creative cloud subscription for the admin assistant or will he figure out that Office has Publisher and she can use Picasa or some online photo editor to handle the image crops. And the Retiree? Good luck getting his money now on something he’s only using 11% of realistically.

I’m not sure presenting people with the decision every month or even every year if they want to keep using the Creative Cloud is a good idea.  Because it’s a reminder of whether or not it’s worth their time or money. Whereas before somebody only had to worry about if they were living up to their creative potential.

May 9, 2013 at 10:45 am | computers, design, freelance, graphics, publishing, rants | No comment

Sketching Fashionable

Yet another terrific gem from over at the Internet archives (archive.org).

Check out “Costume Design and Illustration” from 1918. Like many others of the fantastic collection of public domain texts, you can read online or download in all possible formats.

I also just discovered tonight that the online reader app works really well on the iPad.

20130308-014838.jpg

March 8, 2013 at 1:38 am | books, design, general, graphics, learning | No comment

A clever visual mystery for a Facebook promotion

WOWIO books is an online ebook marketplace.  I stumbled across their site today as one often does in this world. What I encountered was so simple and clever it has to be shared.

One of their home feature banners offers a free Ebook, but you don’t know what it is, just that it’s a graphic novel. Of course you want to click to find out, they grab you with the mystery and the FREE, which is a real whammy.

Next you are transported to their facebook page. Actually they tell you this will happen, but you didn’t read that because you were too busy imagining the free awesomeness of a mystery revealed.

Then very clear instructions. You know you want the ebook, just press Like, as in become a Facebook fan.

Then a nice satisfying landing page to download the ebook. All within the WOWIO Facebook page in a customer “Offer” tab.

Fun, clever and a great use of visuals for a simple promotion.  The power of ebooks is that they are both flexible and attractive like that. They serve as a great free gift, because they have an emotional value to them. I feel bad ruining the mystery of this offer, but it’s worth it to point out what you can do with just a few images.

Nice job WOWIO. I’m your newest Facebook fan or “Likeee” or whatever you might call it.

October 25, 2010 at 9:43 pm | books, games, graphics, inspiration, interesting, media, publishing, webdev | 1 comment

Interesting possibilities in Photoshop CS5

I remember getting pretty excited the first time I saw the Seam Carving technology from a SIGGRAPH demonstration, which eventually made it’s way into Photoshop, The GIMP and Xara Xtreme.  That seemed to happen quickly, and I’m certain because the code was made open to a certain extent. A custom app was built, a plugin for the Gimp was great.  Xara and Photoshop integrated Seam carving really well. And it works. It’s actually one of my best new tools I can make use of probably once for every web project I do.

Now things are evolving even more with what may be upcoming features that will help with fixing and doctoring photos.  I don’t find doctoring photos that enjoyable really.  I love helping customers, but I wish most of this wasn’t necessary.  That being the case, if you have to doctor a photo, it might as well be pretty easy to do.

Here is a video of Improved Seam Carving and PatchMatch, both of which were part of an Adobe/Princeton/University of Washington project.  To my knowledge, nobody said explicitly this WILL be in Photoshop CS5. But it is shown operating in the Photoshop interface and take from it what you will. As an aside, I like this website I discovered.  CS5.org. Despite it’s authoritative look, it appears not to be an Adobe site. Granted I could be wrong, but it’s showing Youtube Videos rather than using an Adobe player, and it’s showing a white paper using Scribd rather than an Acrobat-esque flash paper embedded PDF viewer.  Still that doesn’t mean it’s not all great information.

Adobe does have a video from a few members of their user experience UX design team re-published on the CS5.org website.  It features some discussion and examples of multi-touch and how they can leverage it for their graphics creation tools.

October 4, 2009 at 5:10 am | computers, design, graphics, media | No comment

Xara Xtreme Pro 5.1 graphics software

If you’re into the digital graphics for a hobby or work, you’ve been told that Adobe Photoshop and Illustrator are the industry standard. This is certainly true, but the “standard” doesn’t mean better in all aspects. Xara Xtreme is one of the few lesser-known alternatives that in some areas measurably outperforms Adobe’s offerings. I’ve been using it for several years. I fell in love when I saw the speed and clean interface of the program. Multiple updates over the past couple years have made it even more flexible. I always enjoy telling people about it because it’s simplicity and performance is surprising.

Some notable favorite features for me including some new ones out with the latest 5.1 version:

There are limits to Xara’s superiority. Looking at Illustrator, you can tell it has a great deal more features, just look at Illustrator’s Effect menu. But if I had Xara when I was learning vector graphics instead of Illustrator or Freehand, I think I would have enjoyed the process much more. I also believe if Adobe Flash had Xara’s tools for vector drawing it would also be a better program by far. I’ve often composed in Xara just to export to Flash in order to bypass some of Flash’s clumsiness. In short, I want Adobe to be more like Xara, just as much as I’d like a few things in Xara that Adobe Illustrator, Photoshop and even the new and free Inkscape has. I have other “underdog” programs that I swear by, but this is the big one that I happily pay for.

Downsides of Xara, first it’s only on Windows. Linux users can use an older open source free version of Xtreme, but is hasn’t been feature-developed since 2007. This free version is fast and certainly good, but it’s missing some terrific features that Windows has. Mac has no Xara and I wish it did.  Also there are some file import issues I’ve found. Fore example, sharing SVG and EPS files has given me plenty of frowns. Sure it’s not a big deal when you control everything, but when you need to collaborate with others, or send files to print, you need reliability. Also despite the type features having massive improvements over the past few years, you will find InDesign a little better for you for composing most longer documents. I could think of a few more issues, but I could dig for more in any software.

Xara Xtreme has become over the years a must-have tool. Adobe users have become converts plenty of times, after being hypnotized by its beauty.  Even though I really love most of Adobe’s collection, Xara does certain tasks better and faster. You’ll use it for full graphic and page creation, enjoy it’s speed for mockups and maybe as a thinking tool before you’d open anything else. I love working with objects, breaking them apart, modifying shapes. The projects I’ve been able to do solely in Xara such as illustrations and diagrams, I’ve nearly always completed more efficiently than I could with other tools, and with a lot of enjoyment.

www.xara.com

June 11, 2009 at 4:23 am | 3D, design, graphics, publishing, tools, webdev | No comment

Nice Primer Video on Digital Photography

A new favorite website of mine, Academic Earth is attempting to compile and make more efficient, the university open courseware sites video content. I was obviously interested in what kind of classes might be available in design and related computing. There is a category of computer science, but not design. Fortunately due to overlap, a few classes in my field are there to enjoy even though they don’t exactly hit the mark.

I think you’ll like this workshop on Digital Photography given by David J. Malan at Harvard University. It’s quite detailed, but not out of range of the novice.  I appreciated some of the examples and analogies given. It’s nice to be clear on technical equipment and it’s limitations. Particularly, since cameras are products nearly all of us buy, we all benefit from knowing a little more before we buy.

Workshop – Digital Photos by David Malan via AcademicEarth.org

Dear Universities offering open courseware. Please add design, typography and more. It’s fun, and valuable and useful for so many people. I suppose it would involve a lot of screen capturing which might not be as easy as video production, however, that doesn’t mean it’s not viable or not worth the resources to try.

February 1, 2009 at 5:12 am | computers, gadgets, graphics, photography | No comment

My Free software tools list

It’s been a long time coming, but I’ve finally created my ultimate free software tools list.  Before it was a pathetic page, always a ghost of what it could be.  Now, since I’ve recently upgraded my computer setup, I’ve had a lot of time to refine a perfect setup.

Check out my Free Software Tools page. 

March 12, 2008 at 9:27 pm | computers, design, graphics | No comment

Next Page »