Responsive HTML


Take Aways

Responsive HTML gives designers more control over design decisions, making web content more accessible and usable for viewers. Since so many people surf the web using their handheld devices, responsive design is crucial for positive user experience.

By adjusting your web window to the smallest width, you can see the responsive design in action. This project was created to practice implementing responsive design. If a real website was being created, a lot of design components would need to be altered for accessibility/readability purposes. View site here.

***Since I completed this project, I have created my own mobile and tablet responsive website for an art piece. You Can view that website here.

Responsive Design Choices

Navigation

My navigation becomes a bar at the top of the screen on a phone, instead of links floating right over a photo. The hover effects also change on the phone display.

Background

There is a background image for normal monitors, but on phones there is a white background. The white background helps viewers read on a smaller screen. In addition, the original background image becomes a header behind the name and tagline.

Font Size and Color

Font color changes with background color to maintain a level of contrast.

Footer

The footer gains a background color on phone display since there is no longer an image behind it.

Leave a comment

Your email address will not be published. Required fields are marked *