04 CSS Grid

Posted on October 12, 2017 by onno

CSS Grid was finalized in the spring of 2017 and was available within a month on most browsers.

Where Flexbox is for only one dimension, either horizontal or vertical, grid is for two dimensional layouts, both horizontal and vertical.

CSS Grid and Flexbox are changing layout. It will take a while for the changes to settle in and for best practices to arise. Play around with ready made interactive examples. You will be required to create layouts using CSS grid and flex.

There are many resources to better understand how css grids work.

Mozilla Grids article is a great place to start.

Rachel Andrew’s Grid by Example / Patterns is good too. She is a CSS grid ambassador and has various layouts prepared on CodePen. You can use them to start your layout.

Smashing Magazine ran a CSS Grid contest and came up with some great examples. The demonstration has lots of cutting edge CSS features in addition to using grid. For other examples using CSS grid, check out this restaurant menu or a modern blog . Looking through the code will provide you with ideas on how to implement your own CSS grid.

In the FireFox browser use the Inspect Element on the grid item and click on the grid features for visual aids in understanding how the grid is implemented. The other browsers have not followed, open up inspector and click to activate.

Occupy only the cells of the grid you want to fill. Create white-space! Designers Rejoice!

Grid introduces the fr unit which stands for fraction of available space.

Jen Simmons, a designer advocate at Mozilla is a great resource, with examples and explanatory videos.

CSS Tricks has a complete guide to CSS grid. It is well organized and clearly explained. It also has an interesting article: Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries. A fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS.

See the Pen
Responsive hexagon grid by Temani Afif (@t_afif)
on CodePen.

Multiple nested grids menu example does not need media queries Download code.

CSS Grid Cheat Sheet reference is helpful to visually select the grid properties you want to use.

CSS Grid

basic concepts

The grid lines that define the grid: they can be horizontal or vertical, and they are numbered starting at 1.
The grid tracks, which are the rows (horizontal) or columns (vertical) defined in the grid.
The grid cells, the intersection of a row and a column.
A grid area, one or more adjacent grid cells that define a rectangle.

CSS grid defines the behavior of the children of a parent block display: grid; or inline-block display: inline-grid; element. The parent element is intersected by invisible horizontal and vertical grid lines that form potential Grid Cells. Grid Tracts are spans that cover horizontal rows or vertical columns. Grid Areas are conjoined Grid Cells. Grid Gaps create space around grid lines. grid-gap: 50px 100px; is shorthand for 50 pixel column gap and 100px row gap.

By default the grid lines are named from 1 to whatever both down and up. Negative numbers designate the order in reverse, starting from the far sides and counting back toward the near side (negative numbers are not shown in the figure above).

Grid definitions position the content in Grid Child items on the grid. The grid is a flexible layout system designed to automatically fill out the space. It works in conjunction with flexbox in adapting layouts to available space.

Defining The Grid: Intrinsic or Extrinsic

The grid is intrinsic if you let the machine define the grid. Extrinsic grids are defined through CSS. Intrinsic grids automatically determine the content. Extrinsic grids determine the grid first, and then allows one to specify where the content goes through column and row properties. The following from the spec is an example of an extrinsic grid with four named areas: H, A, B, and F. The first column is sized to fit its contents (auto), and the second column takes up the remaining space (1fr). Rows default to auto (content-based) sizing; the last row is given a fixed size of 30px.

01 Design Fundamentals

Posted on August 31, 2017 by onno

All communication is in need of design. While Parsons teaches the visual literacy required for your area of concentration, communication and web design share fundamentals that make for a good product.

Empathize

THE HEART OF DESIGN

Designers work to solve others’ problems but the most insightful and innovative design work begins with empathy. Slip on your users’ shoes and seek to gain understanding with an open mind. You’ll be surprised what deep needs and insights you can uncover.

Define

REFRAME THE PROBLEM

A single image of the earth from the moon shifted the course of environmental history. A new point of view on a design problem can shift your perspective just as much. Learning to reframe your point of view based on insights from your users can be a powerful design tool.

Ideate

BEYOND BASIC BRAINSTORMS

Ideation early in the design process helps teams get aligned and find potential solutions to investigate. While most teams use some form of ideation, design thinking can lend new structure and spark the brainstorming process.

Prototype

GET SMARTER, FASTER

The smartest design teams build prototypes throughout the design process. Rather than discover issues after the expense and time spent on building a complete product, challenge assumptions and solve disagreements through iterative prototyping.

