Readings
In The Web’s grain, Frank Chimero talks about the web’s “edglessness”–– and it really resonated with me.
The web is infinite, immaterial and transient. The web is linear, circular, branching outwards, mesh-like, web-like––
it takes the form of whatever the user wishes it to be. The web isn’t edgeless only in space, but also in time; it
contains the past, the present and the future. The web is so complex, but so simple aat the same time.
And as Chimero ultimately points out, the web isn’t a canvas to paint on, but material to /build/ with.
It is layered, textured, and multi-dimensional.
Instead of being intimidated by the internet’s infinite nature and edgelessness, we should take advantage of the
fact that it can be whatever we wish it to be. The web is like a container, it provides a space for anything we wish to fill it with.
The web is tangled and intertwined with our existences. Without the web, we are disconnected and without us.. well, without us, the web
is just intangible space, staring at the world going by.
"It starts with a question: What is technology’s role in our life? And what, really, do we want from it?"
The most important thing I was able to take away from the reading was that it is crucial to learn how to think,
rather than what to think while coding. We can always Google specific syntax or lines of code– but the true value
lies in knowing what to Google, and learning from that. In addition, it’s key to understand code that we borrow from
tutorial sites. Anyone can copy and paste lines of code from different places and have it work–– but it’s far more
helpful to pick apart that code and understand it’s functioning before putting it to use. At the end of the day the
code only does what we tell it to. So, if the output seems to be strange, the problem ultimately lies in the
instructions we’ve given, and not the computer.
I also learnt that it is important to be efficient while coding–– not just for documenting or for saving file space.
The key to understanding CSS is learning the fundamentals well and how to use less code to perform the same function.
For example, I’ve noticed a lot of my peers getting confused between ‘classes’ and ‘IDs’, and using them interchangeably.
Some people assign IDs to every element, and then proceed to copy and paste the same properties and styles on to every
single ID. Although the output is exactly what they desire, their methods prove to be inefficient and time consuming.
However, once we have some basics down, and understand why things behave as they do, it becomes much easier in the
trickier places. Once we can break down our end goal into smaller concepts, it becomes easier to work backwards and
be efficient with our time and code.
Lastly, I learnt that it is important to be patient when trying to learn CSS (or any code for that matter).
One can’t become an expert at it overnight–– it takes practice and composure. It is also helps to not get stuck on our
initial code structure and be open to revisions in order to get the desired output.
What Do We Mean When We Say "Responsive"
The way I see it, to be responsive ultimately means to embrace the inherent fluidity of a medium (more specifically, the web). In a design context, I think “responsive design” is creating a system that can be placed in any medium; it’s designing a set of rules or guidelines that adapt and react but fundamentally remain cohesive. I’ve always thought that ‘responsive’ meant just that - the design responds to the environment it is in. It’s flexible and usable anywhere; the system doesn’t break because the user isn’t doing what the designer expected. Whether it’s a different device or specific user preferences, the site/app is still usable.
In addition, I think that the idea of “responsive” being different in some way than overall “web design” will be short-lived. I’m sure it was a necessary distinction initially, and that it provided us with a new way of thinking to work with. However, I have already started to see this as the default method. We start to notice when a website is not responsive, rather than when it is.
Many people seem to interchange “responsiveness” with “accessibility”, and hope thatone leads to another. While that may be true to a certain extent, the main thing “responsive” and “accessibility” have in common is that broader concept of responding to the user’s needs. However, I feel that making a site/app responsive doesn’t mean it is accessible to everyone, and vice versa - making a site/app accessible doesn’t necessarily mean it is responsive. We as designers must learnt to distinguish between the two, but also know when to integrate and incorporate them together.
What Happens When You Create A Flexbox Flex Container?
“Flex layouts are flexible: they try to make good choices by default about your content — squishing and stretching to get the best readability.”
Adding “display: flex” to our CSS simply divides and spaces content along an axis - vertical or horizontal. I’ve always seen this type of display property used, but never fully allowed myself to understand what it was. After reading the article, I realized it’s much more complex once you start to unpack it’s properties and capabilities.
The flex box provides a more efficient way to lay out, align and distribute space among items in a container, even (and especially) when their sizes are unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space: it’s like a balloon that expands and contracts when air is filled in or taken out of it. Because of the air, the balloon is also light enough to move and adjust depending on other items that share it’s space. As the author mentions, “Flex layouts understand how big your content is, and try to make good basic decisions in order to display it.” Most importantly, the flexbox layout is flexible in direction, unlike block which is vertically-based and inline which is horizontally-based. While I think those work well for web-pages, they lack the adaptable nature to support different orientations, sizes, etc. The key thing about the flex layout is that it integrates content and layout - flexboxes are like grids, but more flexible.
The main thing I took away from the article isn’t the syntax or semantics to write the code for a flexbox, it’s knowing when to use it. Flex layouts lay the foundation for “responsive web design”; once we begin to analyze our content and our vision for how we’d like it to be displayed over different platforms, we can use a number of flex properties to build it.
How to Build a Low-tech Website
Some sustainable web-design strategies:
1. User Experience: People should be able to find the things they want and perform the actions that they need to take in the most streamlined manner possible and with the least friction. I think good user experience makes using the web easier and more enjoyable for everyone, and reduces the amount of energy wasted navigating to pages that don’t serve the correct purpose and staring at web pages trying to decipher what they should do next.
2. Clean Code: The code behind the scenes should be a well oiled, lean machine. This doesn’t just apply to the code that is written, but also to the code that's borrowed: most often we forget to clean up and streamline code that hasn't been written from scratch.
3. Fonts: Simply using system fonts or less font variatons can reduce the size of a site drastically.
4. Reduced Image Sizes: Images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used.
5. Reduced Video Sizes: As with images, it's important to identify whether videos are really necessary. If they are, try to reduce the amount of video streamed by removing auto-play from videos and by keeping video content short.
6. Static Websites and Reduced Javascript: Less Javascript reduces the size of the website but also ensures that less processing or CPU power is required by the user's device. Static webpages are more energy efficient as they don't need to be "created dynamically"
7. Lazy Loading: By allowing pages to load as the user scrolls, we can ensure that no unecessary power is used in loading an entire page. It's best if content is loaded only as it gets closer to the viewport.
8. No Third-Party Tracking, No Advertising Services, No Cookies: This was really well explained in the reading. Advertising services raise data traffic and thus energy use. In addition, Google collects information from visitors, which forces us to craft extensive privacy statements and cookie warnings.
9. SEO: Optimizing a website for search engine rankings helps people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting less pages that don’t meet their needs. This means that less energy is consumed and the energy that is consumed is used to deliver real value to the user.
10. Green-hosting: Servers that store web pages require power 24 hours a day, so the single most impactful thing you can do to move toward a more sustainable website is use a hosting provider that runs on 100% renewable energy. (Maybe even take down old pages/pages that are not visited often when they're not being visited. Not every website needs to be online 24/7.)