Project Two: Responsive Design & Business Web Site Research
Part One: Research responsive web design on the internet. Write up 3-5 paragraphs on what you have found. Be sure to save your sources. You will post these in the footer on page two of this project.
Part Two: Choose a type of business you would like to develop a website for. You will use this fictitious business for Project 3. Do research into other businesses in the same field. What do their websites look like? Are they responsive - do they adjust to different window sizes from a large window in a normal monitor, down to the size of a tablet and also to a size that would be viewed in a phone?
Project Requirements
- Choose the business type you will be creating a website for
- Post the business information on the Discussion Board. Include a business name if possible.
- Create a simple 2 column page layout/design to use on all pages of this website. Use a headline on all pages (could be "Project Two - Web Research"). Add a page identifier to each page.
- Page One: Your Business
- Create a page explaining what business type you are researching and creating a website for (This website will be Project 3).
- Use Headlines and paragraphs to break up the copy that you are writing.
- Page Two: Responsive Design
- Research Responsive Web Design on the web.
- Write several paragraphs about responsive design.
- Discuss why using it is important.
- Write a brief analysis comparing all the business websites you chose
- Post links to your sources in your page footer.
- Page Three - Six: Business Research
- Find 4 or more business websites (in the same field as the one you will be working on for Project Three).
- Create a page for each. For Page names use Example 1, Example 2, etc (or similar). DO NOT USE Page 1, Page 2, etc
- Discuss each businesses page design on their respective pages in your website.
- Add a screen capture of a page of their traditional sized website (reduce image to fit on your web page)
- Add a screen capture of one of their pages from a small browser window or phone size. Make this close to actual size.
- Compare the small & large pages for design content
- Does design & page contents transform well (large vs small)?
- Are the websites responsive? Certain business types are more likely to be than others.
- Check the source code and see how many CSS External style pages are linked.
- Write several paragraphs discussing this.
- Post link to their websites in your page footers.
Page Layout
- Use a consistent 2 column page design
- Master Headline on all pages
- Page Identifier on each page
- Use a Google Font for headlines
- Link all the pages together. Use the style of navigation covered in either Exercise 7 or 8
- External links should open in a new window
- Use a wrapper div to contain your content with a set width
- Opening page must be named index.html
- Folder name Project2
- All images must be formatted for web
- Style images using CSS (padding, margin, borders).
- Use the p & h tags to format your text.
- Use CSS to format all text, fonts, colors, sizes, padding, margin, etc.
- Create a CSS External Style Sheet for main page styles (create consistency)
- Use CSS Document Styles for specific page styles.
- Use CSS Inline Styles as needed
Some Suggested Fictitious Business Choices
Choose one of the following businesses or think of your own.
- Diner / Restaurant
- Coffee Shop
- Floral Shop
- Bike Shop (motorcycle or bicycle)
- Graphics Business
- Artist Portfolio (you can create one for yourself)