I mentioned in class that there are a few ways to create layouts in HTML. I’ve outlined 3 ways below. Note: You’ll also notice I’ve set up a media query within the Codepen examples for display on smaller viewports.

Method 1: Float (most widely supported)

One way you can build your layouts is through the “float” property. Here’s the example I shared during class:

https://codepen.io/SpenceJMNelson/pen/aqvXxK

I have created my layout elements and set them all to “float:left;” Note: Items making up adjacent columns need to add up to 100%. Note what happens when content in one column gets taller than adjacent columns, and compare that with the flexbox codepen.

for greater insight into how this functions try removing the float attributes in the css frame, or try adjusting the size of the columns. can you make them all equal size while still having them appear next to each other?

Method 2: Flexbox (I’d personally recommend this one)

This method is a little more reliable than floating. Here’s a codepen in action:

https://codepen.io/SpenceJMNelson/pen/NywJKV

Whenever you want columns, just wrap the elements you want to appear next to each other inside a div and set that div to display:flex. You can set the widths to whatever you want and the layout won’t break in the same way it does using floats. Additionally, You’ll note that when the content of one item in a flex layout row gets taller than the others, the height of all the other items grows to match it.

Here’s a nice guide on using flexbox, with some more advanced uses

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Method 3: CSS Grid (Most advanced, not as widely supported )

This method is designed from the ground up within the last year for creating grids on the web and offers the greatest number of options and flexibility, and allows you to consider grids in both horizontal and vertical axis. Here’s a codepen in action:

https://codepen.io/SpenceJMNelson/pen/eVeXwy

Notice how I’m able to define 6 column grid for everything within the “main-wrapper” div with “grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;”, then style the child elements to span columns and rows within that grid. It takes a while to get the hang of it (I’m still figuring it out TBQH), but it is quite powerful.

A full guide:

https://css-tricks.com/snippets/css/complete-guide-grid/ (Links to an external site.)

States & Transitions

Adding a ":hover" pseudoelement in css lets you change css attributes based on whether a user's mouse is over the element. This code will change a link;s color from blue to red when the user hovers on that link:


a {
  color:blue;
}

a:hover {
  color:red;
}

You can also add a hover to a parent element for more complex interactions. Here, when you hover over a link block, two elements nested inside it(an "h2" and a "p" tag) will behave differently:


a.linkblock h2 {
  color:blue;
}

a.linkblock p {
  opacity:0;
}

a.linkblock:hover h2 {
  color:red;
}

a.linkblock:hover p {
  opacity:1;
}

You can then add a transition to automatically animate the transformation between these two states


a {
  color:blue;
  transition:300ms;
}

a:hover {
  color:red;
}

Creating Animations in CSS

First, somewhere towards the beginning of your CSS document define the keyframesof your animation:


@keyframes fade-in {

  from {
    opacity:0;
  }

  to {
    opacity: 1;
  }

}

Then, call your animation in the style declaration of the element you want to animate


.my-cool-div {
  animation-name: fade-in;
  animation-duration: 7s;
  animation-fill-mode: both; /* optional */ animation-iteration-count: infinite; /* optional */ animation-delay: 1s; /* optional */
  animation-direction: alternate; /* optional */
}

For more information on animations:

https://cssreference.io/animations/

https://css-tricks.com/almanac/properties/a/animation/

Media queries & mobile styles:

You can create styles for specific viewport sizes using the @media css rule. Place these at the very end of your document after all your styles. Below is an example showing how you might scale a big headline down for smaller viewports:


h1 {
  font-size:48px;
}

@media (max-width: 800px) {
  h1 {
    font-size:36px;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size:24px;
  }
}

Media queries are can be formatted in the following ways:

@media (max-width: 400px) {
 */This media query contains styles that apply from the smallest possible viewport width up to 400px */
}

@media (min-width: 400px) {
 */This media query contains styles that apply from the largest possible viewport width down to 400px */
}

@media (min-width: 400px) and (max-width: 1024px) {
 */This media query contains styles that apply only between the widths of 400px and 1024 px */
}

SVGs: exporting & animating

You can export an image as an SVG from illustrator and sketch in the same way you would as a PNG or JPG. Exported SVG code will be in this format, which you can see is somewhat similar to HTML:


  <svg class="mydrawing" width="138px" height="162px" viewBox="0 0 138 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
      <desc>Created with Sketch.</desc>
      <defs></defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <circle id="Oval" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="51.5" cy="49.5" r="48.5"></circle>
          <rect id="Rectangle" stroke="#000000" stroke-width="2" x="52" y="50" width="85" height="85"></rect>
          <polygon id="Triangle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="51.5 76 102 161 1 161"></polygon>
      </g>
  </svg>

