25 years? Wowza!

Posted on January 16, 2018 by progravix

I’m not one for celebrating milestones. I don’t even set goals. I just do the best I can each and every day. The satisfaction in providing top-notch service with astonishingly quick speed, in my opinion, far exceeds the accomplishment of any mundane goal.

Yet, the other day I realized that 2018 will mark the 25th year for ProGravix. It certainly took a lot of work, and a few sidesteps early on, but since 1993 we have been offering graphic design (and, much later, web design and video services) with passion.

As a boy, I loved basic programming on the family’s Commodore 64 (with a lot of game time, of course – Frogger and Rampage come to mind). I had always loved computers, but never felt that programming was all that satisfying. That was the early years of personal computers. At the start of high school, I took several courses of COBOL and Pascal (computer languages), which I never really understood (and always failed). As a sophomore, I came across a class called Desktop Presentations, where they used Macintosh computers to create graphics. During the same year, I was learning the process of photography and developing film. For a photography class assignment, I used the photos I had taken, along with the hardware and software provided in my Desktop Presentations class to complete an assignment. It was the first assignment where I had garnered an A grade while using a computer.

In 1993, I had just turned 17, and finished up my Junior year of high school. By this time, the family computer had been upgraded to a Macintosh Performa. I was creating flyers for events, and designing other printed materials for family and small businesses. I also established the name ProGravix, and registered the trade name and trademark with Arizona’s Secretary of State. ProGravix certainly was a part time endeavor, with school taking priority. It was to become ever more pushed to the side…

Later in that same year, I began working at AlphaGraphics as a graphic designer. I had yet to graduate high school, but was proficient enough with PageMaker and Macintosh computers to amaze the manager, who offered me a position on the spot. While I had never pursued higher education, AlphaGraphics taught me a great deal. I made connections in the printing industry, and was part of many large scale projects in the Phoenix area. The fast paced retail environment was a challenge, but the insight into business management and offset printing afforded me a wealth of experience and knowledge.

By 1996, I had become exhausted with AlphaGraphic’s retail environment, and sought a position with Maricopa County’s Library District as a Senior Graphic Designer. The drastic change from fast paced creativity, to bogged down governmental status quo was dramatic. It was a nice change, but certainly not challenging enough. Moving from high volume, full color offset printing, to black and white bookmarks for youth and adult services seemed to dull my creativity. During these years at Maricopa County, I continued to pursue projects on the side – creating banners, menus, anything where my creativity could explode. During this time, I also became well versed in HTML, and the art of web development, having taught myself by reading the code of many popular websites. Although I was a vital component of the Library District, I worked closely with other departments such as Animal Control, Department of Transportation, Parks and Recreation, and the Stadium District, which oversaw the completion of Bank One Ballpark (now Chase Field). I was the go-to photographer and graphic designer for these departments – mirroring my sophomore year of high school.

In 1998, I chose to end my employment with Maricopa County, and begin an all-in effort to grow ProGravix. I had established many clients, and grew ever more knowledgeable about web development. This year also marked the beginning of ProGravix’s online presence.

In 2001, we became heavily invested in expanding the video services portion of our business, serving mainly as wedding videographers. From 2001 to 2005, we had created hundreds of wedding, graduation, genealogy, and remembrance videos. When the decline of the economy drastically curbed this service, we started to focus on very high end video projects for individuals or commercial endeavors.

Now, having achieved this 25 year milestone, I can assure you there is a lot more to come. ProGravix continues to grow, year after year. This is not achieved by advertising. We garner our business through our clients. By choosing to provide top-notch service day after day, we are choosing our quality and speed of service to speak for itself. Our clients share that with other potential clients, who begin to understand very quickly who we are, and what we do.

This has been today’s Clarified Butter.

Wrangle pesky “newer version” errors in Illustrator

Posted on September 16, 2014 by progravix

From time to time I receive an AI or EPS file from a client that just won’t open – either at all, or not cleanly. The reason given is usually of the “newer version” nature. The error is typically…

There is an easy solution – given you are running a Mac. There is a neat little application that I use a lot – Preview – which most of us pass off as Apple’s free PDF reader. But it can do so much more.

