Introducing Typewolf

I launched another side project recently so I wanted to give it a quick mention on the blog here. Typewolf is a curated design showcase that focuses on typography and web fonts. There are a lot of design inspiration sites out there but here is what makes Typewolf different.

1) Typewolf identifies the fonts used in the designs. And you can easily view sites that use a certain font. For example, Montserrat font, Avenir font, Brandon Grotesque font, etc.

2) Typewolf has a section that features the best open-source web fonts on Google Fonts. I work on a lot of design projects where using Google Fonts is the only option for web fonts. Browsing the Google Fonts directory can be overwhelming so I’ve hand-picked the best fonts available. This section is constantly updated as new fonts are released.

3) The thumbnail graphics on Typewolf are not scaled-down. This makes it easy to clearly see the typographic details without having to always click through to the site.

4) Typewolf is updated daily and only the absolute highest quality sites are featured.

My goal is to make Typewolf the only inspiration site designers need to visit, so please check it out! You can also follow Typewolf on Tumblr.

Typewolf Web Fonts Showcase

Introducing Type & Grids and My Thoughts on the Future of Flash, HTML5 and Responsive Design

It’s been several years since I’ve posted anything on this blog, so I wanted to give an update about what I’ve been up to lately. I recently launched the successor to Warm Forest, called Type & Grids. Type & Grids is a template/theming system built with HTML5 instead of Flash like Warm Forest was. It was a long overdue update. The Warm Forest site will stay up for the time being, but I don’t plan on making any new updates. All my attention will be devoted to Type & Grids going forward.

I actually registered the domain typeandgrids.com in 2009. The idea was to refine what I did with Warm Forest and make the focus on typography and grids. The original plan was to build everything in Flash. Despite the iPhone and iPad not supporting Flash, I still thought there were ways to make Flash sites viable. You could have your Flash version for desktop visitors and then a separate mobile-optimized HTML version for users on phones and tablets. It seemed like a good solution and I actually went pretty far down that path building things out.

Also a couple years ago I really thought that Apple was going to “give in” and eventually allow Flash on iOS. Other mobile devices were touting support for Flash so I figured Apple was just being stubborn and would have to follow suit to stay competitive – users would want access to the “full web”.

But obviously it didn’t play out like that. Apple has such a huge presence that their decision not to support Flash essentially sent that technology to the grave. On Windows 8, the metro version of IE10 only allows Flash from sites on a “whitelist”. Flash for Android devices is no longer available. For the quickly growing mobile and tablet market, Flash won’t exist.

So it became obvious to me that Type & Grids shouldn’t be built with Flash. I never thought that Flash was a great solution for all sites, but for a long time thought it was awesome for creative/portfolio sites. I definitely no longer think that though and it’s been at least two years since I’ve done any real Flash dev work. HTML5 is the way forward and I think everyone can agree on that now.

As I was realizing all of this, I started hearing about this new thing called responsive design…

My thoughts on responsive design

Responsive design is awesome. I love it. When I first read about it and saw examples, it just made complete sense. It’s an easy sell to clients. One site that adapts itself to any device. Everyone gets it. But I still think there are downsides to responsive design and that it’s not the best solution for every website.

The other day I was listening to a podcast and a product manager from 37signals (a company I greatly admire) was saying how he thought responsive design was terrible. And really I had to kind of agree with him on the points he was making. His main point was that having to take into consideration all the different breakpoints and possible layouts for every different device makes design exceedingly difficult. And if you want to update something in your design that makes it even more difficult. Good design is all about constantly tweaking and improving things so if it’s super hard to update and change things then that’s bad for the design. His ideal solution was to have a desktop design and a separate mobile design. Each customized to best suit its uses. And that was a much better solution than a responsive design that fits everything.

Another guy on the podcast responded by saying responsive design really isn’t that hard to implement as long as you plan from the very beginning to make the design responsive. However one point that no one brought up – and I think this is a really good point – is that setting out from the get go to make a design responsive really, really limits the design. It puts tons of constraints on the design and limits the possibilities. You have to constantly evaluate how everything will work at each different breakpoint. And some things won’t work very well at certain breakpoints so those types of things might just be left out of the design altogether to make things work better on all devices.

