November 2017 Summaries

Creating an effective search experience on a website involves strategic design and placement of the search form, starting with its position, typically in the upper right corner where users expect it. For sites focused on problem-solving, a more prominent search bar placement is recommended. It's beneficial to pair the search icon with textual prompts to guide users and ensure comprehension, as relying solely on icons can hinder task completion. The size of the search input box should accommodate average queries, and it can expand when clicked for more space. Ensuring both click and enter/return can trigger searches caters to both novice and experienced users. On mobile devices, prominently featuring the search form can enhance user experience, as navigating complex site structures can be cumbersome. However, a well-organized site structure is still essential for users who prefer exploring over searching, providing a comprehensive and intuitive navigation experience.

In web design, using combo-classes like "No Margin" and "Center" can streamline styling by maintaining clean and efficient CSS, which prevents code bloat and eases future global changes. The "No Margin" class is useful for removing all margins from elements such as headings, and this approach can be extended with specific classes like "No Margin Bottom" or "No Margin Top" for more targeted adjustments. Similarly, the "Center" class helps align text centrally without altering existing styles, and this method can be applied to various typographic styles by creating helper classes such as "Title Case" or "Strikethrough" to manage unique text formatting needs efficiently.

The tutorial provides a step-by-step guide on creating a horizontal-scrolling section similar to the one on the Interactions 2.0 announcement page, focusing on setting up wrapper divs and styling them for optimal visual impact. The process begins with adding and styling a div with a class of "Gallery," followed by creating a gradient background. Subsequent steps involve adding nested divs for a scroll track and container, utilizing flexbox settings to manage layout and positioning. The tutorial continues by instructing users to add content, such as images within the "Gallery Track" div, using divs with background images to simplify the process. Further customization includes adding a drop shadow for emphasis and using combo-classes to apply unique background images to each div block.