The solution to this “newer version” issue is to open the AI or EPS file in Preview. To do this, right-click (or control-click) on the offending file and choose “Open With > Preview.” This will work for virtually all EPS files, and most AI files that were saved with PDF compatibility. The file is opened in a new untitled Preview window. Go to “File > Save As…” and save it as a PDF file and close the Preview window. Now, right-click (or control-click) on your new PDF file and choose “Open With > Illustrator.”

Your resulting file will typically be locked together in a clipping mask, but this can easily be released and then fully edited or manipulated.

While you are in Preview, look at its other cool features, such as…

Combining multiple PDFs into a single file
Saving PDF files in other graphics formats, such as JPG, TIF, etc.
Encrypting existing PDF files with password protection
Decreasing PDF file sizes by reducing image quality
And so much more…

This has been today’s Clarified Butter.

WTF: What the font?

Posted on March 4, 2014 by progravix

I tend to think that I have a great photographic memory when it comes to font recognition. There has to be billions (if not trillions) of fonts from thousands of foundries and individual designers. Even with such a great pool to pull from, it always seems that a small set of fonts get all the love. Not so sure what that says about my memory now.

Serif fonts are a bit easier to match – given they have a bit more of a distinguishing appearance. Sans serif fonts can be much more difficult to match, especially if you have a small set to match from.

Additionally, designers take liberties when using fonts in logos, manipulating characters to match a certain style, or to provide uniqueness. This makes it difficult to match the fonts, but there are a few tricks.

Your first step is to try an online tool to find the font. You just might be lucky enough to find a free option. These tools allow you to provide an image (either by upload or URL), to which the server scans their database of fonts to match against. This works great for images that meet certain criteria (such as resolution, space between characters, orientation, etc). I prefer MyFonts’ WhatTheFont. Their results are impressive, and show both free and pay options (with direct options to download and/or purchase those fonts).

A recent project had me stumped. I had tried to match the font from the native logo artwork, but nothing was coming up. I then realized that the original designer must have modified certain letters.

Cassandra Font

Luckily the logo was provided to me in vector (Illustrator) format. I opened the file and modified the letters which appeared to be customized (those where a separation had been added at certain points). As soon as I did that, I had a perfect hit for Cassandra XBold – a free font.

This has been today’s Clarified Butter.

Superscript with style

Posted on August 15, 2013 by progravix

One of the most annoying browser rendering flaws is that of the registered trademark (or any other text – such as footnotes) in superscript. It typically is way too large, throws off line spacing, and makes large blocks of text appear as though it’s been pelted with a shotgun.

Superscript

The registered trademark symbol, ®, is generally not superscript as a default, and must be wrapped in a <sup> tag to raise it up from the baseline, and make it slightly smaller. The problem is that it never quite gets small enough.

<p class="bodytext">ProGravix<sup>&reg;</sup></p>

The trick is to style the <sup> tag with CSS…

p.bodytext {
	font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size: 10pt;
	line-height: 14pt;
	font-weight: normal;
	color: black;
}

sup {
	font-size: 6pt;
}

Here you can see that we have added styling to a stylesheet that tells superscript-tagged-text to render as 6pt. The code above that shows a “bodytext” class defined with a default text size of 10pt. You will need to adjust the <sup> font size based on your specific needs.

You can alternatively adjust the <sup> font size relative to the surrounding text using percentages. It’s also a good idea to zero out line-height, and adjust the position of the superscript.

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

If anything looks off for your specific use, just fiddle with the values. And when you think you’re done, check your work across as many browsers and platforms you can get access to. Honestly you should be doing this already – but let’s just assume you don’t already know that.

This has been today’s Clarified Butter.

PDF Compression: Use it wisely

Posted on October 19, 2012 by progravix

Nothing aggravates me more than individuals or organization sending out (or making available) important information in a Word file. How difficult is it to create a small, widely supported, open-source PDF? Not difficult at all.

Just below that level of aggravation is another matter spawned from a similar lack of detail. File compression. You know, making files much smaller than they really need to be. We all consume compressed music, videos and photos. Why not add PDF to that list? ProGravix delivers artwork in compressed ZIP archives, and we always create media consumed by our client’s customers in a perfectly compressed format.

