New PF photofolio logo 200

WELCOME

TO THE DESIGN X MANUAL

Scroll down  or press the menu icon    on the left 

Overview

Watch this video to get a basic overview of the Design X system

[watch fullscreen to see all the detail]

Image Prep

Learn how to prepare images for your site

Your website resizes images on-the-fly, so they will fit any size screen, which is super exciting, but means you must take a few special steps to prepare the images you upload.

1. Upload a large image (don’t worry we make smaller versions for mobile devices and ipads): Your ideal image size is 1860 x 1140 pixels for a horizontal (930 x 1140 for a vertical). No need to crop your image, just make one of those dimensions the biggest (i.e. 1860 x 1072 or 1700 x 1140).

2. Use “Save For Web” in Photoshop or the equivalent in lightroom “File –> Export”: You want the images in the 250 – 550 kb range (the less colors the easier it will be to get it lower), so use a lower quality setting to get it down there. When saving for web make sure you include a color profile and XMP so your caption and copyright remains. Watch this Video to see how to batch resize all your images at once:

NOTE: This video was made when our website didn’t support color profiles… but now they do, so you’ll want to include that in the setup.

3. Name your images properly: Avoid using anything but letters, numbers, underscores and dashes (and only one period before the jpg) when naming your images. Each image must have a unique name.

Video Prep

Learn how to prepare video for your site

You have two options when it comes to adding video to your website:

+ - I don't want to fuss with encoding my videos for streaming online.

No problem. Go get yourself a Vimeo account (pro account if you want HD streaming) and upload them there. Leave the encoding to Vimeo. We provide a way to embed Vimeo videos on your site.

+ - I want to encode them myself for online streaming. I want to control all the settings.

Awesome. Are you sure? Encoding for streaming is not the same as playing a video on your desktop. If your answer is yes, well that’s great, here are the requirements:

First, if you can get your hands on Quicktime Pro, it’s the easiest and simplest method to encode a video. If you have experience with more advanced editing programs by-all-means use those.

Video Size: I recommend 640 pixels wide to accommodate all sizes of screens and devices, but there’s nothing to stop you from rocking 1280 × 720 pixels (720p) or 1920 × 1080 pixels (1080i/1080p).

Streaming Rate: 800 – 3000 kbits/sec is the recommended data rate and keep in mind the higher you go the better quality the video but the slower the playback will be. Of course it all depends on the viewers connection speed.

Audio: AAC, 44.100 or 48.000 kHz and 128 or 144 or 160 kbps.

Format: The video should be exported as mp4 and MUST have h.264 compression enabled (optimized for streaming natch). Only mp4 is accepted by all browsers and devices.

Streaming: Make sure you “Enable Streaming” and “Optimize for server” on the streaming tab.

One More Step: Follow these instructions to encode your video for FireFox browsers (WebM)

1. Visit the WebM project website to see a list of encoders available for free or for purchase (here).
2. Re-encode your video to the WebM format so that the name is exactly the same filename as the .mp4 video file except the extension will be .webm
3. Upload your video to the media library.

Note: do not add the video to a menu item only the original video needs to be in a gallery (menu item) and when the FireFox browser is used the site will play the proper version.

 Video size is capped at 250MB for each video (for server performance reasons). If you need more space contact support.

If you are using Final Cut Pro and Compressor there an excellent article about encoding (here).

Additional Topics

Admin – Account

Learn about the ACCOUNT tab in your website admin

[watch fullscreen to see all the detail]

Admin – Media Library

Learn about the MEDIA LIBARARY tab in your website admin

[watch fullscreen to see all the detail]

Important Note: Pasting text from wordprocessing programs (e.g. Word and Pages) can cause bad characters to appear on your text pages. Either save as plain text and then paste or input by hand. Here’s how: open the document in Word,  do a “select all” (ctrl+A),  “copy” (ctrl+C),  PC: open Notepad (found in Start > All Programs > Accessories) MAC: open TextEdit (found in applications), “paste” (ctrl+V) the content into Notepad/TextEdit, save the file, open again, copy and paste into your website. 
Important Note #2: At this time there are a few characters that cannot be used to name menu items. The following characters will cause the menu item to not work if used in the name / \ , ” < # % 

Additional Advanced Topics

NEW Features Just Added To Design X

Our latest update for Design X (version 10) is packed with features and is now in a full beta release. Hooray!

This update has been thoroughly tested and is stable and in a beta release right now. To participate in the beta release simply log into your site admin and go to the Account panel then Notifications tab. Hit the Update button.

Admin – Layout

Learn about the LAYOUT tab in your website admin

[watch fullscreen to see all the detail]

NEW Features Just Added To Design X

Our latest update for Design X (version 10) is packed with features and is now in a full beta release. Hooray!

This update has been thoroughly tested and is stable and in a beta release right now. To participate in the beta release simply log into your site admin and go to the Account panel then Notifications tab. Hit the Update button.

Admin – Navbar

Learn about the NAVBAR tab in your website admin

[watch fullscreen to see all the detail]

Admin – PDF Builder

Learn about the PDF BUILDER tab in your website admin

[watch fullscreen to see all the detail]

Update CDN

Learn about the UPDATE CDN button in your website admin

[watch fullscreen to see all the detail]

iPad Portfolio App