For example, recently I’ve been visiting websites and without resizing my browser window I can tell the design is responsive. It just looks responsive. And sure enough when I resize my window, it’s a responsive design. Something about the way the site layout is put together gives it away. I’m not saying all responsive designs are like that, just that there is a certain look and layout that lends itself to responsive design. So a lot of sites are starting to look the same due to that. My worry is that instead of having a version of your website that works awesome for the desktop and another version that is awesome for mobile, you end up with one watered down version that is mediocre on every device. It’s like trying to please everyone at once.

So all that being said I do still really like responsive design in a lot of cases. I think it’s a perfect solution for simple sites without tons of content and sites where the user isn’t setting out to accomplish a complex task. Great for marketing sites and less so for sites that are more like apps where users go to get stuff done. In that case it might be better to design a custom site for mobile users.

I did end up deciding to make Type & Grids responsive and I think it works well for what it is. I felt like responsive was the right choice for the type of site I was creating. I’m stoked to have finally launched it even though I feel like I am pretty late to the game. The original Flash version was planned to launch by the end of 2009, then I scrapped that and was hoping to get the HTML5 version launched beginning of 2012. So this is about a year later than I thought, but better late than never! The response to Type & Grids has been great so far so it was worth it. I’m always interested in hearing any feedback and suggestions so let me know what you think of the new project.

7 Tips to Make Your Flash Site iPhone and iPad Friendly

Everyone seems to be talking about how the iPhone and iPad don’t support Flash but I haven’t seen much discussion on what to actually do about it if you have a Flash site. Flash might not be coming to the iPhone anytime soon but there are actually simple things you can do to make any Flash site iPhone/iPad/iPod touch compatible, as well as work on any mobile device and be accessible to users without Flash installed. Every Flash site should attempt to make all content accessible to all users but sadly most sites don’t do this.

» Download all the source code and examples here

To begin, download the above zip file which contains a full Flash site that is completely iPhone/iPad/iPod touch/mobile friendly. It also contains all code samples shown below, including all HTML, CSS, and JavaScript for a fully functional mobile site. Feel free to use the mobile site as a template for your own site.

Here are 7 tips to make your Flash site iPhone friendly and accessible to all users on all devices:

1) Use SWFObject and actually make use of the alternate content feature

The first thing you’ll need to do is use SWFObject to embed your Flash site into your HTML page. Most Flash developers are already doing this but the important thing to do here is to make sure you take advantage of SWFObject’s capability to display alternate content to users without Flash installed. Unfortunately a lot of Flash sites using SWFObject fail to provide anything useful as far as alternate content. Below is an example of how a lot of Flash sites look to users without Flash:

Alternate content
Not very helpful to users on mobile devices.

At the very least you should include some basic content from the site like contact info and relevant links in addition to having a link to download the latest version of Flash. Below is how my personal portfolio site appears to a user without the Flash plugin:

No Flash
Users without Flash installed see this.

The most important thing to note above is the link to the non-Flash version of my site which I’ll go over below. Open up “index.html” in the download to see how all of this is setup.

Alternate content
What my Flash portfolio looks like to users with Flash.

2) Develop a simplified HTML version of your site for iPhone/iPad/iPod touch/mobile users

A sample mobile site HTML template is included in the above zip file in the folders “Sycamore” > “mobile”. When developing a mobile site the important thing is to keep the site simple using basic HTML and a one column layout. This is to ensure it will be completely accessible to all users and viewable on all devices including mobile devices besides iPhones. I prefer to keep everything on one page if possible since scrolling on the iPhone is more enjoyable than clicking. I also like to size my images 320 pixels wide which looks perfect on the iPhone’s screen. This is how the mobile version of my site looks:

My Flash portfolio on the iPhone
Note how the 320 pixel wide image fills the screen nicely.

It’s also a good idea to create a subdomain on your web server named “m” which stands for mobile. That way your mobile site address can be “m.yourdomain.com” which seems to be the standard way of doing things these days.

My Flash portfolio on the iPhone
Notice the “m” in my URL.

3) Use JavaScript to detect iPhones, iPads and iPod touches and automatically forward them to the mobile version of your site

Use this simple bit of code to seamlessly send iPhone, iPad and iPod touch users straight to your mobile site – it should be placed in the header of your “index.html” page:

  1. <script type="text/javascript">
  2.  if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
  3.   document.location = "mobile/";
  4.  }
  5. </script>

Using this code ensures the alternate content you created with SWFObject in step #1 is skipped entirely on iPhones. There is nothing more annoying for iPhone users than getting a “Please upgrade your Flash Player” message.

4) Set the viewport to be the width of the iPhone

This bit of code goes in the header of your mobile site HTML page:

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

It sets the width of the page to be the same width as the viewport of the device viewing it. This ensures that on the iPhone the site is sized correctly and already “zoomed in” and matches the iPhone’s screen size perfectly.

5) Make the iPhone stop from resizing text on rotation

If the iPhone is rotated, by default Safari will increase the text size on the page. This is handy if the text size is too small to begin with but if you are using a large enough font size this isn’t necessary. In fact, it can increase the size so much that it really messes up your layout and looks bad. I find 14px to be a good, legible font size for the iPhone’s screen. It’s plenty big enough to read on either orientation of the iPhone so I prefer to turn that feature off by using the CSS code below:

  1. html, body, p, div, h1, h2, h3, h4, h5, h6 {
  2.  margin: 0;
  3.  padding: 0;
  4.  -webkit-text-size-adjust: none;
  5. }

6) Create an iPhone home screen icon

In the download you’ll notice there is an image in the “mobile” folder called “iphone_icon_57x57.png”. This is basically a fav icon that the iPhone uses. If a user adds a link to your site from their home screen this is the icon that shows up. To change this image you’ll want to create a PNG sized 57×57. You don’t need to create any rounded corners or the shine effect – those are added automatically by the iPhone. If you don’t create a custom icon, the iPhone automatically takes a small screenshot of your page and uses that for the icon.

Here is the code you’ll need to insert in the header of your mobile site HTML page to make the iPhone use your custom icon:

  1. <link rel="apple-touch-icon" href="iphone_icon_57x57.png" />

7) Use Helvetica!

All iPhones and iPads already have the font Helvetica installed on them so it makes a great choice for your font family in the CSS for your mobile site.

  1. body {
  2.  font-family: Helvetica, Arial, sans-serif;
  3.  font-size: 14px;
  4.  color: #333333;
  5.  background-color: #f5f9ed;
  6. }

Helvetica
No more Arial!

Once again, all code samples above are included in the download. I hope you find these tips useful – if so it would be nice if you could share this on Twitter, Digg, etc. If you know of any other tips for making Flash sites accessible on iPhones and other mobile devices please leave them in the comments below. Thanks!

__

11 Myths About Flash That Won’t Die

I make my living as an Interactive Designer/Flash Developer so most of the projects I do involve Flash in some way. So of course I think Flash is a great technology. But I’m definitely no Flash fanboy. I agree that there are lots of terrible uses of Flash out there and I don’t mind when people are critical of Flash. But I do mind when people say things about Flash that are simply untrue. Here are 11 common myths I hear all the time.

1. You can’t select and copy text on Flash sites

I still see this one all the time in online discussions involving Flash. Text in Flash is selectable (and copyable) if the Flash Developer chooses to make it so. This feature has been around for quite awhile. It’s not complicated or time consuming to implement either. It’s as simple as checking a box inside the Flash IDE or setting a property to true in ActionScript. So Flash technology is fully capable of this, it’s simply up to the developers to make it happen. There is no excuse not to implement this in Flash sites with a lot of text.

2. Your Flash site won’t show up on Google

This is a huge myth due to most people’s misunderstanding of Search Engine Optimization (SEO) and what factors cause a site to be listed at the top of Google. A lot of people seem to be obsessed with SEO without having a clue to how it works.

According to SEOmoz’s Top 5 Ranking Factors, the following is what matters most for SEO and getting your site to the top of the search engines:

  1. Keyword Focused Anchor Text from External Links
  2. External Link Popularity
  3. Diversity of Link Sources
  4. Keyword Use Anywhere in the Title Tag
  5. Trustworthiness of the Domain Based on Link Distance from Trusted Domains