The best place to implement compression is within our PDF files. Certainly we want to create high resolution artwork (for those times that the printer prefers PDF). But when it comes to making brochures, sales sheets, manuals, et cetera available on our websites, what’s the point in posting that huge 250MB file? The chance that they are going to print it is very slim, so creating a low resolution file that’s great for online viewing is what we need.

There are several levels of PDF compression. By default, a high resolution PDF (preferred by printers) contains 300dpi images and uncompressed text and vector elements. These types of files are extremely bloated, resulting in very long load times – which is fine when you are sending art to a printer… it only needs to be uploaded and downloaded once.

Adobe has developed several compression presets. The two I most widely use are High Quality and Smallest File Size. High Quality is great for creating artwork or high res proofs. Smallest File Size is great when you need to make files available on a website for download. The downside to the Smallest File Size preset is very low image quality. All images are reduced to 72dpi, with a very high JPG compression. I think the best option is the sweet spot between these two presets.

When creating a web-ready PDF file, where images need to be slightly better than web quality, I choose the High Quality preset, and modify the compression settings. Set Color Bitmap Images and Grayscale Bitmap Images to 150ppi. Also make sure that Compress Text and Line Art is checked. You can also choose to lower the ppi for Monochrome Bitmap Images as well (if your document contains them).

I usually keep JPG Compression to Automatic, but you can test your results, and choose a compression that suits your needs.

Overall, we need to be mindful of our visitors time. We need to allow them easy access to our information, at a reasonable speed.

This has been today’s Clarified Butter.

9 tips for creating an eNewsletter or HTML email

Posted on March 13, 2012 by progravix

We create several HTML newsletters each month. All have their own unique look and feel, but do share some general rules that provide compatibility across the majority of browsers, clients, platforms, and systems.

Here we will cover some of those rules. I will note, however, that these are my general rules, and not necessarily practiced or enforced by all.

Set a defined width
Since most emails are received within an email client or web-based email service, you can’t be guaranteed of the space available for your content. You could obviously set a width of 100%, and let your content scale with the user’s display area, but in reality this can wreak havoc on any design you are trying to retain. In general, you want to keep your layout within 550-650 pixels. I use a fixed width of 600 pixels. This allows me to create content that is exactly 600 pixels wide, and will look exactly the same regardless of who is viewing it.

Use inline styles
When developing a website, every developer would cringe at the thought of using inline styles, but in the email world, they are your best friend. On a website, you’d create classes and share them among all of the pages on your site from a central file. Unfortunately, in an email, clients strip or won’t render those classes. So, make sure to define all fonts, sizes, coloring, et cetera using inline styles.

Use tables
Again, another no-no in the website world, becomes very helpful with HTML emails. Email clients are dated applications. They don’t render global CSS very well, and don’t keep up on standards. It’s best to organize your content using tables, as opposed to DIVs or other structuring methods.

Forget about background images
This might seem like a good idea at first, but again, most email clients won’t render them, and you will be left with an email that is either a horrible design, or simply not readable.

Don’t set specific dimensions for your images
Most web-based email clients will not display inline images by default, and instead ask the user’s permission before displaying them. The best course here is to not define the image’s height and width. This will reduce the amount of white space that is seen before the user hopefully allows those images to load.

Use ALT tags
ALT tags are assigned to images and other elements. When the user has images turned off be default, and you have properly defined ALT tags, those tags will be used in place on those images until they load. Make sure to use ALT tags that describe or match the image.

Don’t use Javascript
Plain and simple, don’t even try. It won’t work, and will only increase the chances that your email gets flagged as spam.

Include a plain text option
I personally prefer to receive all email as plain text. If I want to view the HTML version, I turn it on. Plain text lets me get to the content quicker. It’s easy to include both versions as one, single email, and the recipient’s client displays the version based on their local settings.

Keep it simple
That means content-and-design-wise. Keep huge blocks of text to a minimum. If you need to share more of a story, include a read more option, and link it to your site. In general, it’s easy to keep your design simple – the outdated email clients are enforcing that. Keep the use of images to a minimum, and make sure they are optimized to speed download time. Make sure to host your images on a server that is fast, and always available.

