Summary
- Code the behavior of Interactivity
Tag: Google
-
RE:Creation No. 1: Google | CSS (Round 2)
Summary
- Style for Usability: Interactivity
- Style for Visual Design: Colors & Graphic Elements of Groups
- Style for Visual Design: Layout
-
RE:Creation No. 1: Google | CSS (Round 1)
Summary
- Style for Usability of Interactive Elements: Active Area
- Style for Visual Design: Colors & Graphic Elements of Individuals
This is the first round of Cascading Style Sheets—CSS for short. CSS is a Style Language that defines the visual design of an HTML document. This single responsibility of CSS makes the structured content of the document reusable in different contexts.
Active Area
Interactive Elements (IE) in a web page pertain to elements that can be interacted upon. Common examples of IE are links, textboxes, buttons, and other form elements. A way of improving the usability of IE is by optimizing its Active Area (AA) so that it is big enough for clicks and taps. A good rule of thumb is having a minimum dimensions of 44 x 44.
Linked texts such as navigation items could have an optimized active area by having a padding. Form Elements such as textboxes and buttons, on the other hand, could be styled with a legible font size and a height.
.secondary-navigation a { display: inline-block; padding: .75em 0; } .text-search input { height: 36px; font-size: 1em; } .search-actions button { height: 36px; font-size: 1em; }Colors & Graphic Elements
This part of the activity is where we would style the elements according to the visual design or look of the web page. The colors pertain to background and foreground color—in the case of a button, the background color is the color of the button and the foreground color is the color of the text.
Graphic Elements include borders, shadows, lines, among other things that make up the look of the element.
.account-action a { background-color: blue; color: white; text-decoration: none; }Demo
See the Pen RE:Creation No. 1: Google | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
-
RE:Creation No. 1: Google | HTML (Round 2)
Summary
- Convert the marked up groups into
<div class="group-name"> - Instead of
<div>, mark up the group of form elements in<form> - Mark up the text nodes in
<div class="text"> - Add class attributes to elements that need to be differentiated
- Convert the marked up groups into
-
RE:Creation No. 1: Google | HTML (Round 1)
Summary
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individuals in HTML
-
RE:Creation No. 1: Google | Plain Text (Round 2)
Summary
- Interact to reveal more content and convert into plain text
- Structure content by grouping and labeling them based on function
-
RE:Creation No. 1: Google | Plain Text (Round 1)
A screenshot of Google’s homepage. 7 September 2018 Convert Content into Plain Text
The first step of re-creation is to convert content into plain text. The structure isn’t important at this round. However, as a suggestion, we could start from left to right, top to bottom. For example, the first content could be seen at the top–right:
Gmail Images Menu Icon Sign In Button
Interacting with the elements is not yet required (e.g., clicking the menu icon). Convert only those that we could see visually. Later in the next round, we’ll convert the content that would be revealed while interacting with the elements.
This activity of gathering available content of a web page is part of the process called Content Inventory.
Demo
See the Pen RE:Creation No. 1: Google | Plain Text (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.