Test

EARLY AND OFTEN

Prototyping forms a key step in solid product design, but the best design teams go a step further and test their products with real users. Observing how your end user approaches your product gives you the most important feedback of all.

08 How is the Final Graded?

Posted on May 19, 2017 by onno

To generate a general assessment of your performance and participation in class, on the midterm, and on the final, I will:

Look for originality (surprise me)
Check the code
Check for completeness of the assignments and the efficacy of the communication.
Look for overall improvement

The checklist I perform:

Make overall assessment, checking off the assessable tasks set forth in the syllabus. Is the HTML valid and semantically correct HTML5? Centralized style sheet? (there should be no local or embedded styles). Etc.
How responsive are the Final and Midterm?
Are there sufficient pages to represent a professional website? You do not need to actually build the site but need to build enough pages to represent how the full site would look and function.
Does it work in Firefox, Safari and Chrome? (If you know it works best in one or another browser, tell me.)
Check the code using W3.org’s Markup Validation Service. I can tolerate a few issues but the code should be error free.
Inspect the code as written for irregularities introduced by copying code and making it the basis of your code. It is OK to do some copying, borrowing, and stealing but not OK to rely on that. It is easy to tell if the code has been written or borrowed as all kinds of habits that I do not cover creep in.
Check all of the older assignments for completeness

I create a preliminary grade based on the above criteria. After having gone though each student’s work I will have a feel for how the class performed as a whole. I go through the work again and adjust each student’s grade on the class curve if need be. I also consider each student’s background and expertise. I may be more gentle with a non-Parsons student when it comes to visual design, for example.

An A requires attention to all of the above criteria. A B means that you completed your work, but were found lacking in execution.

A C is likely if work is missing or incomplete.

A D or F reflects a lot of missing or incomplete work.

Email me if you think that I failed to perform a fair assessment.

02 Browser Dev Tools

Posted on May 13, 2017 by onno

Developer tools are built into the browser for people who develop websites. The tools provide an inside look at the HTML markup, the CSS code as it is applied to each element, Javascript for debugging purposes, resources from the web page, and more, all to help you figure out what the story is.

The developer tools were originally created for Webkit. Since then Apple and Google have parted ways (are mortal enemies?) and differences between how they implement the browser Dev Tools have occurred. Most things are the same, like the ability to move tabs around. The tabs you’ll want to explore are the Elements tab, the Source tab, and Network tab.

How to open developer tools: In Chrome follow option menu -> more tools -> Developer Tools. In Safari, have the developer options checked in the preferences. In both, right-click and click inspect element to inspect it in dev tools or use the keyboard shortcut to both open and close the development tools: (command-option-i).

Elements Tab

When right-clicking Inspect Element, you get the Element panel on the bottom with the HTML on the left side and CSS on the right.
dev tools

What you see is a DOM or Document Object Model that parses the HTML code into a tree with a node for each element and attribute.

The element you right-clicked will be highlighted. The CSS for that element appears on the right. How often have I used this to figure out the CSS? Use this not only on your own website but anytime you see something and you want to know how it’s done.

Right-clicking on the elements in the DOM allows for live editing of HTML elements and attributes. Live edit your HTML and see the changes happen in real time. Click and drag elements around to reposition them on the page or even delete them. None of the changes are preserved when you refresh the page. If you go to the source tab and select the HTML page, you can right-click to save your Live edit changes (and even overwrite your original file).

Network Panel

Every page you load is made up of network requests. The HTML page itself, external CSS, Javascript, images, fonts, etc. The faster they are loaded the more responsive the page feels. You can check how fast each of the elements loads by clicking on the Network Tab and refreshing the browser. Some of the resources may already be downloaded. Hold the shift key down to download all the resources.
dev tools

Each network request is listed in order. The size of the source is listed fight before the timeline. In the timeline, the transparent part of the bar indicates how long it took for the resource to be requested before it starts to arrive. The solid part of the bar indicates how long the resource takes to download. The bars are color coded: HTML is blue, Javascript is orange, CSS is green and images are purple.

The blue vertical line signifies when the Chrome has finished parsing the DOM. The red vertical line tells us that all resources are downloaded.

Use the Dev Tools

Become familiar with how your website performs by looking into how the browser constructs the DOM, loads resources, renders the style recalculation and layout and finally paints the completed page. Catch any problems you have and fix them. Explore web pages and figure out how they are built.

