Designing for ecommerce smartsite graphics in depth
Download
1 / 49

Designing for Ecommerce: SmartSite Graphics in Depth - PowerPoint PPT Presentation


  • 291 Views
  • Uploaded on

Designing for Ecommerce: SmartSite Graphics In Depth Jason Zook Basepage changes Changing your site’s look and feel to match the season Adding new banners/promotions to your header Adding flash banners to your site Utilizing the HTML Editor to add flash to your homepage

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Designing for Ecommerce: SmartSite Graphics in Depth' - jacob


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Designing for ecommerce smartsite graphics in depth l.jpg
Designing for Ecommerce:SmartSite Graphics In Depth

Jason Zook

  • Basepage changes

    • Changing your site’s look and feel to match the season

    • Adding new banners/promotions to your header

  • Adding flash banners to your site

    • Utilizing the HTML Editor to add flash to your homepage

    • Using an outside source, Dreamweaver, to add flash to your site

  • Working with various product images

    • Getting the most out of your images

  • Creating “Smart Graphics”

    • Creating multi-tasking banners and graphics

  • Putting mobile controls in your hands

    • Creating CSS that will allow your site to display properly on a mobile device


Basepage changes l.jpg

Basepage_xxx.htm controls 3 different areas of your site

TOP:

LEFT: Underneath the left navigation

Basepage Changes

Seasonal Change

BOTTOM:


Basepage changes3 l.jpg
Basepage Changes

Seasonal Change

Working with the Top without Editing the Basepage

Changing the graphic but keeping the same file name


Basepage changes4 l.jpg

Right click on image

Save two versions

Update the image

Now have new and original

Basepage Changes

Seasonal Change


Basepage changes5 l.jpg
Basepage Changes

Seasonal Change

Before

After


Basepage changes6 l.jpg
Basepage Changes

Seasonal Change

Changing the BasePage_xxx.htm

Root > HtmlTemplates > BasePage_xxx.htm

  • Always a good

    idea to backup

    your files

  • Open BasePage


Basepage changes7 l.jpg
Basepage Changes

Seasonal Change

  • Find image you want to update


Basepage changes8 l.jpg
Basepage Changes

Seasonal Change

  • Save new logo with new name

  • Replace old file/graphic name with new file

  • Save BasePage_xxx.htm, upload to site and view changes


Basepage changes9 l.jpg
Basepage Changes

Adding a New Banner to your BasePage

  • Adding a new banner to your BasePage_xxx.htm

    • Before

    • After


Basepage changes10 l.jpg
Basepage Changes

Adding a New Banner to your BasePage

  • Open BasePage_xxx.htm

    • Find location that your new banner would fit and create your banner

      to fit those dimensions


Basepage changes11 l.jpg
Basepage Changes

Adding a New Banner to your BasePage

  • Create image and static page if needed

    • Add image to BasePage_xxx.htm and link to static page

    • Save BasePage_xxx.htm


Basepage changes12 l.jpg
Basepage Changes

Adding a New Banner to your BasePage

  • View your changes and test your link


Adding a flash banner l.jpg
Adding a Flash Banner

Using HTML Editor

  • Adding a Flash Banner to your Home Page using the

    HTML Editor

  • Open Content Management

    1.) Content 2.) Website 3.) Text 4.) New Site Text


Adding a flash banner14 l.jpg
Adding a Flash Banner

Using HTML Editor

  • Select “HomePageRotatingBanner”

  • Select “Flash Manager”

  • Select “Upload Flash”

  • Select “Browse”


Adding a flash banner15 l.jpg
Adding a Flash Banner

Using HTML Editor

  • Find your .swf file

  • Select Open

  • Select Upload


Adding a flash banner16 l.jpg
Adding a Flash Banner

Using HTML Editor

  • Input your Width and Height

  • Select Insert

  • Save your changes

  • Upload your swf

    to your image directory

    located at: Root/Images


