Summary
- Style for Usability: Interactivity
- Style for Visual Design: Colors & Graphic Elements of Groups
- Style for Visual Design: Layout
Interactivity
Hover, click, long–press, and other gestures that we do on Interactive Elements constitute Interactivity. Usability must be enhanced in the different states of these interactivity. One basic example is to provide visual feedback when an Interactive Element is hovered.
.google-apps a {
text-decoration: none;
}
.google-apps a:hover {
text-decoration: underline;
}
Layout
One important approach when styling for the layout of a web page is Responsive Web Design. We must ensure that even though we started from a desktop version of the web page, its layout is still usable in mobile and tablet screen sizes. A good rule of thumb is styling the layout for mobile first and go wider as we go along.
Layout constitutes the space around the element with regard to other elements and its positioning in the page.
Disclaimer: mobile and desktop have two different contexts—that’s why it’s important to note that Google has custom web pages for mobile and desktop. We cannot discover them by simply resizing our browsers. For the purpose of this activity, our objective is to have a usable layout for mobile based on the desktop version.
Demo
See the Pen RE:Creation No. 1: Google | CSS (Round 2) by Brian Dys (@briandys) on CodePen.
Leave a Reply