eunice chan
email me
core interaction studio
core interaction lab
week1week2week3week4 ⋆ week5 ⋆ week6 ⋆ week7 ⋆ week8 ⋆ week 10 ⋆ week11 ⋆ week12 ⋆ week13 ⋆ week14 ⋆ week15 ⋆ week16
tapestry weaving
What we mean when we say responsive? by Lyza Danger Gardner

I only knew about the term "responsive web design" a few weeks ago when we were assigned the responsive logo project in Studio. When working on the logo, I noticed that I mainly focused on making it look as I wanted it to in different screen sizes and overlooked other ways the logo could possibly be manifested. "Responsive" to me at that point simply means a website's ability to react to the change in screen size.

After reading this article, however, I began to look back on websites I have designed last semester. One time I had to design a game using javascript, and it took a lot of time and trial-and-error to come up with a design that is easy to understand, user-friendly, and can be played over and over again with my limited knowledge in web design. In hindsight, I would describe that as "responsive" web design. I agree with the how the writer concluded in the article that a "responsive" website means a thoughtfully designed page.


What happens when you create a flexbox flex container? by Rachel Andrew

A flexbox container functions technically like an inline-block, aligning with other elements in rows in normal flow. Child elements inside the container follows the flex layout, in which properties can be added to define how they are displayed. First of all, there is flex-direction. It can be set in columns or rows, either following the normal direction or in reverse. Flexbox is often compared with Grid as both allows axis switching from rows to columns. Flex-direction can also be controlled by language. For instance, when working with right-to-left languages like arabic, child elements in the flex container would begin from the right edge. Content in the flex container can be justified with justify-content to control the space in between each element. Some elements may take up more space when it contains more text. The way that it is displayed among elements can be controlled with align-items. Flex items have initial values that may limit available space on the main axis. However, by changing values for flex-grow, flex-shrink and flex-basis, the amount of space taken up by elements can be adjusted.