Adding a flash banner17 l.jpg
Adding a Flash Banner

Using HTML Editor


Adding a flash banner18 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application

  • Open Dreamweaver

    • Open a new document

    • Clear all extra code, <!DOCTYPE, <head>, <body>…

    • Save

    • Insert > Media > Flash

    • Enter Title, OK


Adding a flash banner19 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application

  • Two Important Files

    • AC_RunActiveContent.js

    • YourFlashFile.swf

  • Copy Both

  • Place in images directory

    Root / images


Adding a flash banner20 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application

  • Update your Dreamweaver File

    • AC_RunActiveContent.js, needs to be in images folder and your file needs to reference that.

    • <script src="/images/AC_RunActiveContent.js" type="text/javascript"></script>

    • Code needs to be entered that tells the file where the AC.js is located, if not, Flash will not show up.


Adding a flash banner21 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application

  • Update your Dreamweaver File

    • 4 places to edit

    • Anytime you see your swf file referenced, you need to update that code with the location of that file

    • Before: ,'src','YourFlashFile',

    • After: ,'src','/images/YourFlashFile',


Adding a flash banner22 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application

  • Copy your code from Dreamweaver

    • Content Management

    • Content > Website > Text > New Site Text

    • Select HomePageRotatingBanner

    • Select “<>” HTML

    • Paste

    • Save


Adding a flash banner23 l.jpg
Adding a Flash Banner

Using Dreamweaver / Web Development Application


Product images l.jpg
Product Images

Getting the most out of your images

  • Main Product Images

    • Large, Thumbnail and Tiny

  • Additional Image(s)

    • Extra Large, Glamour shots or any additional photos

      Main Product Images Additional Images


Product pictures l.jpg
Product Pictures

Getting the most out of your images

  • Main Product Images

    • Large - Maximum size of 520px wide by 400px high


Product pictures26 l.jpg
Product Pictures

Getting the most out of your images

  • Main Product Images

    • Thumbnail and Tiny

      Thumbnail - Maximum size of 150px wide by 100px tall

      Tiny - Maximum size of 70px wide by 70px tall


Product pictures27 l.jpg
Product Pictures

Getting the most out of your images

  • Additional Images

    • These images are categorized into a group called “XLarge”.

  • View More Images


Product pictures28 l.jpg
Product Pictures

Getting the most out of your images

  • Improper Image Size Manipulation


Product pictures29 l.jpg
Product Pictures

Getting the most out of your images

  • Correct Image Size Manipulation


Product pictures30 l.jpg
Product Pictures

Getting the most out of your images

  • Looking at them side-by-side makes the difference obvious


Product pictures31 l.jpg
Product Pictures

Saving your images

Finally, we are ready to save our images. Your graphics person will want to create a folder for them. This folder should contain the following folders:

1_TIFFs

Large

Thumbnail

Tiny

Xlarge


Product pictures32 l.jpg
Product Pictures

Saving your images

  • Starting with a good image that is 700px by 580px

Large

XLarge

Thumbnail Tiny


Product pictures33 l.jpg
Product Pictures

Saving your images

This process may seem complicated, but if your graphics people use Photoshop, all of these resizing and saving tasks can be accomplished with a single click in Photoshop’s Actions Pallet.

Your graphics people can create their own Action, or we can make several of these actions available to you.


Product pictures34 l.jpg
Product Pictures

Saving your images

In this Last scenario, we have a good image that is 420px high.

Since the height limit is 400px, it will need to be made smaller for the Large image, yet it is not really large enough for an XLarge image.

You may want to consider ignoring the XLarge image to avoid frustrating your client by showing him/her an almost identical picture in the pop-up window.

In this case, you could resize the image to 400px high and save a Large, Thumbnail and Tiny version only.

400px high

420px High


Creating smart graphics l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Creating Multi-Tasking Banners and graphics

  • Old Method

    • Nothing for Spiders to Crawl