Embedded in the markup, this SVG code will behave the same way as an .svg file linked to in an <img> tag. Here's the preceding code rendered in the browser:

The key difference is that if you embed an svg inline, you can animate it just as you would standard HTML markup. I've added some animations here by finding IDs inside the svg code I want to select:



@keyframes svgtrianglemove{
  from {
    transform:translateX(10px)
  }
  to {
    transform:translateX(0px)
  }
}

svg.mydrawing #Triangle{
  animation:svgtrianglemove 1s infinite alternate;
  transform-origin: 40% 80%;
}


@keyframes svgsquaremove{
  from {
    transform:scale(.8)
  }
  to {
    transform:scale(1)
  }
}

svg.mydrawing #Rectangle{
  animation:svgsquaremove 1s infinite alternate;
  transform-origin: 10% 80%;
}

@keyframes svgcirclemove{
  from {
    transform:rotateX(0deg) rotateY(0deg);
  }
  to {
    transform:rotateX(90deg) rotateY(270deg);
  }
}

svg.mydrawing #Oval{
  animation:svgcirclemove 1s infinite alternate;
  transform-origin: 40% 30%;
}

One thing to note: you'll have to set a "transform origin" when rotating or scaling a given element. The default transformation point for all elements in the drawing is at the center of the SVG itself, not the individual elements themselves.

jQuery for Basic Interactions

If you want to install jQuery on a page you created from scratch, place this code before the tag toward the end of your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 //your javascript here.

</script>

You can write your javascript based on this codepen:

https://codepen.io/SpenceJMNelson/pen/vRYpox

It uses jQuery to toggle a class on an element that hides and shows a menu. The code does the following:

$( document ).ready(function() { //this line initializes jQuery on your page
 $(".class_of_clickable_thing").click(function(){
   $(".class_of_thing_you_want_to_add_class_to").toggleClass("name_of_class_you_want_to_add");
 });
});

So if I wanted to add a class of “active” to an item that already has a class of “menu” when a user clicks an element with a class of “button”, it would look like this (note that when you declare the class you want to add, you don’t include a period before the class name.)

$( document ).ready(function() {
   $(".button").click(function(){
     $(".menu").toggleClass("active");
   });
});

Parting Thoughts

Keep experimenting

I encourage every one of you to continue to experiment using the tools at your disposal. Continue to make pages and put them online. Make a poster for an upcoming show. Edit your personal pages on github. The way to get better at HTML, CSS, and Javascript is to keep playing with it.

Seek out answers

Everything you see on the web is by it's very nature open source. DOn't forget that you can always check to see how something is made by using the inspect tool. Also don't forget that you can always Google questions.

Prototype

I tend to start with designing specific components as the basis of a design because it allows me to play with details of the system without boxing myself in to specific viewport widths. Here’s an example of a component i designed in my own work. Take a look at the code as well, as it might provide some insights into more advanced uses of hovers & transitions.

Here, I used a small card component to play with how type and color worked together on a larger page I was working on. This component could pe put anywhere into a larger design system, and doesn’t rely on browser width.

Thinking about Outcomes

This year, we tried to accomplish the following:

Demonstrate an understanding of hierarchy as it applies to interactive media.
The projects that you all participated in this semester were meant to make you think about the presentation of different types of content on the screen.

Employ concepts, processes, and production tools for interaction design.
Hopefully, this class showed you some ways of thinking about interaction design, from creating rythm with type and scrolling, to creating navigation structures to help a user move through content, to creating unified visual systems that run throughout a work. My goal was to imagine a tool-agnostic approach to designing websites.

Develop a process that adapts to new tools, best practices and mediums.
This class was oriented around giving you the tools to quickly build and deploy typeset, interactive works onto the web, using a minimal amount of paid tools. Creating works in HTML and CSS directly lets you the designer circumvent a lot of expensive and complex systems and software, and get designed work in a public space quickly and with a minimal expenditure of resources. By focusing on designing in the medium itself, I hope I was able to emphasize that the web design tools like sketch, flinto, principal, keynote, photoshop, et. al. are abstractions; ways of defining how the final thing will look and move. Deliverables produced in these and future tools should be viewed as such. Don't get too invested in any one tool.

Develop an understanding of interaction as an essential component of communication.
Design involves not just setting type, but also imagining how a user is going to interact with the work. In print, these interactions could be the act of opening a brochure, or breaking a sticker that seals an envelope. The web is no different.

Assignment Sheets

Class Materials

Index Omnibus Précis Useful Stuff.

Useful Resources:

Articles & Essays

On building layouts: