An important component to any Flash website is the HTML mirror site. We mirror our sites so search engines (google, bing, yahoo) can see inside them and index all the content. Google recommends doing this in their webmaster guidelines (here and here) and we’ve seen solid SEO results using this technique.
As a company we believe very strongly in evolving anything that we build, so I’m happy to announce an update to the HTML mirror of all our sites. With this update, our mirror now leads the industry in design and function.
Here are some of the changes we’ve made:
We’ve been steadily making improvements to the iPad sites since we first launched them, but a couple key changes just happened that I think you may be interested in knowing about.
Smaller images being loaded. We decided to load a smaller image than the one used on the sites to improve the speed.
Improved swipe. The swipe just got 10 times better. I couldn’t be happier about that.
New admin area for changing colors and adding social networking to the contact page. All the iPad sites have an admin where you can change colors, switch to a custom designed white version (default is black) and add social networking links to your contact page.
Add a custom designed white version:
One of the most impressive features of our websites is their ability to scale images to fill any size screen. And, if there was any feature that allows our sites go “one louder” it’s the ability to make the images go full screen within the browser (available on all designs). Many photographers like to use this feature on their landing page slideshow. http://kcarmstrong.net is a good example of that but that’s not the only place this unique feature can be applied. The other is throughout the portfolio. Photographer Erik Skaar has opted for this approach and you cannot deny that this takes the impact of his images to the next level:
That badge you see up in the header came from PDN (Photo District News) because A Photo Folio won for best website design. The winners were Sang An with Design 3 – Brooklyn Bridge and David Coventry with Design 6 – Gramercy. Those were the only two designs I submitted… guess I should have done all of them.
Trent is in the process of moving his portfolio to A Photo Folio. He said he is switching from LiveBooks for the dynamic resizing, HTML5-based iPad compatibility, in-house hosting and the pricing as compared to the custom site design he would have needed.
Brad is also teaching a workshop in Santa Fe that looks pretty cool (here).
Thanks for the props, Brad!
All of our designs have the exact same features and options so it can be difficult to spot what makes them different from each other. Here’s a simple guide to the differences.
Design 2 – Manhattan
This design has hidden menu and thumbs drawers on the left and right side of the screen. When you mouse over them they pop out. In a nutshell this design is about giving the most real estate possible to the images.
Design 3 – Brooklyn Bridge
This design has a fixed and open menu on the left making it super simple for people to navigate between the galleries and pages. The thumbs show up in a massive grid that overlays the image making it quick and easy to scan the contents of your website. In a nutshell this design is about ease of use.
Design 4 – TriBeCa
This design has a menu that is hidden on top and thumbs that are hidden on the bottom, both of which are revealed when you mouse over them. Instead of drawers opening the entire image shifts up or down to reveal the menu or thumbs. In a nutshell this design is about slick presentation and is one of the few designs that works extremely well with panoramics and wide images.
Design 5 – Chelsea
This design is very similar to Design 3 with two important differences. 1.) You can set an upper limit for the image size. All our sites have dynamically resizing images but in this design you can cap the growth at a certain point. This allows you to load smaller images for faster load times and to ensure that you know how your images will look on all screen sizes. 2.) The menu behaves a bit differently in its position relative to the image. Read about that here: http://aphotofolio.com/whats-the-difference-between-design-3-and-design-5. In a nutshell this design is about ease of use
Design 6 -Gramercy
This design has the fixed open menu on the left and a row of thumbnails along the bottom of the image. These thumbs can be set to open automatically when a gallery is selected or only show when the thumb icons are clicked. In a nutshell this design is about impressing users with a big image but also having a quick overview of the contents at their fingertips. It’s the best of both worlds.
Design 7 – Midtown
This design is very similar to Design 3 except when clicking on a gallery thumbnails come up first instead of the first image in the gallery. This allows users a quick overview of the contents of your site by loading only the thumbs, but you can still make an impact with full screen images once they click on a thumb. In a nutshell this design is about speed.
On the day Apple announced they sold one million iPads (here) A Photo Folio releases our custom designed iPad sites, built using HTML5, for all new and existing customers.
We are committed to delivering exceptional websites on all platforms, that’s why we were the first and are currently the only portfolio website design company to deliver this for the iPad.
Because our websites are database driven we can deliver exceptional flash websites for the desktop and HTML5 sites for the iPad.
The iPad sites are designed to showcase your photography and video but also make full use of the unique finger swiping capability and orientation change from horizontal the vertical.
Our database seamlessly delivers your image galleries, thumbnails, videos, text pages, links to your blog and all your contact information.
When technology evolves we do to, A Photo Folio is committed to change.
I’m agnostic when it comes to programming languages. I’m a former photo editor who now designs websites for the user/client experience, but I have no vested interest in any one programming language.
When I set out to start building sites I had certain requirements for the design and function. Flash was the only language that afforded these requirements. If another, better language comes out that meets these requirements, I would switch today.
Some people are saying HTML5 is a great new language to build sites with. Unfortunately it doesn’t meet several of my requirements.
1. Support for fonts – Art Directors love typography. It is important that our users can load high quality magazine and advertising fonts in their websites. In HTML5 you can only use a handful of web safe fonts
2. Scaling – The cornerstone of our design is the image scaling. It allows us to display images easily on monitors from 13″ – 30.” HTML5 does not support scaling.
3. Browser Independence – It’s important that our sites look the same in browsers built 10 years ago (IE7) and browser released today. HTML5 is not supported by most of the browsers people are using today.
4. Video Independence – It’s important that video on our sites displays correctly in every single browser. HTML5 requires that you encode your video in several different formats if you want it to show up in different browsers.
So, whats all the fuss for HTML5 all about? Apple decided it would not support flash in its hand-held devices (ipad, ipod-touch and iphone). But, guess what? That’s actually fine, because my requirements are not applicable on a hand held device, because it’s a fixed platform. We actually already build our iphone and ipod-touch mirror sites and our soon to be released ipad sites in HTML and will switch to HTML5 when it’s released (oh, and it’s not even been released yet so one more strike for the desktop experience).
Many experts think Flash will never be replaced on the desktop, because we’re long past the point where anything can be agreed upon as a group on the internet. You can be sure of one thing though, if anything does replace Flash as the de facto standard for a rich media experience on the desktop, we will adopt it.
PS- No matter what we will benefit from all this as Adobe makes major improvements to flash.
UPDATE #1: I found this statement from Hulu, a joint venture owned by NBC, ABC and Fox, is along the lines of what I’m saying here:
An Aside on HTML5
Those are the highlights of our new player. Before we move on to the other updates to our site today, let me address a related topic that’s been in the news a lot recently: HTML5. Plenty of users and members of the press ask about this topic all the time.
When it comes to technology, our only guiding principle is to best serve the needs of all of our key customers: our viewers, our content partners who license programs to us, our advertisers, and each other. We continue to monitor developments on HTML5, but as of now it doesn’t yet meet all of our customers’ needs. Our player doesn’t just simply stream video, it must also secure the content, handle reporting for our advertisers, render the video using a high performance codec to ensure premium visual quality, communicate back with the server to determine how long to buffer and what bitrate to stream, and dozens of other things that aren’t necessarily visible to the end user. Not all video sites have these needs, but for our business these are all important and often contractual requirements.
That’s not to say these features won’t be added to HTML5 in the future (or be easier to implement). Technology is a fast-moving space and we’re constantly evaluating which tools will best allow us to fulfill our mission for as many of our customers as possible.
The Google Chrome Browser now has Flash built in:
If you’re not ready to tackle learning wordpress you might want to check out Tumblr http://www.tumblr.com/
Tumblr is the easiest micro blogging platform in the world and can be installed on a subdomain of your website (http://blog.yourdomain.com). After your site is live sign up for tumbler and tell us where you want it installed (example: blog.mydomain.com). Then on your tumblr blog click customize, then info, then check “Use a custom domain name”. Give it the same name you told us (example: blog.mydomain.com). Done!