So how many of those five would negatively effect a site made entirely in Flash? Zero. That’s right. Not one of those has to do with HTML keywords on the page or H1 tags. Of course those things are important too but they don’t matter nearly as much as most people seem to think.

To get your site to the top of Google you need trustworthy sites to link to your site coupled with good title tags. Simple as that. You can have the most keyword optimized HTML site in the world but if no sites are linking to it you are screwed.

Case in point: Look at The Oatmeal, a hugely popular site that is featured all the time on Digg. The Oatmeal is created by just one person, a guy named Matthew Inman who has been called a SEO genius. He launched a dating site by himself in 2007 and was able to get a #1 ranking on Google for the search term “online dating” (without the quotes) beating out sites with huge marketing budgets like eHarmony and Match.com. He did this by utilizing a clever way of getting sites to link back to his. So obviously he knows what he is doing and understands SEO. Most of the posts on his site The Oatmeal are just a series of images inside an HTML page. No HTML text at all, meaning no keyword optimization, H1 tags, etc. Sounds kind of like a Flash site, doesn’t it? He has no trouble getting his site to the top of Google and neither would a Flash site that has good sites linking to it.

Of course there are some in the Flash community who point out how Google now indexes the text inside of SWFs and this is true. The problem is that they only index static content, not content loaded dynamically through XML. Most professional level Flash sites will load in content dynamically so Google really isn’t indexing the content. Maybe they will in the future but I don’t think the technology is quite there yet. Either way it won’t stop your site from getting a good search ranking since the actual content on the page isn’t nearly as important as the factors discussed above.

On an additional note I’m going to go out on a limb and say SEO is simply overrated in a lot of situations. If you are a design agency or a freelance designer I doubt you are getting much business through Google searches. Maybe if someone is looking for a local company in a small geographic area. But that matters less and less with a global economy with more businesses not caring where you are located. For example, I’ve never gotten any freelance work through people doing Google searches. I get work through word-of-mouth and networking. Clients simply aren’t finding me by typing in “flash designer” on Google and having my page pop up. The same is probably true for lots of businesses who needlessly fret that they aren’t in the top search results.

Also none of this takes into account how easy it is to have alternate HTML for your Flash site if you do really want to keyword optimize your content. Using the industry standard SWFObject for embedding Flash, you can serve up alternate content to users who don’t have the Flash plugin installed and Google will crawl and index that content. My personal portfolio site does this along with lots of other Flash sites.

So really people should understand what factors actually matter before saying a site created entirely in Flash won’t show up on Google. Flash + SEO = not as bad as you think.

3. Flash intros suck!

“OMG Flash sucks! I hate Flash intros! I always just click skip intro.” Not that I don’t agree but when I hear people say stuff like that I have to wonder what year they think it is. 1997? Seriously, when was the last time Flash intros were popular and widespread? For some reason people still seem to associate Flash technology with Flash intros. I’ve heard people say they don’t want Flash on the iPhone because they hate Flash intros.

I have been working with Flash professionally since 2001 and not one time have I ever created a Flash intro. Ever. That’s 9 years. Zero intros. It’s pretty well established that Flash intros do suck and that people severely dislike them. And it’s been pretty well established for about 10 years now. So quit complaining about all these supposed Flash intros everywhere. I don’t see them on any professional, contemporary sites and I don’t know any professional Flash Developers who still create them.

4. Flash isn’t supported on mobile devices

According to Adobe, there are currently 800 million Flash enabled mobile devices out there. Of course the elephant in the room is the iPhone – but how much longer can Apple hold out? Flash Player 10 is supposed to be coming to most smartphones in 2010 – including those running Windows Mobile, Google’s Android, Nokia S60/Symbian and the new Palm operating systems. Users want to access the whole internet and once other mobile devices start offering Flash support I believe Apple will be forced to quickly follow suit and allow Flash on the iPhone.

5. Can’t use the back button and no permalinks/deeplinking

