TO: Professor Ellis
FROM: Enmanuel Arias
DATE: September 16, 2020
SUBJECT: 500-Word Summary
This memo is a 500-word summary of the article, “Explore Modern Responsive Web Design Techniques” by Elena Parvanova, a member of the National Organizing Committee for the IEEE International Conference on Information Technologies.
29 years ago, Tim Berners-Lee created the first website that consisted of left-aligned text with blue hyperlinks on a white background. The first websites were created and managed by the IT departments of large companies. Nowadays, anyone with basic computer skills can create a website. With the web design industry continually growing, it is important for companies to have well designed websites, as it can play a role in their success.
Web design began in 1993 with the introduction of images accompanied with text. In 1994, The World Wide Web Consortium was formed and established Hypertext Markup Language (HTML) as the standard for web design. HTML has its limitations, but the use of JavaScript resolves them. The following year, Flash and Cascading Style Sheets (CSS) were introduced. Flash became a popular tool to create more elaborate websites, but it was not search-friendly. Eventually, the combination of JavaScript and jQuery replaced the use of Flash. CSS provides a structure for designing multiple webpages. It allows websites to be created with a tableless design using percentages, known as fluid design.
With the increase of mobile devices with internet access, the layout of websites needed to adapt to the variety of screen sizes, while also keeping the design consistent across all devices. In 2007, column grid systems began to see widespread use by web designers. The most used system was the 960-grid system, with 12-column division. The system lays the content out on a 960px-wide browser window. Eventually, the fixed-width grid was replaced with percentages to align with fluid design.
Web designers had separate layouts for computers and mobile devices. Elena states that Ethan Marcotte is responsible for the birth of Responsive Web Design (RWD), who in 2010, “proposed that the same content could be used, but in different layouts and designed depending on screen size” (Parvanova, 2018, p. 3). RWD uses the viewport meta tag, grid system, and media queries to determine which layout to use when displaying content. RWD also led to the creation of responsive frameworks like Bootstrap. These frameworks standardized commonly used elements and introduced layout models like the CSS Flexbox and CSS Grid Layout.
Modern web design focuses on the organization of elements, positioning of blocks and the order of content. Flexboxes are optimized for interface design and the positioning of elements. The parent element will contain the child elements and “flex” accordingly to either fill unused space or shrink to prevent overflowing. Flexboxes were popularized because it allowed web designers to finally align elements properly. Unlike the grid layout, flexboxes are not intended to design the layout of an entire webpage. Since the grid layout is not as supported as flexboxes, a combination of the two is frequently used in RWD.
Reference
Parvanova, E. (2018). Explore Modern Responsive Web Design Techniques. Proceedings of the International Conference on Information Technologies, 43–48. Retrieved from http://infotech-bg.com/