There you have it, 9 tips for creating an HTML email. Again, not standards-based rules, just ones I prefer to enforce locally.

This has been today’s Clarified Butter.

Add a Facebook Like button to WordPress blog posts

Posted on March 12, 2012 by progravix

Adding a Facebook Like button to your non-Facebook content can greatly increase its ability to be more social, and be shared with a greater audience.

Here we will discuss adding a Like button to your WordPress posts. That is, a Like button for each individual post, and not for the entire blog (which is also a good idea to have in your sidebar). A Like button allows Facebook users to like specific posts on your blog, which in turn displays this as a story on their profile (and potentially on their friend’s feeds or tickers).

For the purpose of this post, we will be using the Twenty Eleven WordPress theme. This plugin will work across many other themes, but using this theme, and similar themes, will allow us to better place where the Like button appears.

The first step is generating the Like button code to be added to our theme’s template files. Like button code can usually be created with the tool provided by WordPress. The problem is that the URL to define is dynamic, and we can’t specify a static URL. Luckily, each individual WordPress post has a defined Permalink, and we just need to make a request for that URL.

Here is the code you need to use. I’ve already embedded the Permalink code. Copy this to your clipboard:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=trebuchet+ms&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

Now, in WordPress, login to Admin and go to Appearance > Editor. Under Templates click on the content.php file. This is the file used to display the posts on the main index page of your blog.

Paste the code just after the </h1> tag, which is the title of the post. Click Update File to save your changes. Now visit your blog’s main page to see the Like button in action.

Next, open the content-single.php file and paste the same code before the <h1> tag. This template file displays a single post’s content. I prefer the look of the Like button above the post title on single-post pages, but you can add it anywhere you prefer. Click Update File to save your changes.

Now, on your blog’s home page, click on a post’s title to see the full post in the single-post layout. You will see the Like button above the post’s title (or wherever you placed it).

There you have it, a simple implementation of the Facebook Like button on your WordPress blog. Now, write some really neat-o blog posts worth liking, and put Facebook to work for you.

This has been today’s Clarified Butter.

Create the perfect cover photo for Facebook’s new Timeline layout

Posted on March 9, 2012 by progravix

Regardless of whether you like it or not, everybody will eventually have the new Timeline layout for their Facebook profile or page. I personally like it. I think the layout is cleaner, and provides more flexibility when it comes to customization.

A major part of the new layout is the Cover photo, which is the large image that encompasses the top 315 pixels of your profile/page (excluding the Facebook bar across the top). Choosing what to place here is much more than choosing a photo from your existing albums, or uploading a plain photo. The key is developing an image that better explains yourself or your business.

Choosing what to design can vary widely, but should be focused on what you want to emphasize or portray about yourself or business. For a Business Page, you might want to include a series of photos that relate to the products or services that you offer. Here at ProGravix, we chose to use an image that mimics the look and feel of our website, which currently emphasizes our mantra, Simplify Chaos.

To get started, fire up your favorite graphics application. We chose Photoshop CS5. Create a new document with a size of 850x315px.

What you do next is up to you. Be creative! Can’t? Well, that’s where we can help. If you need assistance in developing a cover photo, please contact us. You’ll be glad you did.

When designing, make sure not to place any important content, such as text, where the profile photo is, which is on the bottom left of the cover photo. Any content placed here in the cover photo will be covered up by the logo.

Whatever you design, make a statement with your cover photo. Just because it’s a static image doesn’t mean it should be plain. As always, keep it simple and clean!

This has been today’s Clarified Butter.

Create a custom Facebook Business Page Tab for the new Timeline layout

Posted on March 9, 2012 by progravix

Facebook recently announced that Facebook Pages for Businesses will be receiving the same new Timeline layout that personal accounts have had for some time now. I know, I know, most of you are getting sick and tired of the constant changes over at Facebook, but I think this new layout is awesome.

Over the past couple of days, I’ve been trying to figure out how to add a custom Page Tab in this new layout. Page Tabs are those rectangular thumbs below your cover photo (which include a tab for Photos and Likes by default). Any apps you have installed would also be presented here.