Your Design X website comes with its own iPad app that allows you to sync your website to an iPad. (NOTE: iPad must be running ios 6 or later). Syncing downloads your menu with images, videos and text pages directly to the ipad so you can hand-out or mail iPads as portfolios (no internet connection required). All the downloaded work is editable so you can customize the experience for each client. NOTE: Hidden content is synced to the app which allows you to show work not available on your website.

Download the app to your ipad by searching for HelloWORK Portfolio By A Photo Folio on your iPad or in iTunes or using this link:

https://itunes.apple.com/app/hellowork-portfolio/id689700469

  You need to now include www with your domain name when logging in. So, robhaggart.com would be www.robhaggart.com

[watch fullscreen to see all the detail]

  UPDATE (4/9/14): v2 of our app is in the iTunes store and we’ve made a couple really great improvements.

Custom Thumbs – All the custom thumbs you are using on your site for photos, videos, text pages and contact forms are now uploaded to the app.
Multimedia Swipe – You can now swipe between images, videos, text pages and contact forms. True multimedia support.

Note: As explained in the video to get a png logo to appear correctly (with knocked out background) on the ipad you must transfer it to your ipad by emailing it. If you sync using iphoto the png does not work. Email it to yourself and save it to photos on the ipad.

Additional Topics

Learn about other additional topics for your website

  NEW How To Create Index Thumbs In v10 of Design X [go here]

   NEW Fotomoto (image sales) Integration [go here]

Creating a logo for Retina displays [go here]

Creating custom logos for ipads and iphones [go here]

Submit your sitemap for SEO [go here]

Adding social media icons to your site (facebook, twitter, etc.) [go here]

Using HTML to style text pages [go here]

Guide to control email share and password box settings [go here]

How to make browser icons (favicon) [go here]

How to add tracking code other than Google Analytics [go here]

Moving your existing blog to your APF site [go here]

Activate Thumbs first option for galleries [go here]

SEO

Learn how to improve the SEO of your website

Design X comes with powerful SEO options that we highly recommend you take advantage of. Here are the ways you can optimize your website for search engines.

+ - Browser Title & Description

When logged into the admin of your site select the ACCOUNT panel and SEO tab. Here you will find places to enter a Browser Title, Meta Description and Meta Keywords for your site. Browser Title and Meta Description are very important for SEO. 

+ - Use Global Browser Title

Under the SEO tab you will find a switch to turn on or off the global browser title. Here’s what each setting does.

OFF. Turning the Global Browser Title OFF allows you to set a unique title for each page of your site (powerful seo). But, to do this you must change the title for each and every one of your images (lots of work). The title you give to the image is used for the page title then the Browser Title is appended to that.

ON. Turning the Global Browser Title ON lets your site use the Browser Title you entered on every single page first then appends the gallery name and a number for the image. Still works great for SEO and not as much work.

+ - Built-In Sitemap

The site comes with its own sitemap that you can submit to google so they can find all the pages on your site.. Follow this link to see how to do it. 

+ - Image Captions

To further enhance the SEO you should add captions to your images (you can leave the caption button off the navbar if you don’t want the public to see them). An image caption will help search engines understand what the image on the page is all about.

Please be patient and understand that getting good results from search engines can take time and lots of effort. Using social media, blogging and asking for links back to your site from places where your pictures appear will all add significant weight to what you are doing here. In many cases those things are more important. Finally, you should know that google places a lot of emphasis on how long a website has been around and the seo they’ve accumulated over the years. This is great if you are moving your site to our service as you will not lose SEO in the transition but bad if you are brand new and want to rank with established sites because it will take time.

Going “Live”

There are two important parts to making your new APhotoFolio website “live”:

1. Deciding where you want to host email. Either setup using google apps or keep email where its currently hosted.

2. Pointing your domain name (e.g. http://robhaggart.com) to our servers so your new site becomes visible to the world.

 If you are simply upgrading to Design X and your site is already “live” submit a support ticket to have it switched instead of following these steps. You still need to submit your sitemap for SEO

If you are ready to make your site “live” move on to Step 1 >>>>

 Taking your site live on Friday afternoon is not a good idea. If problems arise over the weekend our response time will be delayed and you could be without email for several days.

Once your site is live you might want to download our free iPad App.

WordPress

Learn about Wordpress and other blogging options

Very Important: We install and host WordPress as a courtesy to our clients but we offer this service as unmanaged (read below to understand what that means).

If your blog is not working properly or is blank it’s very likely that you’ve been hacked. Go here for information on what to do now: http://dxmanual.com//hacked-blog/

1. You are responsible for building and operating the blog (obviously you can hire this out if you need to). We cannot answer questions about how to operate a WordPress blog. Fortunately, and this is why we love WordPress, there are millions of people who can help if you visit WordPress.org or google what you are looking for.

2. You are responsible for maintaining the software. You must keep Wordpress and any plugins and themes up to date. Failure to do this could result in hacking to the blog and then your Photo Folio website.
We see this fairly regularly.

3. We maintain security software that scans for intrusions and it will even fixed hacked files but it’s not perfect and you are ultimately responsible if something goes wrong and the site goes down or is marked as malware or spam by google. You will be required to clean up the files or supply fresh files to overwrite any that are infected.

4. If you blog is hacked into several times and jeopardizes our server’s security it will be removed.

Blogging can be very rewarding, but it is not without it’s challenges and need for some level of technical expertise. If this does not sound like you we strongly recommend checking out Tumblr.com, WordPress.com (their hosted version) and Blogger.com. Those blogs can easily be linked to your website and are maintained by them.