Creating smart graphics36 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Smarter Graphics

    • Create using both graphic and html

    • Add keywords to improve keyword rankings

    • Create multiple banners that rotate for fresh content

    • Utilize Title Tags


Creating smart graphics37 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Creating a banner in Dreamweaver / Web Dev. Application

    • Background graphic

    • Leave space for html / text to appear overtop

    • Save image, to local and to website images folder

    • Open Dreamweaver

    • Using CSS to set up the banner, control layout, text, color

    • Adding Product links but also adding Keywords to improve ranking based off Keyword Research Analysis


Creating smart graphics38 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Working in Dreamweaver

    Set width, height, and background image with no repeat

    Add Product Links

    Add Keyword Links


Creating smart graphics39 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Keys to remember

    • Add absolute or full urls for links

    • Add title tags to links

    • Make image sources relative urls

  • Save and create 2 more banners

    • Add new keyword phrases and links to each banner

    • Optional; 3 different graphics with different product on each


Creating smart graphics40 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Adding Banners to Category Pages

    • Content Management > Content > Website > Menus > XXX Menu

  • Category > Edit Node


Creating smart graphics41 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Adding Banners to Category Pages

    • Text > New Menu Node Text

  • Under Menu Node Text Type

    • Desc

    • Select Html “<>”

    • Paste code


Creating smart graphics42 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Set up multiple banners to start and stop on certain dates

    • Check “Use Start Date”

      • Enter Date to start

    • Check “Use End Date”

      • Enter Date to end

    • Save

    • Repeat for each banner


Creating smart graphics43 l.jpg
Creating Smart Graphics

Creating Multi-Tasking Banners and graphics

  • Taking it a step further

    • Fresh Content

    • Create 3 Banners

      • Rotate every 2 days

    • SQL script to ensure Banners rotate continuously

      • When one ends, SQL script will add 6 days so that banner will start up again in 6 days. This continues for each banner until you choose to stop the rotation.


Putting mobile controls in your hands l.jpg
Putting mobile controls in your hands

  • IIS (Internet Information Services)

    • ISS can now identify type of browser and device and redirects can be created.

  • Current CSS

    • Created for screens 800px wide but best viewed by screenresolution set at 1000px

    • This mobile browser isset at 240px wide


Putting mobile controls in your hands45 l.jpg
Putting mobile controls in your hands

  • Many different ways to access the web

    • Most cell phones

    • Smartphones; iPhone, Android, Palm, BlackBerry…

    • iTouch, iPad, PSP…

    • List grows everyday

  • Resolution can vary

    • Starting at 240px wide


Putting mobile controls in your hands46 l.jpg
Putting mobile controls in your hands

  • IIS redirects

    • Create mobile/smartphone CSS

    • Tell which browsers/devices should redirect to new CSS

    • ISS can identify user agents:

      • iPhone = iPhone

      • Android = *.mobile.*Safari or Mozilla/5.0

      • Palm = palm

    • When a browser/device you have selected enters your site, ISS can detect the user agent and it will be automatically redirected to your new CSS.


Putting mobile controls in your hands47 l.jpg
Putting mobile controls in your hands

  • Mobile CSS

    • Create different widths based off % or pixels

      • % will be based of current screen resolution re. 100% = full resolution

    • Reposition items and products on your site

    • Option of not displaying sections of your site

      • Large Banners

      • Flash

      • Extra navigation


Putting mobile controls in your hands48 l.jpg
Putting mobile controls in your hands

  • Mobile CSS

    • Pages will be lighter and will load faster

    • No more broken images or broken up site

    • No more horizontal scrolling

    • You control the userexperience instead ofbrowser or device controlling the experience


Putting mobile controls in your hands49 l.jpg
Putting mobile controls in your hands

  • Mobile CSS

    • Research other sites

    • Research your siteBefore After


ad