Responsive Web Design

Template Assignment
Responsive Web Design Template Assignment
For this lesson you will:
• Learn about the importance of Responsive Web Design
• Review your options when it comes to do-it-yourself responsive e-
commerce sites
• Learn about Responsive Web Design templates
• Complete an exercise using a free template available through
w3schools
• Document the exercise
• Write a brief report about Responsive Web Design Templates
Why use Responsive Web Design (RWD)?
• The site adjusts its size to its platform desktop, laptop or smart phone
• Can reach many more customers
• Designing for each viewport size makes your site design stronger
• Improves your SEO: recommended by Google
• Other reasons
How to create a responsive web site
• Hire a Web Designer
• Expensive
• Do it yourself from scratch
• Very daunting if not a trained Web Developer
• Content management systems like WordPress
• Still need some technical knowledge
• Number of choices for plug-ins can be overwhelming
• E-commerce builder like Wix or Weebly
• More expensive than hosting your own HTML or WordPress site
• Limited options
• Use a template
Why use responsive web design templates?
• Templates are a great way to tap into the power of responsive design
without having to become a web developer. Here are some other
reasons:
• More design flexibility
• Reduced costs
• Credit card processing can be done using relatively
inexpensive methods such as: PayPal, Authorize.net
• Can be combined with inexpensive shopping carts
Why use responsive web design? (cont.)
• Cons:
• You still need to know a little something about:
• Coding
• Content creation
• Graphics
• Writing
• SEO
Bootstrap
• One of the most popular templates for Responsive Web Design is
Bootstrap.
• Developed by Twitter
• Open-source combines HTML, CSS, and JavaScript
• The best resource http://getbootstrap.com/
• Other resources:
• http://www.w3schools.com/bootstrap/
• http://www.codecademy.com/learn
Responsive Web Design Template Exercise
Before starting the exercise:
• Open a new Word Document. Title it templateExercise_first initial last
name (example: templateExercise_jsmith)
• In the Word Document type your business name
• example: SMART HATS
• Write a slogan for your business
• example: OUR HATS MAKE YOU SMARTER
• Write a suggestion for customers
• examples: SEE OUR FULL LINE OF SMART HATS, LEARN MORE ABOUT OUR
SERVICES, etc.
Responsive Web Design Template Exercise
Before starting the exercise:
• Type the name of one of your products or services
• Example:
• Smart Hats
• Write 4 short descriptions of your product or service such as:
• Make you smarter
• Advance your career
• Help you meet smart people
• Keep your head warm
Responsive Web Design Template Exercise
• Be prepared to document your exercise by taking screenshots when
prompted
• Visit http://www.w3schools.com/w3css/w3css_templates.asp
• Follow along with the video
• Pause as needed
Responsive Web Design Template Exercise
Follow the step-by-step instructions in the video

https://youtu.be/YZyOkKrKhU8

Resources needed to complete the assignment are on the following

slides
Responsive Web Design Template Exercise:
Font Awesome
http://fontawesome.io/icons/

fa-graduation-cap
Responsive Web Design Template Exercise:
PayPal Button
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="yourname@yoursite.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Item">
<input type="hidden" name="amount" value="999.99">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<button>Buy me!</button>
</form>
Responsive Web Design Template Exercise:
Name of Image File
Streetart2.jpg
Responsive Web Design Template Exercise:
PayPal Developer Site
https://developer.paypal.com/
Responsive Web Design Template Exercise:
Completing the Assignment
• To complete this assignment:
• Paste these questions into the Word Doc with your screen captures and
answer them:
• Tell us 3 or more things you liked about Responsive Web Design Templates. Why?
• What didn't you like. Why?
• Would you consider using this or something like it for a small business site? Why or
why not?
• Would you like to use this for your final project assignment for this class?
• Cut and paste these answers into a post for this week's discussion
• Comment on 2 other student’s posts in the discussion
• Upload the Word Document with the screen captures to this week’s
assignment