designing for ecommerce smartsite graphics in depth
Download
Skip this Video
Download Presentation
Designing for Ecommerce: SmartSite Graphics In Depth

Loading in 2 Seconds...

play fullscreen
1 / 49

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


  • 294 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
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
Basepage_xxx.htm controls 3 different areas of your site

TOP:

LEFT: Underneath the left navigation

Basepage Changes

Seasonal Change

BOTTOM:

basepage changes3
Basepage Changes

Seasonal Change

Working with the Top without Editing the Basepage

Changing the graphic but keeping the same file name

basepage changes4
Right click on image

Save two versions

Update the image

Now have new and original

Basepage Changes

Seasonal Change

basepage changes5
Basepage Changes

Seasonal Change

Before

After

basepage changes6
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
Basepage Changes

Seasonal Change

  • Find image you want to update
basepage changes8
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
Basepage Changes

Adding a New Banner to your BasePage

  • Adding a new banner to your BasePage_xxx.htm
    • Before
    • After
basepage changes10
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
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
Basepage Changes

Adding a New Banner to your BasePage

  • View your changes and test your link
adding a flash banner
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
Adding a Flash Banner

Using HTML Editor

  • Select “HomePageRotatingBanner”
  • Select “Flash Manager”
  • Select “Upload Flash”
  • Select “Browse”
adding a flash banner15
Adding a Flash Banner

Using HTML Editor

  • Find your .swf file
  • Select Open
  • Select Upload
adding a flash banner16
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
Adding a Flash Banner

Using HTML Editor

adding a flash banner18
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
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
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
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
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
Adding a Flash Banner

Using Dreamweaver / Web Development Application

product images
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
Product Pictures

Getting the most out of your images

  • Main Product Images
    • Large - Maximum size of 520px wide by 400px high
product pictures26
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
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
Product Pictures

Getting the most out of your images

  • Improper Image Size Manipulation
product pictures29
Product Pictures

Getting the most out of your images

  • Correct Image Size Manipulation
product pictures30
Product Pictures

Getting the most out of your images

  • Looking at them side-by-side makes the difference obvious
product pictures31
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
Product Pictures

Saving your images

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

Large

XLarge

Thumbnail Tiny

product pictures33
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Putting mobile controls in your hands
  • Mobile CSS
    • Research other sites
    • Research your siteBefore After
ad