Category Archives: 2. Web Design

Web Design Class from T2 2015-16

Media Query Demonstration

This is a somewhat cleaned-up version of the demo I did in class.  Feel free to look through and try out the pieces it uses.

Note, you can take a look at media queries in the wild by viewing the source on this WordPress site and searching for media.

You will see also that I’ve added a <meta> tag to the top of the html.  It is:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

This tells the page to think about the size of the page in a manner consistent with regular sizing.  The problem this solves is that the pixel size and densities of mobile devices are vastly different from their regular desktop cousins. Without this meta tag, the media query will not engage on most phones.

mediaQuery.html

mq.css

Website Rewrite

The goal of this assignment is to encounter and handle real world web design considerations. Go to http://urgencycareclinics.com.  This is a web page that was written without the benefits of html5 and CSS.  Your job is to rewrite it, yet include all the information it currently includes.

Use the tools at your disposal. Maybe flexboxes or float layout will help. Maybe a modal dialogue will help. Add images where appropriate, hover effects…whatever it takes to make this companies web site excellent and modern.

Look elsewhere on the web, too. What are great web sites today doing. How can you apply those techniques to the needs of this business?

Consider the user. Who is the likely target audience for this company?  How will they use the web site?

 

 

FlexBox Resources

Today we talked about flexboxes.  At their most basic, these powerful tools are quite simple:

A container with display: flex (we also used flex-flow: row wrap;)

Items within the container.  We used flex: 1 as a base, and flex-basis: 200px; to give some minimum sizes so it would wrap.

 

Here are a couple resources that will help you take this to the next level:

http://learnlayout.com/flexbox.html

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Source Files for Tooltip Demo

Here are the demo files for the tooltips.  The key components are:

a class called toolitp that has a position of relative with a data-tooltip attribute with whatever you want the tooltip to say.

A style for .tooltip:hover::before that forms the triangle pointing at the item they’re hovering over

A style for .tooltip:hover::after that has content: attr(data-tooltip).  It should be positioned absolute and moved to fit in the appropriate place.

 

That’s it. index styles

 

Float Layout Assignment

Start from scratch, please, and write a page that uses all the skills we’ve learned so far:

  • Float Layout
  • Good html structure
  • images and links
  • multiple pages and use relative paths to tie them together
  • external stylesheets for consistency
  • Good folder structure for easy site management (e.g. have a dedicated images folder)

The topic is once again your choice.  Please make it something meaningful — real or realistic sites will teach you more about design than something goofy where nothing really matters.

 

Float Layout Play

Today we played more with float layout.  In the attached html file, I have a three-column layout that uses two sidebars: one floated left and the other floated right.  Within the articles I also have floated the images to the right.  See the attached html for details.

Note, there are a few things I have done here that we haven’t talked about here, but they aren’t critical to the float layout.  Feel free to play around with them if you want.

index