I could easily create the Page (the actual page that shows the content), but getting the actual Tab to show up on my Facebook Business Page wasn’t so easy…

In this post, we’ll be discussing how to create a Page Tab to display custom content inside of Facebook. In other words, create a website page within Facebook that is associated with your Business Page. This is useful if you want to post a coupon, promotion, or other content that doesn’t fit elsewhere on your Facebook Business Page.

The Page Content
Before you do anything, you need to create the actual content to display within the Facebook page. I won’t go into specifics with this, since this is outside the scope of Facebook (and this post). In general, you need to create an HTML page, using any technology you prefer, such as HTML, CSS, PHP, JS, etc. My only suggestion is keeping the content no wider than 790px. It’s also best not to have the content very tall. If you do, those ugly iFrame scroll bars will likely appear. Once you have your content developed, it needs to be available online. If you need help developing the content, and/or adding it to Facebook, please contact us.

For the purpose of this tutorial, let’s assume your content is created and available at http://www.example.com/facebook/index.html.

The Facebook App
Don’t go running off now! Yes, we are going to create a Facebook App, but only for the purpose of creating the Page Tab. You don’t need to be a developer, or know anything beyond what you already have in your noggin. Go to https://developers.facebook.com/apps and click on Create New App.

Enter a name for your App. This isn’t really important, since you are going to be the only one that sees it. Also, namespace is not needed since we are just creating this app for a Page Tab. Click Continue, and complete the CAPTCHA security check.

On the Basic Settings page for your newly create app, no further information is needed under Basic Info, so click on the Page Tab selection at the bottom.

For Page Tab Name, enter the name you would like to appear below the button on your Facebook Page.

For Page Tab URL, enter the URL where the content exists on your server. Our example above was http://www.example.com/facebook/index.html.

For Secure Page Tab URL, enter the SSL URL where the same content exists on your server. This would be a URL that starts with https://. For example, https://www.example.com/facebook/index.html

You can leave Page Tab Edit URL blank, choose Wide (810px) for the Page Tab Width and click Save Changes.

Now, the part that was nearly impossible to figure out. I’m not sure why Facebook doesn’t provide a way to install the app to your page from within the app’s settings page. Maybe this is a glitch that will be cleared up soon. While you are still on your app’s basic settings page, make a note of your App ID and Page Tab URL (which in our example is http://www.example.com/facebook/index.html). Open a new browser window and go to:

https://www.facebook.com/dialog/pagetab?app_id=ENTER_APP_ID&next=ENTER_PAGE_TAB_URL

Make sure to replace ENTER_APP_ID and ENTER_PAGE_TAB_URL with your variables. Hit enter, and then choose the page you wish to install your new App to.

Now, go back to your Facebook Business Page. You will now see the new Page Tab button, and the name you chose below it. As of right now, it shows the default Facebook App icon. To change this, click on the triangle to the right of your page tabs, then hover over the new tab and click the pencil to pull up the options. Click Edit Settings. When the new window appears, click on Custom Tab Image and follow the steps.

Test your new Page by clicking on the Page Tab. The content you have posted to your server will now be displayed within Facebook.

This is a simple implementation of a Facebook Page Tab. Page Tabs can be enhanced to perform many advanced functions. The most popular is a like-gate, where you hide content, such as coupons or promo codes, from visitors until they Like your page. Hopefully a future blog post will cover this, but for the time being, I think getting this far using the new Timeline layout for Facebook Business Pages is a huge accomplishment.

To see an example of a working like-gate experience, head on over to our ~~current promotion on Facebook~~ (promotion has expired). This is using the same method we just outlined, with the added like-gate code (wherein we hide the entry form from the visitor until they like our page). While you’re there, like us so you can be entered to win a Professional Logo Design Package, valued at over $350!

This has been today’s Clarified Butter.

ProGravix Blog: Clarified Butter

Separating the good from the bad

Category Archives: Web Development

25 years? Wowza!

Wrangle pesky “newer version” errors in Illustrator

WTF: What the font?

Superscript with style

PDF Compression: Use it wisely

9 tips for creating an eNewsletter or HTML email