GrC 339
Web Design + Production

 

Week 3 • RWD, Hosting, DNS

Animations via Giphy

This Week

  • Journal #1 due this Sunday
  • Focus on mockups submission (next Sunday)
  • UX Laws (part 2)
  • Hosting types and considerations
  • Introduction to DNS and how it works

Mockups

  • Upload a single PDF
  • Use placeholders for text, images, and sample titles
  • Page titles and filename for all 3 mockups
  • Citations for all content that is not yours
  • Descriptions for interactive/obfuscated components
  • Brand guidelines (logos, typography, swatches, image considerations, and analogies)
  • Single page sites should show section mockups

Mockups • Grading

  1. Page titles + filenames (0.5 marks)
  2. Branding and color scheme included (1.5 marks)
    • Color values provided (HSL, RGB, RGBA, or Hex)
  3. Layout scheme defined (columns, and spacing) for mobile and desktop (1 mark)
  4. Three mockups provided (2 marks x 3 = 6 marks)
    • Mobile+Desktop views with dimensions in pixels
    • Quality of design: feasibility, branding, color, grid
  5. Three peer reviews (start, stop, continue)

Laws of UX (part 2)

20 approaches to improve life

Resources

Miller's Law

The average person can only keep 7 (plus or minus 2) items in their working memory.

11

Photo: Pavan Trikutam

Occam’s Razor

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.

12

Photo: Adrian Swancar

Pareto Principle

The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.

13

Parkinson’s Law

Any task will inflate until all of the available time is spent.

14

Peak-End Rule

People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.

15

Postel’s Law

Be liberal in what you accept, and conservative in what you send.

16

Photo: Tingey Injury Law Firm

Serial Position Effect

Users have a propensity to best remember the first and last items in a series.

17

Tesler’s Law

Tesler's Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.

18

Photo: John Barkiple

Von Restorff Effect

The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

19

Photo: Randy Fath

Zeigarnik Effect

People remember incomplete or interrupted tasks better than completed tasks.

20

Photo: Pankaj Patel

Exercise

Think-Pair-Share

  • Breakout Room # = Law #
  • 1-2 examples of application for a website
  • Share with the class (describe or use a wireframe)

 

Listing of laws: lawsofux.com

Hosting

Hosting Options

Several configurations exists with distinct pros/cons

  • Shared
  • Virtual
  • Dedicated
  • Colocated
  • Serverless

Shared Hosting

Pros

  • Affordable
  • Simple
  • Dashboard
  • Scripting available

Cons

  • Unreliable
  • Slow execution times
  • Feature Restrictions
  • Rate Limiting

Virtual Server

Pros

  • Affordable
  • All features of dedicated
  • Customizable
  • Fast restarts
  • Full admin
  • OS access
  • Easy upgrades

Cons

  • Physical resources are shared
  • Could become unreliable
  • Management is extra
  • Full admin
  • Security?

Dedicated Server

Pros

  • Full hardware access
  • Very fast, but hardware dependent
  • Can virtualize several sub-sites

Cons

  • Expensive
  • Slow to restart
  • Management is expensive
  • Backup / security?
  • Complex
  • Hard to upgrade
  • Licensing

Colocation

Pros

  • Your own hardware
  • Can preconfigure
  • Reduced long-term cost over dedicated
  • Could be profitable

Cons

  • Expensive
  • Slow to restart
  • Management is expensive
  • Backup / security?
  • Complex
  • Hard to upgrade
  • Physical delivery

Serverless?

Pros

  • Focus on deploying, not configuring
  • Scalable / elastic
  • Less complex than VPS
  • Cheap

Cons

  • Not ideal for process intensive tasks
  • Pay-by-the-_____
  • Could be expensive if your code is inefficient

Misnomer: There are many servers involved.

JAMstack?

DNS

Example

calpoly.edu > 52.89.108.178

 

But where is the response coming from?

 

Lots of servers exist and are added to your network and devices by default.

 

You can customize this and might want to for several reasons...

Responsive Design Approaches

Fixed Layout (not responsive)

Image: Smashing Mag

Fluid Layout

Image: Smashing Mag

Hybrid Layout

calc(100% - 520px)

Image: Smashing Mag

Approach #1

Float

  • Use a combination of float and clear
  • Fully compatible with all browsers
  • Breaks layout easily
  • Need to clear content to take up space
  • Horrible for dynamic content
.class {
  float: left | right | none;
  clear: left | right | both;
}

Approach #2

Position

  • Precise control for fixed layouts
  • Tricky to control for fluid layouts
  • Use z-index for control over layers
  • Fully compatible
  • Need to know difference between fixed, static, relative, absolute.
.class {
  position: relative | absolute | fixed | static | inherit;
  top | right | bottom | left: value;
}

Approach #3

Breakpoints

  • Fully supported since 2009
  • Targets size, orientation, device type
  • Activates additional classes/values so must override and target properly
  • Can use to create print-only styles
@media 3d-glasses and (min-width : 320px) {
	...
}

Approach #3

Flexbox

  • Supported in all modern browsers
  • Quick to implement, lots of options
  • Can cause image alignment challenges
  • Good for vertically centering content
  • Good for loading varying numbers of items
.parent {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: direction wrap; /* shorthand */
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline | auto; /* vertical */
  align-content: lex-start | flex-end | center | space-between | space-around | stretch;
} .child {
  order: value;
  align-self: auto | stretch | flex-start | flex-end | center | baseline;
  flex-grow: value; /* multi-column spanning */
  flex-shrink: value;
  flex-basis: value; 
}

Approach #4

Grid

  • Supported in all modern browsers, not as well as flexbox (this is changing fast)
  • Quick to implement, lots of options
  • Very adaptable to your needs
  • Great for overall page layout
.parent {
  display: grid | inline-grid;
  grid-template-columns|rows: value(s) | repeat(value size);
  grid-template: rows / columns;
  grid-template-areas: /* creates spans on grid */
    "a b c"
    "b b c"
    "d d d";
    justify-content: auto | normal | stretch;
    align-content: auto | normal | stretch;
    row|column-gap: value;
    gap: row-value column-value;
} .child {
	grid-row|colummn-start: value;
    grid-row|colummn-end: value;
    grid-area: name;
    justify-self: auto | normal | stretch;
    align-self:  auto | normal | stretch; /* vertical */
}

Designing for Responsivity

  • Scale content
  • Hide content
  • Reorder content
  • Multi-column to single-column layout
  • Reduce the number of columns (4 to 2)
  • Toggling (hambuger menus)
  • Feature targeting (tap vs click)

Closing Notes

Thursday lab = asynchronous

Lab 3 has been posted

 

Poll the audience...

GRC339 Week 3

By Am Sagarwala

GRC339 Week 3

Responsive design, DNS, and Hosting

  • 813

More from Am Sagarwala