For first time visitors following this guide will be the quickest method to get your new website up and running.
ADMIN – DESIGNS
Watch this video to learn about all the website customizations available in your admin under the Designs tab.
[watch fullscreen to see all the detail]
All NEW Staging Area
The new staging area can be used to make changes to your site or design a completely new site offline, then push the changes to your live site.
IMAGE PREP
If you are on a mac and need to batch rename a lot of files Finder has this function built into the system now: http://osxdaily.com/2015/05/28/batch-rename-files-mac-os-x-finder/
The images sizes/dimensions listed below are merely Recommendations, you aren't required to follow them. If you want to upload slightly larger dimensioned image or slightly larger file size images, then you are more than welcome to do so.
Also most internet browsers do respect color profiles now.
More info here: https://www.color-management-guide.com/web-browser-color-management.html on that subject.
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.
- 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 longest edge (i.e. 1860 x 1072 or 1700 x 1140).
- Name your images properly: Avoid using anything but letters, numbers, underscores and dashes (and only one period before the file format(example: .jpg) when naming your images. Each image must have a unique name.
FOR PHOTOSHOP USERS
1.) Start by opening the original high-res image file on your computer, in PhotoShop
2.) Select Image>Image Size and change the ppi to 72
3.) Now go to File>Automate>Fit Image set the constraints to: 1860 x 1140
NOTE: For the 4k and 5k screens people are using now you might consider using 2500 x 1700
(Make sure the checkbox is checked for the Don't Enlarge setting)
4.) Now to save the file for your PhotoFolio website:
(PhotoShop 2014 users) Select File>Save for web
(Photoshop CC users) Select File>Export>Save for Web (Legacy)
5.) In the Save for Web screen, make sure the preset is set to .JPG and select the 2-Up view from the tab-view in the top left corner, to see the Original image in the left-hand pane and the Export image on the right-hand pane (with Output File Size preview below the Export image).
6.) Make sure the checkbox is checked for both Optimized and Convert to sRGB
7.) For the Quality setting in top right, set the Quality slider to a value between 60 and 80
Note: You want the image file sizes saved in the 350kb - 550kb range (the less colors the easier it will be to get the file size lower), so use a lower Quality setting to achieve the smaller file size.
For Example (click to enlarge):
8.) Now select the Save... button, to save your web-image and change the filename – like adding "_web" to the end of the filename – before you close the image. That way you DO NOT replace the original file with your save for web changes.
Note: If you want to batch save multiple images for web at once, simply record the steps above as an Action that you can run for multiple images in selected folder of images on your computer. If you've never batch processed images or recorded actions in PhotoShop, you can find plenty of video tutorials by running a Google Search or YouTube using: "how to record actions in PhotoShop".
FOR LIGHTROOM USERS
We have a special tutorial on how to Batch Resize Images in Lightroom published for you. Check it out!
VIDEO PREP
Learn how to prepare video for your site
You have two options when it comes to adding video to your website:
Option 1: "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. Here's how you embed Vimeo videos on your site:
1.) Go to your Vimeo page. Make sure the settings for your video allow it to be viewed by the public, or setup so that it will only play on your domain name.
2.) Copy the numerical ID number that you see after the "https://vimeo.com/" in your address bar of your browser (it's different for each vimeo video you have)
3.) Login to your APhotoFolio account and click MEDIA LIBRARY
4.) Click (+ VIMEO) and give your vimeo video a "Title". Then paste the numerical ID # that you copied, into the "Vimeo ID" field.
5.) In the "Custom Thumbnail" field, click the (+ ADD) button to upload a .jpg image as the placeholder thumbnail for the vimeo video. (we recommend uploading custom thumbnail images that are 1860 x 1140 pixels in .JPG format)
6.) Click DONE to save the new video addition to your MEDIA LIBRARY and repeat the process for any additional videos you have.
7.) Drag-and-drop the video to assign it to a menu title in your WEBSITE MENU column, just like you would with any images.
Option 2: "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.
ADMIN – ACCOUNT
Learn about the ACCOUNT tab in your website admin
Watch this video to learn about all the website customizations available in your admin under the Account tab. Watch fullscreen to see all the details.
[Watch fullscreen to see all the detail]
ADMIN – MEDIA LIBRARY
Learn about the MEDIA LIBRARY tab in your website admin
[watch fullscreen to see all the detail]
Additional Advanced Topics
ADMIN – DESKTOP LAYOUT
Learn about the DESKTOP LAYOUT tab in your website admin
Watch this video to learn about all the website customizations available in your admin under the Layout tab. Watch fullscreen to see all the details.
[watch fullscreen to see all the detail]
The next video is for the Images and Video Desktop settings but can also be used for the Images and Video Overrides.
The next video is for the Thumbnail Desktop settings but can also be used for the Thumbs Overrides.
The next video is for the Caption Desktop settings Custom Placement but can also be used for the Caption Overrides.
ADMIN – NAVBAR
Learn about the NAVBAR tab in your website admin
Watch this video to learn about all the website customizations available in your admin under the Navbar tab. Watch fullscreen to see all the details.
[watch fullscreen to see all the detail]
ADMIN – PDF BUILDER
Learn about the PDF BUILDER tab in your website admin
Watch this video to learn about all the website customizations available in your admin under the PDF Builder tab. Watch fullscreen to see all the details.
[watch fullscreen to see all the detail]
ADMIN – Mobile and Table Layout
After you check out your site on a mobile and tablet device you may want to make adjustments to the layout (this is optional and mostly to solve conflicts as your site is fully responsive). Go here to see what adjustments are available and how to use them: https://support.aphotofolio.com/hc/en-us/articles/115001613473--New-Admin-Mobile-Layout https://support.aphotofolio.com/hc/en-us/articles/115001613573--New-Admin-Tablet-Layout
ADDITIONAL TOPICS
Visit our Addition Topics page for newly released features and advanced settings: https://support.aphotofolio.com/hc/en-us/sections/115000396693-Additional-Topics
SEO
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.
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.
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.
Advanced SEO
Turning the Advanced SEO: ON 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 and that's it (NOTE: This is different than turning the Global Browser Title OFF because nothing is appended ). Also note the browser title field (from above) is only used on the homepage of the site.
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.
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 ready to make your site “live”
Once your site is live you might want to download our free iPad App.
Comments
0 comments
Article is closed for comments.