Internet Publishing About eBook Gallery P1 2 3 4 5 6 7 8 9
Interactivity Footers eBook Assignment Example

Interactivity

In Chapter 2: Interactivity Advantage, you learned that a well-designed website should include elements that enable the website publisher and website visitors to engage in interactive, two-way communication.  You also learned about a variety of elements you can use to promote interactivity, such as contact pages, social media integration, and web-based forms.  Interactive elements also can serve as calls-to-action.

Footers are a great way to implement interactivity!

Footers

Responsive Footers are sections at the bottom of a website's pages that adjust their layout and design based on the screen size and device being used.  They typically contain important information such as navigation links, contact details, privacy terms, and social media icons ensuring accessibility and usability across different devices.

W14 Assignment

See below and Blackboard for details.

CodePen

See the Pen Untitled by Álvaro (@alvarotrigo) on CodePen.

1. Add a Responsive Footer with social media interactivity (by Mahesh at Inferno)
2. Update the colors according to your style guide.
3. Even if you do not have social media accounts, add them anyway and link them to the social media platform's home pages to meet course objectives.
4. See the footer example and the same footer at the bottom of this page with added styles such as more social media fa icons and an animated gif (by Anna C. Gilmore) as a background image.

Assignment Examples

Internet Publishing Intro About Purpose Gallery

Internet Publishing

Interactivity in Responsive Footers

"Walking on a Dream"

Intro

Replace 'Intro' placeholder text:   A well-designed website should include responsive footers that enable the publisher and visitors to engage in interactive, two-way communication as calls-to-action.

About

Replace 'About' placeholder text:   Responsive footers are sections at the bottom of a website's pages that adjust their layout and design based on the screen size and device being used.

Purpose

Replace 'Purpose' placeholder text:   They typically contain important information such as navigation links, contact details, privacy terms, and social media icons ensuring accessibility and usability across different devices.

(Chunked text for small devices.)

Future Multimedia

Replace placeholer title and text:   The two columns will below will include future responsive multimedia.   Resize the browser window to see the effect!

Title1

Responsive one and two-column layouts are most common and best for all device screens, especially mobile. This column will include a future responsive multimedia video. This column will include a future responsive multimedia video. This column will include a future responsive multimedia video.

Title2

Responsive one and two-column layouts are most common and best for all device screens, especially mobile. This column will include a future responsive multimedia video. This column will include a future responsive multimedia video. This column will include a future responsive multimedia video.


Replace placeholer title and text:   This text area should describe some of the content of your images.