This is entirely possible. See my portfolio site or my Aspen template. More and more Flash sites I see coming out these days support this feature. It’s easy to integrate back button support and deeplinking using SWFAddress.

6. Can’t scroll with the mouse wheel

This is entirely possible as well. Even on the Mac. See my Sycamore template and my AS3 scrollbar, both using SWFWheel.

7. Flash sites load slowly

People seem to think that creating a site in Flash somehow makes the file size 10 times larger than if you created it with HTML. Loading similar content – like lots of images for instance – will take the same amount of time whether you load it with Flash or HTML.

8. Flash sites don’t validate/aren’t accessible

My portfolio site is standards-compliant and validates according to the W3C. And it is completely accessible with alternate content, even on the iPhone. Same with tons of other all-Flash sites.

So you might be saying well Flash makes it harder to create a valid and accessible site. Well that might be true but according to browser maker Opera, less than 5% of all websites actually validate. So it’s not like creating a site with HTML makes it automatically standards-compliant. It’s up to developers to care and take the time to make a site standards-compliant and accessible.

9. Lots of users don’t have Flash installed

98.9% of users have Flash Player 9 or later installed according to Adobe. Even if they are fudging the numbers in their favor that’s still a pretty high percent. The number of users without Flash is probably similar to the number of users who have JavaScript disabled.

10. Flash sites automatically start blaring music and Flash banner ads takeover the screen

Yes, some Flash sites might do this and there are tons of annoying Flash banners out there. But there are plenty of ways to be annoying in HTML too. You can’t blame a bad use of the technology on the technology itself.

11. Flash Designers hate HTML and think the whole internet should be Flash

“If you think Flash is so great then why isn’t your blog made in Flash?” I’ve actually seen that posted before in discussions about Flash. My response to that would be “Because that would be retarded.”

I don’t think any Flash guys are saying it makes sense to use Flash in all situations. Most websites shouldn’t be entirely Flash. Does that mean no websites should be entirely Flash? Not at all. You can deliver an experience in Flash that simply cannot be compared to anything you can do in HTML/CSS/Ajax.

Not every site on the web is about delivering straight up information. If so then all we would need is Wikipedia. HTML is perfect for information rich sites like a blog. Flash is great for delivering a memorable experience.

__

So next time you hear anyone perpetuating any of these myths about Flash tell them what’s up. Please post in the comments if you can think of any other myths.

__

Folder Structure and Project Organization Best Practices

I like to think of myself as a pretty organized person – ok I admit I’m pretty much borderline OCD when it comes to having everything in its right place. So one thing that has always interested me is how best to structure and organize my design/web projects.

As a freelancer I’ve worked in-house for lots of different design agencies and I’m always curious to see how they keep all their projects organized and what naming conventions they use. I’ve seen lots of good examples and lots of bad. Hint: If your files always have names like “design_final_05a_FINAL.psd” you are probably doing something wrong.

I’ve gathered all the best practices I’ve seen and put them together in a ZIP file which I use as a starting point for all my projects. Feel free to download it and incorporate it into your workflow:

» Download project_template.zip

I’ll go ahead and explain all the parts to it below as well as give some neat tips and tricks for staying organized and sane.

Project template

The above is what “project_template.zip” should look like once you have unzipped it. Replace “Project Template” with the name of your project.

Project template expanded

Here it is with all of the folders expanded. I’ll go over each item starting from the top.

“Assets”
This stores all project files that aren’t deliverables – it’s also common to see it named “Resources” or “Reference” but I like the name “Assets”.

  • “_Old”: I go into more detail about this later on but basically this folder is where you store all the old and backup versions of your files. It starts with an underscore to always keep it at the top of the folder.
  • “Design”: Keep all your design source files here, like PSDs, Illustrator files, etc. I’m including a 960 grid PSD I created which I use as a starting template for a lot of web design projects. Learn more about the 960 grid system here.
  • “Notes.txt”: I like to keep all the project specs together in one central location. One tip I like to do is when I have a client email with important project information in it, I paste it into this text file. This keeps me from having to go back to my email and dig though everything every time I need to look stuff up about what the client said. Also keeps me from constantly checking my email which is a huge distraction and time waster.
  • “Zip”: For most projects I’ll have a few ZIP files that the client sends over – after I unzip them I store all the original ZIPs here in case I need to revert back to them.