Google’s Mobile Friendly Test

Is Your Page Mobile Friendly? Test your entire website in with one click using the at EXPERTE.com

Test to see if your website is mobile friendly according to Google’s test. Your website needs to pass this test with flying colors.

Supercharge Your Website

A free service called will speed up your website by cashing it. Sign up for free. Cloudflare’s services sit between a website’s visitor and the Cloudflare user’s hosting provider, acting as a reverse proxy for websites. This will become an issue when you have your own host and not the b.parsone.edu server.

03 Measurement Units

Posted on May 12, 2017 by onno

Measurements are used everywhere so get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size while relative measurements are based on the size of the parents, the font specified in the body tag, or determined by the size of the viewport (window or device size).

Absolute Measurements

You will often specify a width in pixels, such as 300px. That is only natural. How long something is depends on the resolution of the screen. Yes, pixels are relative based on the screen resolution which changes all of the time in web design. However, Apple uses pixel doubling retina displays, to maintain the ideal pixel that hovers around 72 points per inch. Because pixels are the reference for thinking in terms of the display, they are used as an absolute measurement.

Other fixed measurements are pica pc, point pt, millimeter mm, centimeter cm and inch in. They should update regardless of the display’s resolution. An inch should be an inch.

Keyword values are also common, like bold and bolder for the font-weight property. Other value for font weight are from 100 through 900 in multiples of 100. Font weights not available will map onto the closest available font.

Interactive CSS Selectors Demonstrations

CSS Code View

Live Demo

Width in:
pixels (px)
points (pt)
picas (pc)
inches (in)
centimeters (cm)
milimeters (mm)

Relative Measurements

Relative measurements are based on four sources: fonts, percentages, viewport, or container size.

Relative Measurements based on Fonts

In the first years of web design, when a client changed the size of a web page, only the fonts would shrink or expand. To make all the elements on the page change along with the fonts, it was standard to measure everything relative to the size of the page font. That length is expressed in em units, which is the width of the “m” of the font in question. This could become problematic when a percentage of an em, of an em was specified, as the effects accumulated. To avoid this problem, they introduced the root em, or rem, which is based on the size given to the body tag.

You can also express length in terms of the x-height of the font ex and the character ch. Character is mapped onto the width of the zero.

Relative Measurements Based on Percentages

The most common relative measurement is percentage %. When applied to the weight of a child element, it becomes that percentage of the parent element. The parent element is 100%. It is easy to build websites that automatically resize on most devices just by basing the elements on percentages. You still need to use media or container queries for very large and very small sizes.

Relative Measurements Based on Viewport

With the introduction of mobile devices, it became common to base widths on the viewport: vi for viewport inline (this is the width of the browser window or the width of the device). vb is for viewport block. vb These are the logical properties for viewport width and vw and viewport height vh. You can also target the smallest or largest percentage that an object can be: vmin is for viewport minimum and vmax for viewport maximum. Viewport minimum picks the shortest viewport size and viewport maximum chooses the longest viewport size. 1vi is 1% of viewport width, 1vb is 1% of viewport height, 1vw is 1% of viewport width, 1vh is 1% of viewport height, 1vmin is 1vw or 1vh, whichever is smallest and 1vmax is 1vw or 1vh, whichever is largest.

These relative values should be used to accommodate changes in the viewport used to making fluid layouts. Grid layout has a flexible measurement unit designed for fluid layouts, the fractional unit fr. Fr stands for a unit that represents a fraction of the available space in the grid container.

Compare Measurements

Relative sizes are based on the live demo width of 60% of the parent main element, or a font-size of 22px for the body element.

This font-size is unusually large so as to make the text easier to read in class. Usual font-size is 16px. If you change it, the em, x-height based width will change accordingly. The fonts in the document will also change.

If you change the window size, the last 6, viewport inline, block, width, height, vein, and max will all update in real-time.

CSS Code View

Live Demo

Width in:
em (em)
reference em (rem)
x-height (ex)
percentage (%)
% of the viewport inline (vi)
% of the viewport width (vw)
% of the viewport block (vb)
% of the viewport height (vh)
% of the viewport width (vmax)
% of the viewport width (vmin)

The viewport based measurements update when the window is resized. Em and x-height reflect the body font-size.

Measurements for container queries have their own syntax (not demonstrated here).

