Author Archives: onno

04 Building A Website

Posted on by

Week 4
9/28

Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Using media queries to target different devices.

Homework

1) Design midterm to be responsive and use media queries to target different devices. 2) Publish midterm for midterm grade. Read chapter 12. Due: The following week.

Materials For Responsive Design

Additional materials for this unit can be found by following these links:

Materials For Building a Website

Additional materials for this unit can be found by following these links (30 pages):

Materials for Fonts and Typography

Additional materials for this unit can be found by following these links (29 pages):

Goals

The goals of this unit are to:

  • Incorporate media queries into web design.
  • To design around the challenges that media queries create when layout out a page across dissimilar devices.

The future of the web is not necessarily tied to the browser window that you have been using. Chances are that it’ll be mobile. Spanning screens from large to small requires a complete separation between content and form, so that the content can be rearranged to fit the different viewports.

Outcomes

At the end of this unit, students will have:

  • Been prepared for a much more expansive web of the future
  • Incorporated media queries as the basis for future-proofing their own designs.
  • used the various layout strategies that CSS offers in conjunction with media queries.
  • Applied these skills to their Portfolio site.

Step-by-Step

15 Review homework and answer questions.
40 media queries
20 practice: media queries
10 break
70 Hands on in class: making the portfolio responsive

Talking Points

Topics covered in the reading:

Chapter 12: Style Sheets for Mobile to Desktop

  1. Mobile Strategies and Considerations 328
  2. Understanding and Implementing Media Queries 333
  3. Building a Page that Adapts with Media Queries 340

Current Practices

Responsive Web Design is all over the web. In its short existence, no big site has not been redesigned to take advantage of it, and many do it very well:

  • This Is Responsive
  • Mule Design Holiday Party
  • Caava Design
  • Frank Chimero
  • Blood, the Branding Agency
  • Women and Tech
  • Jeremy Holmes Studio
  • Adobe HTML
  • Disney
  • Edita’s Casting
  • Rich Brown
  • Etch

    News and External Resources

    Inspirational Links to help you explore in preparation for the final.

    1. Smashing Magazine’s Mobile Content Strategy article.
    2. Google’s Friendly Mobile Test. Does your site pass?
    3. Google’s Page Speed Test. This test (and recommendations on how to fix the problems) are a great way to make sure your site is as good as it can be.

    Definitions

    These are the terms that participants should be familiar with during this unit:

    Responsive Web Design article from Wikipedia

    Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

    • 04 CSS Grid

    Posted on by

    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.
    Grid Box elements
    Grid Box elements

    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 by

    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 by

    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 by

    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 by

    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 by

    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.

    1. 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.
    2. The criteria is that it look professional.
    3. 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.
    4. The final project should persuade me (to give you a good grade).
    5. Focus on the User’s eXperience and site organization
    6. General Formal Proficiency
    7. Typographic Proficiency
    8. Creative Use of technology
    9. Quality of documentation
    10. 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.
    11. I am here to help you realize your final.
      If you have questions, ask me.
    12. 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!

    13. 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.
    14. 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.
    15. 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!
    16. 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.
    17. 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 by

    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 by

    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 by

    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%