“deploy”
This is for all files that will be uploaded to the web server for the final project. It’s also common to have it named “bin”, “web” or “deliverables”. I prefer the name “deploy” since the name is more clear as to what exactly it’s for. Also notice how everything in here is named with all lowercase letters which is standard for all files deployed to the web.

  • “css”: All CSS files go here.
  • “img”: For all your images. It’s also common for it to be named “images” but I like the 3-letter version better since it is more consistent with the rest of these names.
  • “inc”: All include files go here – mostly for doing dynamic/PHP websites.
  • “index.html”: This is the root file for the project.
  • “js”: All JavaScript files go here. The “swfobject.js” file here is the industry standard for inserting Flash into HTML pages.
  • “project_template.swf”: A sample SWF file that is embedded in “index.html”.
  • “xml”: All XML files go here.

“src”
All project source files go here, which for me is typically FLA and ActionScript classes. I set the FLAs to publish to the “deploy” folder to keep everything separated and organized. I’m still amazed at how many developers I see who still keep everything in the same folder then have to move/rename things once they are ready to upload. If you keep your “deploy” and “src” folders separated you’ll never have to move or rename things again.

  • “project_template.fla”: A sample FLA set to publish to the “deploy” folder.

Other organization tips & tricks

Old

The above is typically how my “_Old” folder will look for storing backups of old versions of my files. Obviously if you are using a CVS respository for versioning then you probably won’t need this. But this is a simple way of keeping previous versions of files and having backups around in case you need to revert back to something.

For a PSD file named “home.psd” for example, the latest version will simply be called “home.psd” and will be stored in the “Design” folder. Periodically I’ll copy and paste versions into the “_Old” folder and name them “home_01.psd”, “home_02.psd”, etc. The most current version won’t have any numbers after it. It especially won’t have the word “final” in it since designs tend to never stay final for very long. I’ve seen some designers include the date in the filename like “design_10-7-2009.psd” so they know which one is the most current. That never made much sense to me since right in the folder it will usually show the date last modified. If you just keep one current version in the “Design” folder with a normal name that should be all you need to tell that it is the latest version.

To backup my “deploy” and “src” folders I simply create folders named “01″, “02″, etc and copy and paste the “deploy” and “src” folders together inside. See the above image for an example of what I mean.

Documents

Another thing I’ve learned is to store all my files in the default “Documents” folder on my computer. I used to have my “Personal” and “Work” folders kept directly on my desktop but I quickly realized that was a bad idea after accidentally dragging my entire “Work” folder to the trash when trying to delete some MP3s on my desktop. Luckily I caught it right after it happened but it could have been disastrous. Now I keep my actual folders in the “Documents” folder and create aliases (shortcuts on the PC) on my desktop to link to them. That way if they get deleted it’s no big deal since it’s just an alias.

This is how my “Work” folder is organized:

Business & Finance
For all tax info, contracts, agreements, paperwork, forms, etc.

Projects
All my projects organized by client.

Resources
Where I keep all my design resources like fonts, icons, photos, textures, patterns, backgrounds, Photoshop brushes, ActionScript libraries/frameworks, etc.

Desktop

Also what I like to do for quick access to my current projects is create aliases on my desktop for all projects I am working on. This helps me see what is currently on my plate and I won’t forget about it since it is in plain sight on my desktop.

If you are wondering why my desktop background is plain boring grey it’s for a neutral background when working in Photoshop. On the PC Photoshop has a solid background when you are working in the program (or at least it used to – haven’t used Photoshop on the PC in ages) but on a Mac all the windows show through to the desktop. So if I’m working on a design or especially a color scheme, having a color desktop background will throw me off. I swear I’ll start subconsciously choosing colors that match and compliment my desktop colors without even realizing it. Neutral grey prevents this.

Anyway I hope people will find the above useful for staying organized. I realize my system won’t work for everyone but it seems to work really well for me and the types of projects I do. I’m always changing and optimizing my workflow so if anyone has any comments or suggestions for improvement please let me know in the comments!