Objective

To review Photoshop layout tools by creating a simple page mock-up. To be introduced to Bootstrap's responsive framework by developing a Personal Process Page similar to this example.

Discussion

Photoshop is an essential tool used by web designers to create visual "mock-ups" of web pages for client approval. Once approved, Photoshop has powerful tools to help you optimize the pixel elements for web development. Alternatively, many designers prefer to use Illustrator for mock-ups instead (see tutorial). Also conisder that Illustrator files can be exported to Photoshop with layers intact.

As the world starts viewing more web sites on smaller hand-held devices, web designers have to design for screens from 300 to over 2400 pixels wide. One can achieve this by making web sites elastic and "responsive" to varying widths. There are many frameworks available to achieve this, but the most popular is Bootstrap.

Using an existing framework saves development time because you have access to pre-written code. Unfortunately, there is a steep learning curve and some people feel restricted by the somewhat limited customization options available. Others feel empowered because much of the technical heavy lifting has been done and designers can now focus on content.

Access to Web fonts have improved quite a bit in recent years. Although Verdana and Georgia are still excellent choices for screen readability, there are now other options. But designers still have to be very careful choosing text fonts as some typefaces have not been properly hinted for low-res screens.

Dreamweaver can access Adobe Fonts, but there are technical and quality downsides (i.e. Adobe fonts will only work as long as you keep paying Adobe for your subscription). Many people feel Google Fonts is a better alternative. You can download as many fonts as you want and install them on your desktop for use in any application (they're open source!). Google also has super-fast servers that will load up these same fonts for all your web pages for free.

Tip: When revising web sites, duplicate the web site's root folder and give it a new name (i.e. "p1_final2"). Be sure all the files required for the web site are inside the root folder (do NOT link to local files outside of this folder).

Another tip: When customizing Bootstrap styles, one should not edit the original downloaded CSS. Instead one should add all additional customizations in a separate file. This is so that the Bootstrap source files can up updated without wiping out your customizations.

Reference links

• Bootstrap Expo showcase
• Bootstrap CSS reference
• Bootstrap components reference
• Boostrap source files from Github (code > dowload zip)

Procedure

Overview: Create a Photoshop mock-up. Export pixel elements to Dreamweaver. Download and set up Bootstrap. Add content. Customize Bootstrap styles. Note: replace bold with personalized info.

Making the Photoshop mock-up

1. open example in a browser
2. take a screenshot at 1024x768
3. download 1024x768 blank browser chrome from designerstoolbox.com
4. open downloaded file and screenshot in photoshop
5. copy/paste screenshot into browser chrome
6. delete unneeded layers
7. draw new box "header", fill color = ??
8. add type layer: "Jane Smith"
9. add type layer: "GDS 220 Process Page"
10. spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
11. view > ruler (cmd+R): draw guides for slicing
12. slice tool: slices from guides
13. rename key slice "header"
14. file > save for web (preset=GIF 32 no dither; images only, user slices; location="html/_process/")
15. examine exported GIF, retouch if needed

Setting up Bootstrap

1. duplicate "html/_process", rename "html/_process_old"
2. download boostrap files from Github; extract
3. copy "dist", "fonts", "js" to "html/bootstrap_master"
4. copy "docs/assets" and "docs/examples" to "html/bootstrap_master"
5. create new folders "css", "images" in "html/bootstrap_master"
6. inspect contents of "examples" folder

Starting a Bootstrap project

1. copy contents of "html/bootstrap_master" into "html/_process"
2. rename "index.html" as "index_old.html"
3. launch dreamweaver
4. site > new site: site name=gds220-process;
   local site folder=faa999/gds220/html/_process); export STE file
5. duplicate "examples/jumbotron-narrow/index.html" (cmd+D)
6. site > advanced > recreate site cache
7. move duplicated file to root folder (update=yes)
8. rename duplicated file "index.html", open
9. open "index_old.html"
10. select <body>
11. copy/paste content into "index.html" (left column)
12. copy/paste document title from one file into the other
13. view > toggle live view (opt+F11)

Modifying a Bootstrap file

1. delete <div.header>
2. delete right column <div.col-lg-6>
3. change left column selector to <div.col-lg-12>
4. select <div.jumbotron>
5. window > insert: boostrap components
6. insert > breadcrumbs (after)
7. replace placeholder <ol> with real copy
8. view > toggle live view (opt+F11)
9. delete jumbotron content
10. insert > responsive image; save
11. double-click placeholder image, replace with "header.gif"
12. change <alt> tag
13. move <div.jumbotron> to above <div.container>
14. move <footer> content to inside <footer.footer>

Styling a Bootstrap file

1. window > CSS designer: add selector (source=new file "css/process.css"; media=global): 
   • .jumbotron: margin-bottom=15, padding=0, border=0, bg-color=???
   • .jumbotron .img-responsive: margin-left/right=auto
   • .breadcrumbs: margin-bottom=120px, padding=0, bg-color=white
   • .container .jumbotron , .container .breadcrumbs: border-radius=0px
   • a: color=???
   • a:hover, a:focus: color=???
   • body: padding-top=0
   • .marketing .col-lg-12: padding=0
   
2. window > CSS designer: add selector (source=process.css; add media query: min-width=768px): 
   • .row.marketing h4: margin=0, float=left. font-size=14px,
   line-space=1.429
   • .row.marketing p: padding-left=150px
   • .row.marketing ul: padding-left=190px
   
3. add <small> to <div.breadcrumbs> and <div.footer>
4. add glyph to <h4> items:
   <span class="glyphicon glyphicon-stop" aria-hidden="true" style="color:#1CA18A"></span>
5. file > preview in browser (opt+F12 and cmd+F12)
6. file > print: preview
7. window > CSS designer: add selector (source=process.css; add media query: media=print): 
   • .breadcrumb, .footer: display=none

Adding Google fonts

1. browse to fonts.google.com/#HomePlace:home
2. search for "roboto slab", click "add to collection"
3. click REVIEW, then USE
4. download font family and install
5. select only weights needed for web page (i.e. "normal" and "bold")
6. copy code to dreamweaver (near top of <head>):
   <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
7. window > CSS designer: edit selector (source=process.css):
   • body: font-family="Roboto Slab", Verdana, sans-serif (manage fonts: custom font stacks)
8. file > preview in browser (opt+F12 and cmd+F12)

Making a favicon

1. launch Illustrator
2. file > new "ico48.ai": profile=web: 48px x 48px
3. create art
4. file > save for web: "ico48.png"
5. go to tools.dynamicdrive.com/favicon
6. upload "ico48.png" (merge with both 32 and 48px icons)
7. download "favicon.ico", move to root folder
8. open "index.html" in a browser
9. refresh browser cache (shift+F5)

Grading

1. publish your site using "gds220-admin" site (see separate instructions)
2. keep this page updated with your work as the semester progresses