Whatever you are selling, your final web site needs persuasive design and brand development, meaning that you need to think about how to position your site in a competitive marketplace.
Brands embody user trust.
Use a marketing approach that seeks to separate your website from the similar websites. Target your audience and relate to them — their interests, personality and characteristics — for maximum exposure.
That is where persuasion comes in.
A brand is the collection of feelings, thoughts, emotions and experiences (negative or positive) a person has about your website.
Stand for something. Ideally, differentiate your website in a way that targets the audience. Sucess is standing out above the competiton.
Guide your audience on how to think, feel and do about your brand in a way that is best for what you have to offer them.
Developing the Brand Identity
Everyone develops a brand identity, even when they neglect to do it. Spend the time to do it in a thoughtful way. Think over the following questions while developing your website.
Position the Brand
Who is your target audience? Where are the spaces in your industry/category that allow you to be first, seen, heard and remembered for strategic competitive advantage? How can we take an outside-in approach that helps us understand what site visitors actually think, feel and do?
Everyone starts with an inside-out approach. That is only natural. You have ideas of what you want to sell, and how to sell it. We do not have time for test marketing the web site, but stand in your target audience’s shoes. Would they buy it?
Brand Meaning
Build meaning into your brand. How do you talk about it? What do you say about it? What does it look like and what do you stand for? What can you say about it in 30 seconds? Why and how does your website really benefit your customer? What is the reason for its existence?
Brand Delivery
How do you deliver the brand? What consistent parameters do you place around your website? What ways can you leverage it? What media and channels best supports it?
Identify…
your website’s problems, strengths, weaknesses, opportunities, threats and goals.
Audit…
your competitors positioning to identify their weaknesses for strategic advantage.
Understand…
your target audience, community and potential industry/category channels.
Gather…
qualitative (interviews, insights or information) or quantitative (web metrics, trends, industry data).
Uncover and Innovate…
the potential areas of white space that allows your website to be first, seen, heard and remembered.
Placement…
the compelling evidence and vision that makes your website unique.
Differentiate…
your website to make your claim credible, trustworthy and reliable.
Create…
the messages that will accurately communicate and resonate with your targets.
Implement…
strategic design tactics to attract, acquire and retain.
Deliver…
the brand through internal employee alignment and adoption, customer touch-points, external media, marketing and sales objectives.
In the official language of the W3.org; when elements are rendered according to the CSS box model, each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. (The margin may actually be negative but margins have no influence on the background and border.)
Background Properties
The background properties deal with the decoration of the border area and with the background of the content, padding and border areas. There are many properties: background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color, and background-blend-mode.
The background can have multiple layers. A number of elements can be layered on top of one another. Each layer can be determined by a number of properties, each separated by a comma. Be careful in creating complicated backgrounds. One mistake can render the entire background property null and void.
Layering Multiple Background Images
multiple background images are , separated by a comma.
background: url(#), url(#), url(#);
You can set all of the values associated with each background image in the same way, by a repeat use of “,” to separate each value. For Example
If you have selected a color in addition to the background images, it is rendered as the bottom layer, without a final “,”.
CSS Code View
This div has multiple backgrounds
Background Repeat
The background-repeat property is used to repeat the background image. You can use the actual property, repeat-style: but it is usually tagged on to the end of background: with the values: repeat-x, repeat-y, repeat, no-repeat, and values that will be supported in the future, space and round.
CSS Code View
Background Position
The position of the background element places it in relation to the box, with the default being center. If there are two values, the first represents the X (horizontal) Axis and the second represents the Y (vertical) axis. You can also use percentages or pixel values: background-position: px, %, top, center, bottom, left, center, right
CSS Code View
Background Clip and Background Origin
It is possible that the background peeks out from the border. To keep this from happening, use the background-clip property, which clips the background to one of the following values: background-clip: border-box, padding-box, content-box
When you supply a value of padding-box, the background is clipped relative to the upper left corner of the padding edge. With border-box it’s clipped relative to the upper left corner of the border, and content-box means the background starts from the upper left corner of the box’s content.
Background origin is like background clip only it resizes the image.
CSS Code View
Bla Bla Bla BLa
Background Size
Resizing background images requires only one value if the image is scaled proportionately, and two values if the image is to be distorted: Background-size: px,%, auto, contain, cover. The value cover automatically scales the image so the longest side fits inside of the element, contain scales the image so that the shortest side fits inside of the element, completely filling the background.
Apply background-size: cover to the HTML tag and you create a full-screen background.
The background size property works in conjunction with the background attachment property.
Background Attachment
The background-attachment property binds the position of the background to the element, to the element’s content, or to the viewport. The initial value is scroll, where the background is attached to the element and moves with the element. Change this value to local if the background is to scroll with the content of the element or fixed if the background is to stay fixed relative to the viewport, or window.
If the background picture is fixed to the viewport, the element acts like a window to the background. Change the background attachment to local, and the background moves with the text. The background will clip to the content when local is selected.
CSS Code View
These words are here to extend the background to check out the background-attachment value of local.
Background Shorthand
It is possible to write all of these at one time (‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’) but if you do try to write a more complicated background, be careful, as one mistake can keep the background from showing. Each background image layer can have the following:
background: bg-image, bg-position, repeat-style, attachment, background-origin, background-clip and the final (bottom) layer can add background-color.
Gradients
Gradients were introduced by Apple in 2008. They’ve gone through some syntax changes and can be used without prefix. There are linear gradients, radial gradients, and conic gradients, and the syntax is similar. A gradient is a transition between a start color and one or more stop colors that has a direction, and optionally, can repeat. If there is no repeat, the last color on either side continues out to the edge of the box, otherwise, the gradient repeats.
Linear Gradients
The gradient uses the background property but instead of fetching an image, the computer uses the controls given in the value to calculate the image used to fill the background.
The value of a simple linear gradient like the one on the right is written as linear-gradient(to top, #eff6fb, #d3e4f3 68%). It is specified as a linear gradient, that has direction that goes to top that starts at (0%) with the color #eff6fb, and proceeds to the last stop, with the color #d3e4f3 occurring at 68% from the top, which it maintains to the top (100%) of the element. Its also possible to use length values like pixels or em units to specify the distance.
Simple gradient with the color being spread out evenly over the colors:
background: linear-gradient(red, purple, blue);
The angle can be specified in degrees: ‘0deg’ or by keywords: ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’ where the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’. These can also be combined as in to top right.
Adding a percentage to the stop specifies where the color is located. If two colors share the same location, the result is a sharp color change.
CSS Code View
Radial and Conical Gradients
If linear gradients follow a single direction, think of radial gradients as all directions emanating out of a single point. The issue is then the location of the center point. The distance from the center then determines the stops. If the distance of the stops are all the same, the shape of the radial gradient is a circle. It is also possible to have an ellipse where the dimensions of the box determined the shape of the ellipse.
You can specify the position of the radial gradient in the same way as you can position anything, using the x and y coordinates, and keywords work just as well: right 100% means that the horizontal placement is all the way on the right and the vertical placement is all the way on the bottom. It is possible to go beyond the box, and make it 120% 120%, for example. It defaults to the center of x or y if either one is missing, and if both are missing, the radial gradient is centered in the box.
By default, the radial gradient covers the whole box but its possible to specify its size by using keywords that determine the size from its center to the edge or corner that is nearest or furthest from it. That gives us four possible keywords: closest-side, closest-corner, farthest-side, farthest-corner.
After the location, shape and size come the color stops. You have to specify a starting color and one or more stop colors, and if you what the blend to be other than evenly distributed, the percentage from the center, similar to how the linear blend is specified. The last stop will determine the color that fills the box if the blend is smaller than the box. Its also possible to use length values like pixels or em units to specify the distance.
Radial blends requires the keyword radial . Conical blends requires the keyword conic
Blends are background images and are layered in the same way as multiple background images, by using a comma to separate the layers. By adding transparency to the color stop it’s possible to show one gradient through another gradient. The following demo shows two superimposed linear gradients, separated by a comma , with transparency from the Hue, Saturation and Luminance added after the slash, with 0 being transparent, and 1 being opaque. (hsl)color, so that the one shows through the other:
CSS Code View
Repeating Gradients
CSS Code View
It is possible to repeat the blend instead of extend the color of the last stop to the edge of the box. This is done through the keyword repeating at the beginning of the value, for example: background: repeating-linear-gradient(#EFF6FB, #d3e4f3 10%). use the same value at both the beginning and the end if you want a smooth transition as the blend repeats.
CSS Code View
Repeating gradients are achieved by putting in stops while the frequency is determined by the distance of the edge from the center point. In the following example, change any of the stops to see the effect on the gradient.
CSS Code View
CSS Illustration
It is possible to create amazing work with CSS. I did not say it was a fluid process, but a thorough tutorial provides insite in how the Polaroid camera was made using nothing but CSS. Check out the code Pen to see what HTML and CSS are used, and read the article .
You can construct your own gradients but given the visual immediacy of a gradient generator, it’s more convenient to use the CC Gradient Generator to help you make the gradient.
Background Patterns
The possibility of repeating multiple gradients in one backgrounddeclaration opens up an incredible vista for patterns and other uses. Take a look at the next two demonstrations, take from the fantastic patterns created by Lea Veroa. See also her book article she wrote to explain her methods.
CSS Code View
CSS Code View
Animated Background Patterns
We’ll cover animation next week but here is a glimpse of what CSS can do to animate these background patterns.
Background Blending
Background blending blends the layers within a background. This is useful for blending a picture with a background color.
The following blending modes are implemented in webkit and follow the blend modes found in Photoshop:
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
The following blending modes are not yet implemented by webkit
hue
saturation
color
luminosity
CSS Code View
A more complicated example blends multiple layers. Change the blending mode of each background with varying results.
CSS Code View
CSS Code View
Border Properties
All four sides of a border can be treated with one definition or you can specify the definition for any one side: top, right, bottom, left.
Standard Border
The border usually uses a shorthand where the width, color and style are given in this order: border: 10px solid red;. Leaving any one of these out breaks the border. Here is a list of the styles:
none: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.
hidden: Same as none but has different behavior in the border conflict resolution rules for border-collapsed tables.
dotted A series of round (square?) dots.
dashed: A series of square-ended dashes.
solid: A single line segment.
double: Two parallel solid lines with some space between them.
groove: Looks as if it were carved in the canvas.
ridge: Looks as if it were coming out of the canvas.
inset: Looks as if the content on the inside of the border is sunken into the canvas.
outset: Looks as if the content on the inside of the border is coming out of the canvas.
CSS Code View
You can change the border attributes including the style yourself.
Specifying Each Side Individually
You can also specify different width, color and style for each side of the box, as well as target each side individually. This is most often done to create a horizontal rule somewhere in the design:
CSS Code View
Change Me
Image Border
So you want to use an image for the border? This is not only possible but powerfully implemented. The following properties implement border image: border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. A border-image shorthand property border-image: strings all of the properties together: border-image-source, border-image-slice, border-image-width, border-image-width, border-image-outset, border-image-repeat. For example: border-image: url('image.gif') 20 30 40 20 repeat;. The url fetches the image, the next four numbers signify pixel values. Percentages get the percent sign but the pixel values do not get px added in behind the number. I’m not sure why. The last key words signifies how the middle section is treated.
For some reason border-image in Chrome, Firefox, and Edge only work when there is a border style or border shorthand property given first (it will be written over by the border-images property) as in border: 1px solid orange. You can use this property to select any one of the four sides: border-top: 1px solid orange. This does not work in Safari. Any of the four borders can be specified a size including “0” to make it disappear, so that border-top can be achieved by border-width: 20px 0 0;.
As a box has four corners and four sides, a referenced picture is divided into 8 parts (the ninth part, which is discarded by default, represents the fill). This is the picture used for the border, and it is 60px by 60px. The image was divided into thirds with 20 pixels for each corner and 20 pixels for the center section. Blue dividing lines are for demonstration and are not in the border image. If this seems complicated, there is an border image generator to help you prepare your border images.
CSS Code View
It is possible to repeat the middle image, as above, or to stretch it, as here. There is also a value called round, where the image is repeated to fill the area, and if it does not fill the area with a whole number of tiles, the image is rescaled so that it does. The value space is similar, only it distributes the extra space around the tiled middle. The corners remain the same. There is also the fillvalue and though it works. and fill in the content I don’t know if it is official as it is not in the speck.
Replacing a picture. First determined the width of the repeating section (34px). Create a square, combine 9 squares into a finished image, and positioned the parts accordingly. Copy the bottom from the top by rotating it 180°. That keeps the value at 34px. border-image: url(09-border.png) 28 34 repeat; It is possible to set each side, top, right, bottom and left with different settings.
The image border is 6K, 1/25 the size of the original and much more flexible.
Gradient Borders
CSS Code View
It used to be that Firefox had a dedicated border-gradient property. That is no longer the case. It is, however, unnecessary as a gradient can replace the picture in the border-image property. Setting the border-image-outset to 1 gives a smooth gradient when the border-image-repeat is set to smooth. Setting it to 200 changes the gradient. When set to repeat 1 gives solid colors, 20 generates a gradient and more than that starts to repeat the gradient all the way up to 200. The repeat is relative to the height of the box so a larger box requires numbers higher than 200. This number represents the border image outset, or how the image is to be divided and it can have up to 4 numbers following the traditional clockwise order. One number makes the outset the same for all four dimensions, two does top and bottom and so on.
CSS Code View
This border-gradient is almost identical to the previous one. The angle has shifted to left top the border-image-repeat has been set to repeat and the border-image-outset has been set to 90. The repeating gradients do something interesting as the way the colors distribute along the axis is reflected in the border-gradient. Increase to colors of the gradient to red, orange, yellow, purple, violet, blue and you’l get a colorful repeating gradient. Adding repeating-linear-gradient does not appear to do much of anything. You can also us a radial gradient. Play around.
CSS Code View
A double border using the clip feature to limit three overlapping gradients that show up in the content background, margin, and a transparent border.
CSS Code View
A partial border that uses a transparent white gradient that goes to transparent black. It create the effect of a gradient that feathers in the bottom left corner. This border gradient will composite into any background.
prepare a pitch of your final website in a new 7-step worksheet dedicated to the final.
Introduce the idea.
What are you selling?
This is the problem your website has to solve?
How will the website solve the problem?
Is the proposal sound?
How it is different from other, similar websites?
How does it addresses the target audience?
Write down the problem you are solving and how the website will solve the problem. Include websites of similar products or competing products that helped you form your decision as to how to proceed in the work-sheet, as I will compare the pitch to the final website.
You are allowed to change the problem and how you plan on solving it as time goes on. Add this to the worksheet, as this is to track your creative process.
Homework for the Unit
You are to make your portfolio responsive.
It is up to you to finish it.
I want to see the core pages responsive to one media query, targeting small screens like the iphone.
The Webby Awards use criteria to evaluate web sites. You should be aiming for something similar.
Content
Content is the information provided on the site. It is not just text, but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.
Final assignment: create a site that sells something. Develop a proposal for your final project. Final Assignment is Due: at the end of the course. Topic for final is Due: next week. Second Quarter Assessment: Midterm: Validate Code and Site Structure.
Materials
Additional materials for this unit can be found by following these links:
provide each student with the time to exhibit their work to the rest of the class, to share what went right, and the walls they have hit because it takes time to digest the large amount of new information that we have covered in the last six weeks.
receive feedback from everyone else about what works and does not work so well.
discover that you have all been in the same boat, which should make you feel a whole lot better.
Outcomes
At the end of this unit, students will have:
spent about ten minutes each presenting their portfolio and their typography assignment.
expressed the UX and IA decisions that went into the project
explained the problems they set out to solve
show the way that they tackled those problems.
used the work-sheets to help present and express themselves.
Definitions
These are the general criteria that The Webby Awards use to evaluate web sites. You should be familiar with them.
Content
Content is the information provided on the site. It is not just text but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.
Watch the the Don’t be Afraid video on Web Typography by Jessica Hische and Russ Maschmeyer. It is only 11 minutes long. The first half explains font-family, font-weight, font-size, text-transform, letter-spacing, line-height and text-align. The second half goes through the creation of a menu in 11 steps with a link to the the starting file along with the steps mentioned in the video so you can follow along: step 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 and the final step 11. Take a look at the finished file. You’ll learn a lot and it is what I want your typography to look like, so please take the time to watch the video!
Know the rules in design and typography. Know when to break them. Be inspired to push or break the rules for typography in web design. David Carson on the end of print with William S. Burroughs reading from his own texts.
David Carson: The End of PRINT
David Carson speaking about his own work.
David Carson: Ted Talk
Create a poster utilizing your work using Illustrator or Photoshop, and then scale it down to a pamphlet size and code it for the web.
Include a profound statement, a saying you are attracted to, or a poem on which to exercise your newfound web typography skills.
Untiled poem by ee cummings (for inspiration —you do your own thing):
l(a
le af fa ll
s) one l
iness
The Type Poster is due in Two Weeks. The new typographic possibilities have to be reflected in your portfolio. No traditional fonts. The midterm is due next week for in-class presentation and critique.
Climate Emergency Teach-In Assignment
In 2018 The New School spent the week on DISRUPT CLIMATE INJUSTICE. Create a five page website highlighting one or another aspect of climate change and build a convincing website. State your case, back it up with facts and tell the world what you are going to do about it. I do not expect you to write so much as express your opinion with the facts and pictures that you gather. This semester they have the Climate Emergency Teach-In on March 2, a Monday, from 11:00 to 3:00. I will be there. Attend and do your website on the climate emergency.
The Website is due in Two Weeks along with the portfolio website. The new Grid Layout and typographic possibilities have to be reflected in your portfolio and the Climate Emergency Teach-In website.
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:
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.
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:
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).
At the completion of the final project, students will have developed the following skills:
Project management skills
Managing files and using file-naming conventions
Designing for usability and accessibility
Managing a quality assurance test
Factoring visitor response into redesign
Synthesizing content based on reflection
Design skills
Investigating and incorporating color and layout consistently
Applying principles of user interface design
Considering screen size
Designing consistent website pages
Rebuilding web pages based on visitor feedback
The Webby Awards use criteria to evaluate web sites. You should be aiming for something similar.
Content
Content is the information provided on the site. It is not just text, but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.
CSS Media queries are a way to apply styles by targeting specific physical characteristics of the browser, like viewport size. Viewport size is the size of the browser window on a web browser, or the size of the device screen on a smart phone. Media queries consists of a media type and zero or more expressions that check for the conditions of particular media. When the expressions match the physical characteristic they activate style definitions that usually overwrite previous style definitions so the page remains responsive, for example, to changes in the viewport. Media queries originated from media types.
Media Types
In CSS2.1, media types specify how a document is to be presented on different media: on the screen, paper, a speech synthesizer, a braille device, projected TV, etc. It uses the @media rule.
It’s possible to target different @media rules within a stylesheet, allowing difference between print:
@media print {
body { font-size: 10pt }
}
and screen:
@media screen {
body { font-size: 13px }
}
Media Queries
CSS3 grafted media queries. onto media types. Media queries allow the physical characteristics of the media determine how the CSS layout is to be rendered. That allows designers to tailor the presentation of the media to different devices without changing the content. The content dynamically adapts to changes in the viewport.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features like height, width, andorientation. A change in the width, height, or orientation of the viewport triggers the media query to switch styles in real time.
This mobile example is best experienced on a smart phone as it is set to toggle between portrait and landscape orientations and changes as you orient your phone vertically or horizontally. You can also change the viewport by changing the width of the window.
A list of different queries that can be addressed from a device. Device can mean the full screen of a device or the display of a browser window. Conditions in bold are most used.
width
height
device-width
device-height
orientation (portrait or landscape)
aspect-ratio
device-aspect-ratio
prefers-color-scheme
color (how many colors the device is capable of)
color-index
monochrome
resolution (including retina display)
scan
grid
How Media Queries Work: Boolean Logic
You may query as many media as you like using boolean operators to determine the logic of each query.
Use “and” to specify in addition to and “,” to specify or, as in this example @media all and (min-width: 700px) and (max-width: 900px), (orientation:landscape) , which reads, for all media, the minimum width is 700px and the maximum width is 900 pixels, or the orientation is landscape. You can also use negation by writing out the word “not”.
When using and, both parts have to be true to activate the media query. If using or (“,”) the media query is true if any one part is true.
The most common way to use media queries is to create a separate media query for each size, and use CSS to override the previous media query with a subsequent media query:
/*default styles for large computer monitor */
@media only screen and (min-width: 1200px) {
/* Style adjustments for laptops*/
}
@media only screen and (min-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (min-width: 480px) {
/* Style adjustments for phones*/
}
How to Use
Like media styles, media queries can be used to change the style sheet or change the style within a single stylesheet. I’ve rarely encountered changing the style sheet. Use media queries to change the style within a stylesheet.
Changing Stylesheets
Example (download ) Changing the window to 700 or less pixels wide selects the “narrow.css” external style sheet to determine the style, “medium.css” determines the style when the viewport is between 701 to 900 pixels wide and the “wide.css” determines the style when the viewport is wider than 900 pixels.
The three stylesheets are switched in real time as the window is resized.
<link rel='stylesheet' media='screen and (max-width: 700px)'
href='narrow.css' >
<link rel='stylesheet' media='screen and (min-width: 701px)
and (max-width: 900px)' href='medium.css' >
<link rel='stylesheet' media='screen and (min-width: 901px)'
href='wide.css' >
Changing Styles within a Stylesheet
The more common approach is to use media queries within a single style sheet.
The @media rule comes first, an opening bracket, the css rules to be affected and a closing bracket:
Demonstration of media queries integrated within the stylesheet itself.
Where to Place Media Queries?
Media queries are placed at the bottom of the CSS style sheet. This allows whatever rules activated by the media queries to override existing definitions, initiating a change in the layout.
To keep scrolling to a minimum while writing the CSS, I recommend writing the rules right after the selectors, one property after the other, rather than each property on its own line.
Locking Down the Viewport and Zoom
When the iPhone was released it needed a way to resize existing website so that they fit. It assumes a viewport of 980 pixels and zooms it to fit the website to the screen resolution by default, unless you tell it not to. This requires the following code in the header:
<!- This sets the viewport to the device (iPhone) screen size, and forces the zoom to be 1:1
================================================ -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
Two approaches to building a responsive website.
Develop the smallest layout first and use @media queries to address larger viewports or start with the largest viewport and work your way down to the smallest. The following example uses three break points: below 600px for phone, below1000px for tablet, and below 1400px for laptops. Anything above targets large computer motors.
Use min-width to scale up from the the smallest viewport and max-width to scale down from the largest viewport.
Phone First
/* Default styles for smart phones */
@media only screen and (min-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (min-width: 1200px) {
/* Style adjustments for laptop screens*/
}
@media only screen and (min-width: 1600px) {
/* Style adjustments for large computer monitors*/
}
Large Computer Monitor First
/*default styles for large computer monitor */
@media only screen and (max-width: 1200px) {
/* Style adjustments for laptops*/
}
@media only screen and (max-width: 800px) {
/* Style adjustments for tablets*/
}
@media only screen and (max-width: 480px) {
/* Style adjustments for phones*/
}
View Websites in Different Viewports
In Safari access the Enter Responsive Design Mode (Option-command R) to see all the possible sizes at once (you will need to have clicked on the expert mode on the last pane in the preferences). Google and Firefox have a similar feature in the Web Inspector.
SmashingMagazine has good articles, and tools to help you, including a preview of what a device size looks like with Resize my browser window, and a responsive, a way to see your project in all widths at once.
Light/Dark Mode
The light/dark color scheme can automatically switched to the the scheme used by the website. You will need to prepare your CSS for both light and dark schemes. See MDN docs for an example.
Type has exploded on the web. Principles of typography, formatting text and using type for effective communication when designing for the web. Activity: Practice using Typefaces from different sources. Activity: Work on Website in class/Peer Review light discussion.
Send peer review comments to peer and to me. Due: ASAP so the peer review can be incorporated into the midterm. Watch the videos on and by Carson. Create typography assignment. Read chapter 13. Due: In two weeks.
theQUIZ testing comprehension of CSS Layout Strategies.
Goals
The goals of this unit are to:
To catch up if you are behind, or to help other catch up if you are beginning to feel that you know what you are doing.
Provide critique, guidance and help to finish your partner’s midterm portfolio site.
Extoll the role of typography in communication.
Understand the basic rules of Typography.
Introduce embedded web fonts.
Be able to work the text and fonts in CSS.
To be inspired to push the Typographic boundaries in creating your own work.
Outcomes
At the end of this unit, students will have:
An understanding of how to use grids in design.
The ability to use CSS grids to do layout.
A working knowledge of typography for use on the web
Access the many web fonts available
The ability to set type rather than rely on the defaults.
Be conscious of what makes type legible.
know how to follow the rules, and when to break them for effect.
Be inspired by Carson discussing his work.
Materials
Additional materials for this unit can be found by following these links:
A lot of websites deserve to be looked at as standard bearers for the web. Here are a few that will provide inspiration as you implement your own typography:
Website effectively communicates skills, stands out, is comprehensive and exquisitely executed.
Fully functional front page, product page and bio page.
Website does not effectively communicate skillset. Pages are simplistic, not fully functional or incomplete.
Pages missing or too incomplete to be functional.
Clean Design
Design is consistent with clear design elements throughout; Design tied to meaning; Nothing irrelevant, everything has purpose.
Design satisfies the requirement. Communicates its intent and is clear
Design is simplistic and does not add anything to the communication.
Design hampers the communication.
Technical Ability
Is innovative and uses User Experience guidelines to develop engaging web site.
HTML is semantic and validates. Various CSS strategies are used to layout the website.
Code has errors but still works.
Code does not work.
Research
The portfolio is well situated and targets all potential users.
The portfolio is well thought out from the artist’s point of view but does not target audience.
The portfolio demonstrates artist’s perspective but lacks general appeal.
Lack of research shows up in product that is not clearly defined for any audience.
Assessable Tasks
Assessable tasks are those core tasks required to create modern web design.
Tasks / Activities
Date
Requirements/Indicators
Marking-up Content
Week 2
Is the markup valid and semantically correct HTML5?
Styling the Content
Week 4
Is the CSS valid, clean, and using structural selectors when possible? Are various layout strategies used to construct the pages?
Constructing the Portfolio Site
Week 6
Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics?
Is the web site Future Proof?
Week 8
Is the website responsive to a change in viewport size, from an iPhone to the standard web browser?
Explore CSS3 and HTML5
Week 9-11
Are CSS3 & HTML5 being used to create the final website?
Modularity and Interactivity
Week 12-14
Are PHP and Javascript being used in the final website?
Forms
Week 12-14
Are forms being used in the final website?
Definitions
These are the terms that participants should be familiar with during this unit. Most of you have had typography, and they should be familiar but if not, please check out the “12-fall/06-typographic-resource/”Basic Typography Resource for more.
Text Type
Designed to be legible and readable across a variety of sizes
Display Type
Designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look.
Legibility
Legibility describes the design of a typeface and how easy it is to distinguish different letters from one another.
Readability
How easy words, phrases, and blocks of text can be read. Readability describes how well a typeface works in practice. Good typography is transparent in the way it encourages the user to read the copy.
Alignment
Text can be centered, justified, left or right-justified.
Inter Paragraph Spacing
Should you indent a paragraph or use a line space? Whatever you do, do not rely on the default. Design that spatial relationship like any other.
The Length of a Line of Text
Long lines of text are hard to read and make it difficult to find the next line. An ideal length is somewhere around 65 characters.
Leading
line-heght is the distance between one baseline of text and the next.
Kerning
The space between specific character pairs. Some combinations require more or less distance than others to make the space appear uniform. Kerning pair information is stored in the font’s metrics.
Tracking
Like Kerning, it changes the letter space between characters but it does do for a selected line of them. Large type can be tracked negatively, and very small type sometimes needs some extra space to be more easily readable.
Case
Type can be lowercase, uppercase, and mixed case. Lowercase (with capitalization for grammar) is standard. All capitals can be hard to read for more than a few words.
Font Style and Font Weight
Roman face fonts are the easiest to read. true italic and bolding are better than the browser’s algorithm for turning a roman face bold or italic.
Color
When you squint your eyes and look at the type, it hopefully has an even grey look to it. If it is blotchy, the tracking, kerning and justification can be adjusted to control for that.
Contrast
How the color of the text works with the color of the background. Black against white is ideal but that can be too start. Large type can handle lower contrast better than tiny type.
Number of different fonts:
Keep it simple! Each font takes as much time to download as a large picture, close to 100K, so be sparing for both design and resource reasons.
Typeface
Choose readability for the body copy, either serif or sans-serif, and if you are going all out for style, do that with the Display face.
Serifs
Serifs supposedly help lead the eye along the line of type but I’m not sure if that is true or not with type on the computer screen. Either way, make sure that the text type is legible and readable.
Font Size
Generally speaking, fonts are not used in isolation and are usually in a hierarchy developed to lock in particular font size ratios. There is also a hierarchy of font width to consider, from thin to thick, and from condensed to expanded. Be consistent and use your best design judgment, and make sure you read the last section on web fonts, and use rems to size your type.