cqw (Container Query Width) – 1% of the container’s width
cqh (Container Query Height) – 1% of the container’s height
cqi (Container Query Inline) – 1% of the container’s inline size
cqb (Container Query Block) – 1% of the container’s block size
cqmin (Container Query Minimum) – the smaller value of cqi and cqb
cqmax (Container Query Maximum) – the larger value of cqi and cqb

CSS Calc

CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. A useful feature of this function is the ability to mix units. For example, you can multiply pixels with percentage. You can also mix sizing units. CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);}

08 Final Assignment

Posted on March 20, 2017 by onno

If the first assignment was to sell yourself, the final assignment is to sell anything other than yourself. Create a professional looking website that sells something. It can be a product such as jewelry, a service such as a restaurant, or something abstract such as an opinion or issue. Please use existing work from projects you have completed in other classes. That way you have well thought out content.

There is a lot of leeway on this assignment. Please use it. Don’t be literal. Selling something allows you can find other websites selling the same thing. You will need to follow the Designing for the Web (7 steps) article and research what you are selling.
The criteria is that it look professional.
Students do their most creative work when they’re motivated by the work itself. Choose a final project that will motivate you to do your best work.
The final project should persuade me (to give you a good grade).
Focus on the User’s eXperience and site organization
General Formal Proficiency
Typographic Proficiency
Creative Use of technology
Quality of documentation
Don’t be shy. Be bold! Be playful! Be emotional! Whatever it takes to grab your audience’s attention. Make them want to come along.
I am here to help you realize your final.
If you have questions, ask me.
I am always surprised by the number of students who do not ask me when they are having problems. This happens a lot. The reason, I think, is that the answers can be found in both in the book and on this website. Students think they can figure it out on their own. The problem here is that there is so much information that it’s not always easy to connect up with what you need at that moment. So you get stuck and instead of overcoming your limitations you problem solve within them, which is not the best approach.
Do not hesitate. Ask me if you have questions. I am here to help!
You can also book time at the Learning Center. How to make an appointment. and schedule an appointment.. They can help you understand and overcome the problems you are facing, help you code your final project, and keep you organized and working.
The biggest obstacles is procrastination. It will catch up with you. I see it happen every semester. Some of you will have more important things to do and postpone working on the final till the end. The result is always an insufficiently developed final. Post your progress each week so I can follow your work.
Come up with a proposal for your final project and create a new work-sheet. Specify what you are going to sell and how you are going to sell it, research how you plan to be successful in selling it, and develop a strategy based on the target audience. This is due next week!
You will have the rest of the semester to finish the project. Next week we focus on making your portfolio responsive so that it works in all media. At the same time, you need to research and come up with the topic for your final and be prepared to defend it in class.
Homework from here on out is divided into two parts. One part concerns the unit and the other part concerns the final project.

Your final site needs to be close to finished by week 14 for peer review. Do not procrastinate. Make your final a project you can be proud of.

03 Designing for the Future

Posted on March 11, 2017 by onno

It used to be that the only devices supporting web pages were desktop computers with similar sized screens. Then came mobile devices. The resolution and size of the screen grew with leaps and bounds. 4K resolution and 32 or 42 size screens are commonplace. Now we have watches. Who knows what the future will bring. The future of the web is not necessarily tied to the browser window that you are using to code your designs. Chances are that it’ll be mobile or spanning multiple screens. Covering those screens, as this page does, from small to large, requires a complete separation between content and form, so that the same content can be rearranged to fit different viewports. The link is to the website, CSS zen gardens, and illustrates the separation between CSS and HTML, form and content, originating in 2003 to demonstrate the power of CSS.

Different devices and markets will use HTMl and CSS for all kinds of purposes. The content needn’t be displayed on a browser. Web services like Facebook, Twitter and the like have taken over a big chunk of the web, bypassing the browser, but still use the HTML and CSS display language.

And users create preferences for high contrast, dark mode, reduced motion, and more, so being responsive goes well beyond changes in the size of the viewport: the new responsive web design in a component-driven world

Scalable and Adaptive Designs

The task of the designer is to provide a consistent user experience across all these possible media. You need to see that the core information of the website remains accessible no matter what the device or how disparate the user. The Apple’s watch has a viewport of 320 x 357 pixels and large monitors eclipse 5K or five thousand pixels. The website needs to look as if it were designed for that specific screen be it postage sized or take up the entire wall of a building, for use with a mouse, voice commands, remote control, or a stubby finger.

