Hover (ホバー) is the state in which the mouse pointer rests over an element on the screen, such as a button or link, without clicking it.
Because hover comes before the press, it gives the system a clue to which element the user is looking at. The system can use this state as a cue to respond, for example by changing the element's color or showing a short note such as a tooltip. A touch screen, operated by touching it directly with a finger, has no stage of resting a pointer, so guidance that relies only on hover may not reach the user.
AnalogyIt is like resting a fingertip on the spine of a book on the shelf without pulling it out yet.
How to rememberIn English, hover describes a bird or helicopter staying still in midair. Link it to the pointer floating motionless above an element.
Exam points
Mix-upHover (ホバー) comes before the click: just resting the pointer on an element does not yet run the action a click would trigger.
A rollover (ロールオーバー) is an effect in which an element's color, image, or other aspect of its look switches when the pointer moves over it.
Pointer is outside the element
Pointer moves over it (hover)
Element's look switches
Pointer leaves, look returns
Moving the pointer away from the element restores its original look.
4 / 4
Normally the original look comes back when the pointer moves away, and the effect is made by swapping an image or changing a color. The change lets users confirm, before pressing, that the element can be pressed and which one they are pointing at now.
AnalogyIt works like a porch light that turns on when someone approaches and goes off when they leave.
How to rememberRoll over means to roll across the top of something. Picture the image flipping to a new face each time the pointer rolls across the element.
Exam points
Mix-upHover (ホバー) names the state of resting the pointer, while rollover (ロールオーバー) names the effect of the look switching during that state.
Mix-upA rollover changes the color or image of the element itself, while a tooltip (ツールチップ) shows a small note beside the element.
A GUI (Graphical User Interface) is a user interface that shows graphics such as icons, buttons, and windows on the screen and lets users operate it by pointing at them with a mouse or by touch.
Because what you operate is visible, you can look at the screen and choose without remembering command names. The list boxes, menus, and other controls from earlier units are all building blocks of a GUI. GUI screens still involve some typing, and helper features are provided to cut down that effort.
AnalogyIt is like ordering by pointing at a menu with photos. You can choose by sight even if you do not know the name of the dish.
How to rememberThe G at the front stands for Graphical, which, like graph, refers to something drawn. Remember it as operating by pointing at drawn pictures.
Exam points
ExamAutocomplete (オートコンプリート) is an input aid that remembers words entered before and offers the ones matching the first few typed characters as candidates.
Mix-upA GUI is operated by pointing at graphics on the screen, while a CUI (Character User Interface) is operated by typing command strings on a keyboard.
CSS (Cascading Style Sheets) is a language for specifying how a web page looks, such as text color and size, backgrounds, and layout.
Shared style sheet (colors, text, layout)
Page A (loads it)
Page B (loads it)
Page C (loads it)
A CSS rule assigns a color, size, and so on to each part, such as a heading or paragraph, written in HTML, the language that describes a page's content and structure. If every page loads one file that gathers these rules (a style sheet), fixing just that 1 file changes the look of all the pages that load it at once.
AnalogyIf HTML is the manuscript, CSS is the printing instructions that say which typeface and colors to print it in.
How to rememberStyle Sheets are sheets of paper with styles written on them. Picture 1 sheet holding only the styling, laid over page after page.
Exam points
ExamCSS specifies how a web page looks, while HTML handles the page's content and document structure.
ExamUsing a shared style sheet (スタイルシート) across several pages makes it easier to keep colors and layout consistent site-wide than writing the decoration page by page.
Mobile first (モバイルファースト) is a policy of thinking first about ease of use on small-screen mobile devices such as smartphones when designing a website or similar.
Design for smartphones
Extend to tablets
Extend to PCs
Finally, extend the display to the wide PC screen to finish.
3 / 3
The design starts by deciding what goes on the small screen and then widens the display for devices with larger screens. A narrow screen operated by finger forces you to trim the information and make tappable areas large, so those limits become the starting point of the design.
AnalogyIt is like deciding first what goes in a small travel bag, so that with a big suitcase you only need to add things.
How to rememberFirst means at the very start. Read it as putting the small mobile screen on the design desk before anything else.
Exam points
Mix-upMobile first (モバイルファースト) is about the order in which design begins; a PC display is still prepared afterward.
Responsive web design (レスポンシブWebデザイン) is a way of building 1 web page so that its layout rearranges itself automatically to fit the screen width of the device showing it.
← Scroll the figure sideways →
Instead of preparing a separate page for each kind of device, the same page holds display rules for different screen widths written in CSS, and the browser picks the rules that fit the screen. For example, photos lined up in 3 columns on a wide screen are rearranged into 1 column on a narrow one.
AnalogyIt is like clothing made of stretchy fabric, where 1 garment fits the wearer's body.
How to rememberResponsive means quick to respond. Remember it as the page answering the signal of screen width by promptly changing shape.
Exam points
ExamWith responsive web design (レスポンシブWebデザイン), the same page changes its layout to suit the screen width and other display conditions, so there is no need to build separate pages for each device.
Mix-upMobile first (モバイルファースト) is a policy about which device to design for first, while responsive web design is a way of building pages whose display changes with the screen width.
A redirect (リダイレクト) is a mechanism that automatically sends a user who accesses one URL on to a page at a different URL.
Access the old URL
Server returns the new URL
Browser opens the new page
The browser opens the new address automatically, and the user sees the new page.
3 / 3
The web server answers a request for the old URL with the URL to forward to, and the browser receives it and opens that address automatically. It keeps links and bookmarks to an old URL working after a page has moved, and it also steers users from an unencrypted http URL to an encrypted https URL.
AnalogyIt is like a mail-forwarding service that delivers letters sent to your old address to your new one after you move.
How to rememberRe (again) plus direct (to point) gives redirect, to point again. Remember it as pointing visitors toward a new destination.
Exam points
Mix-upA redirect (リダイレクト) moves the user to another URL automatically without any choice on their part, unlike a link (リンク), where the move happens when the user clicks.
Key points
Changing the look or showing a note when the pointer moves over an element lets users see what can be operated before they press.
A GUI lets users choose by looking at on-screen controls, so it works even without remembering command names.
Gathering appearance rules in 1 place with CSS keeps the design of many pages consistent and lets you change them all at once.
Devices with different screen sizes can be served by responsive web design, which switches how the same page is displayed according to screen width.
With a redirect, users can be guided from an old URL to the new page even after the URL changes.