Rethink Your World

A stubby finger is a lot different to design for than a mouse driven computer monitor. What does the User Experience look like to your fingers? How to greatly simplify the interface so it adapts to the ends of your fingers. Take another look at Apple’s human interface guidelines for all of their devices including mobile.

What makes for a good mobile site?

Google conducted a research study to answer this question.

The key takeaway:

Mobile users are very goal-oriented. They expect to be able to get what they need, immediately, and on their own terms.

How

The first attempt at responsive design centered on the em as a relative measurements connected to the font size of the document. Next was was to build entire websites using percentages: responsive design . Then they introduced media queries. That changed everything.

Twelve years on the web has expanded in myriad ways. People use CSS grid to build responsive websites and container queries. Who would have known? I can only assume that progress will continue and that there will be more ways to make the web responsive to its devices and users.

10 Putting it All Together

Posted on April 23, 2016 by onno

CodePen has amazing examples that are an inspiration for how to use CSS3 in ways that will inspire you. The code at times needs to be compiled (so it looks like the HTML or CSS you are familiar with) Here are some examples. Poke around, and send me any additional examples you find compelling.

Pure CSS Parallax

See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.

Animated Interfearence Patterns

See the Pen Single element Atari ST demo effect by Keith Clark (@keithclark) on CodePen.

CSS Shapes

See the Pen CSS Shapes by Bryan Robinson (@brob) on CodePen.

Playing with CSS Filters

See the Pen Playing with CSS Filters. by Sam Jarvis (@samthejarvis) on CodePen.

15 Final Grade Calculation

Posted on May 9, 2015 by onno

Final Grade Calculation

The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are ground for Failure.

* Does not require coding. No Late Assignments accepted.

Send me a zipped version of your final project before the due day, 5 days after the last class.

Grade calculation:

Date Due		Percent
2/6/15	Website Analysis*	5%
2/13/15	Landing Page	5%
2/13/15	HTML markup of Analysis	5%
2/20/15	7 Steps — Midterm Worksheet*	5%
2/27/15	CSS selections	5%
2/27/15	Photoshop comp/ HTML Wire Frame	5%
	First Quarter Assessment
2/27/15	incorporate CSS Layout Strategies in web site	5%
2/27/15	Quiz:
3/6/15	Peer Review	5%
	Official Midterm Review
3/13/15	Typography Poster	5%
3/13/15	Portfolio: Midterm	10%
3/13/15	class Presentation	5%
	Second Quarter Assessment
3/20/15	Final: Worksheet*	5%
4/3/15	Responsive Redesign of Portfolio	5%
4/10/15	CSS3 Collateral	5%
4/17/15	CSS3 Animatic	5%
4/24/15	Final: Modular Navigation	5%
	Third Quarter Assessment
5/1/15	HTML5 Multimedia	5%
5/8/15	Final: Peer Review	5%
5/8/15	Forms	5%
5/15/15	WordPress CMS	5%
15/15/15	Final: Presentation	5%
	Final Quarter Assessment
	Two assignments dropped:	-10%
	Total:	100%

10 Interactive Content Creators

Posted on April 2, 2015 by onno

Google recently introduced Google Web Designer and Adobe has The Edge Suite and in particular Edge Animate. These tools produce interactive content for desktop and mobile devices. See the Adobe Edge tools used to showcase themselves.

Flash used to dominate this domain, which was used primarily for ads, but was pushed out after stepping foul of Apple’s QuickTime and the popularity of the iPhone. Who wants to pay for ads that wealthy iPhone owners cannot see?

That left a vacuum that CSS3, HTML5 and Javascript are supposed to fill. CSS, HTML and Javascript are not Flash, and as you can see, even creating basic animation is challenging.

To solve this, both programs provide a drag-and-drop, easy-to-use user interface for creating animation and interactivity using HTML, CSS and JavaScript. Adobe wants to recapture the Flash market, and Google wants people to create ads, because that is where Google makes its money. Google is an expert at the commercialization of good will.

Though we have access to both programs, I like the way Google Designer allows me to switch to code view and edit the parameters directly. Adobe Edge Animate requires Edge Code to look at the underlying code, and may be more ambitious in the long run, but it is not nearly so interesting and useful for us as Google’s Web Designer.

Google Web Designer

Download a copy and use it to do your animatic or motion enabled ad. Instructions on how to use the program can be found on the original download page.
Google Web Designer tutorials