#immt715

When we first hear the term CSS there are a million questions in our head. What is CSS? Do we really need to know coding to use CSS?

 CSS was first introduced in 1996 and was called css1 which was a product of W3C (World Wide Web Consortium). At that time CSS lacked browser compatibility. CSS1 one only supported very few attributes like font, typeface, font color, margin border etc. Later CSS2 was introduced in 1998 by W3C, which also contain the attributes controls from CSS1 and few other ones. At last CSS3 was published in 1999 which is used even now for web page designing. Style sheets have come a long way from its release and has become more complicated. With each release there was more capabilities added and broadened.

 Well, CSS or cascading style sheets  are a way to add formatting to markup language which has limited means of presentation. When it comes to CSS we do not need to know a lot of coding to create a CSS file. It’s a form of scripting which when added with some creativity we can make our web design look more efficient and cool. By using CSS we can control the elements inside our web page such as links, font, color, spacing etc. When it comes to syntax of CSS it uses a  number of English keywords to specify the names of various style properties.

 Given below is an example of a CSS syntax:

The most reliable feature of a CSS file is that a single style sheet can be linked to multiple HTML files simultaneously hence helping in reducing the time required to code and design multiple web pages. This way any changes that has to be made to the website can be done inside a single file which in turn will effectively make the changes in the corresponding web pages. But when it comes to the changes that affect the individual page or a particular style  in a page,a new CSS file has to be created and linked to it.

You know that cool thing that you do with your smartphone?   When you hold it vertically and then turn it on the horizontally and all of the text and images conform and fit?  That was my introduction to responsive design.   In 2010 web developer Ethan Marcotte coined the phrase “responsive design” describing how to design for multiple screens.   Basically giving people what they want based on size and orientation of the screen they’re looking at from their desktop to a tablet, from an iPhone to a phablet.

Going hand in hand with responsive design is fluid text sizing i.e., the continual resizing of text during window size changes.  This is particularly important now that the technology is focused on going Mobile First then working up to tablets then desktop computers.  It’s not surprising given that there are 1.2 billion mobile web users worldwide.  

Media queries were first introduced in 2009-2010.  It’s part of the specification for CSS3.    Queries are placed inside the CSS and CSS is used only if the conditions of the queries are met.  How big is the viewport?  What’s the resolution on this device?  In turn, the browser responds with the information.  Media queries deliver different styles to different devices enabling the best experience for each type of user.  Web developers can then target styles based on a variety of properties, one of which is screen width, then orientation.  I have an iPhone 4 and if I was coding to ensure that I would have the best results I’d need to know that the viewport size of my phone was 320 pixels wide by 480 pixels in height. 

Here is my first responsive design assignment with three breakpoints.

There was success at the third breakpoint but I had issues at the first and second breakpoints.

I then went on to learn about what happens on the server side.  When the browser/client i.e., Chrome, Safari, or Mozilla, sends a request to the http (hyper text transfer protocol) server, it essentially sends a GET.   The server doesn’t really care what the file type is.  If it finds the file, it will send it back to you.  If it doesn’t it will send an Error 404 message.  I learned that static content can be great as it shows the same page to everyone.  So a restaurant menu, contact information and hours of operation are static content.  The reality is that it’s not feasible for many situations e.g., user specific views like we see on Facebook, LinkedIn and Tumblr.  Dynamic content exists when you have frequently changing content like a product catalog, or a ticketing outlet like Ticketmaster.  Online banking today is run by customizing, one of the killer Apps on the web right now.

Server side scripting means that servers can now run programs.  Using Computer Gateway Interface (CGI) an http server temporarily hands work off to external programs/scripts via this well-defined interface.  When you look at programming, I learned that you have to see it as a series of instructions.  Each executed in sequence.  Most programming language is very for giving.  PHP is technically a general purpose programming language used exclusively for web development.  It was created by Rasmus Lerdorf in 1995.  PHP is a somewhat forgiving programming language that is beneficial when you’re learning like me.  But when it comes to media queries, order is everything.   What’s important to remember is that the browser sends a GET.  It is received by the http server, and is then handed off via CGI to the PHP process.  The process runs the script and produces the output.  The PHP process then completes.  Responsive is then returned to the client i.e., the html file and browser.

I am now moving into the world of Javascript and Word Press but I wanted to share the work I did bringing four media queries from a responsive CSS into a current responsive file.  Further, I had to integrate an AllTogether.php file into the responsive html and have a series of CSS files in one folder: main.css, main2.css, mainResponsive.css, reset.css and responsive.css.  To complete the assignment, I had to then launch on four different devices, with at least one vertical file.  Here are my screen captures starting with desktop, followed by tablet, android then iPhone and phablet.

The first semester has been a learning curve where we started from the basics of HTML, styled pages with the help of CSS, created our very own webpages, learnt the importance of JavaScript and now we are at a stage where we are about to create a digital portfolio for ourselves.

 It was interesting how things unfolded as we went ahead with the course. Initially we were learning about document structures, tags, browsers, head elements and basic body and document semantics. We created three webpages, each displaying information about different superheroes, however the interesting part was that all three webpages could be styled using only one CSS style sheet. CSS style sheets can be used for controlling layout and typography, responsive and multi-device design, separating presentation from structure and behaviour, media queries and beyond.

 The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical effects that will allow on-the-fly filters and shaders. Before CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML.

 It is interesting to learn that multiple media queries can be included in a single CSS style sheet and thus the webpage can be made responsive for different screen sizes like mobile, pc and tablet. Therefore there is no need to build and maintain multiple version of each page to cater to each screen.  Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:

Height and width of the device

Height and width of the browser

Screen resolution

Orientation of the device (for mobile phones and tablets; portrait or landscape).

Thus, the media queries are based on the above four aspects and we are good to go for different device screens.

JavaScript is another important find in the world of software that we have touched upon in the semester. JavaScript and CSS have similarities. JavaScript is a client-side code which is faster than server side code. With server-side code, the user must send a request to the server, then the server processes the data and a response is sent back to the user. Even with fast Internet connections, this process takes time. When the process just runs on the user’s computer, its fast and provides a quick response for the user. It is this speed that makes JavaScript ideal for web-based applications. JavaScript and CSS could be used hand-in-hand. Being able to offload some of the weight JavaScript carries onto CSS is a great benefit.

One of the most significant and striking things I’ve learned on the coding classes is CSS3. How did it surprise me? I was sure that the main role of a CSS file is simple managing of the style of web pages. For sure, we use Cascading Style Sheets to maintain colors, fonts, links etc. But it was quite obvious to me that I must deal with some JavaScript libraries to make really unique and advanced web-design. Ultimately, close interaction with CSS3 changed my thoughts about this matter. Let’s take a look at some advantages of this style sheet language.

I was introduced to mark-up language in 1997 through a HTML 3.0 workshop. After years of only green, blue or black screens with white text, I welcomed the capability to display ‘formatted’ text with graphics. But the resulting web pages were sloppy and fell short of good design standards. Most pages had only one text column with cartoon-like images that didn’t line-up and often butted against text. 

Creating HTML documents was also tedious. Each section of text had to be individually coded and the same coding was often repeated throughout the HTML. What’s more, revising pages meant weeding through the HTML to change intricate lines of code.

Several years later, I heard about Cascading Style Sheets (CSS) and how they saved time and improved quality. Based on their name, I thought CSS were like templates created for every possible web scenario and that you just needed to drop in text/images to produce a page. This sounded great but also limiting; I was sure there wasn’t a CSS to fit every screen’s requirements.

During early classes in this tool development course, I discovered my template concept was inaccurate. More importantly, I learned how practical and versatile CSS are and how they improve design quality on the web.

Practicality 

Rather than serving as finite templates, I’ve learned CSS cite specific directions on how content will be displayed or ‘styled’ and can be applied to infinite screen applications. These directions can be embedded internally in the <head> section of the HTML file they format or kept in external CSS files and referenced in the HTML.* 

These directions or rules are written in a specific syntax and stated once in the CSS, as outlined in the Figure 2 example. This functionality enables you to change an entire website’s appearance by just making one change in its corresponding CSS – saving significant web creation and maintenance time.

This benefit is even more relevant in today’s world, where pages are viewed on multiple platforms at different screen sizes. To ensure content is effectively displayed on all platforms/devices, CSS now includes ‘media query’ syntax that specifies screen size parameters, layout orientations and other elements for each environment. I can’t imagine the extra time it would take to produce/maintain these responsive designs without CSS.

Versatility and Design Value

CSS has also evolved with web functionality to become extremely versatile. CSS 3.0, the most current version of CSS, contains options to style almost any element or ‘property,’ such as font-kerning, opacity or border-radius, with a broad range of values.  It can even format dynamic content, such as animations and pseudo-class states of an element, such as a colour change when a mouse hovers over it.

Better quality web design and typography is now possible thanks in part to the range of properties that can be styled. In addition, use of the ‘box model’ properties to define layout details surrounding each element on a page also improve the overall design of web pages.

After learning about CSS, I think HTML documents are more like a template or shell. They define the structure of a page and you ‘fill’ them with content. However, without the addition of CSS to complement HTML in this manner, I doubt web development would have evolved to produce the aesthetically pleasing pages we have today in the same timeframe.  

Everything around us is programmed with code.  With a simple click of a mouse where you arrive on the world wide web and how you navigate on a webpage is controlled by code.  So what do you do when you’re struggling to code after you realize that CODE is everything?  You panic and then you take a moment to exhale and figure out that you’re not that lost after all.   It happened to me and here’s what I know after six weeks of instruction.

  I know that the www was invented in 1989 by Tim Berners-Lee and that prior to that academics were using email to communicate with each other.  But it was the big breakthrough of NCSA Mosaic as the first browser to use images that really made the www take off.    Here’s a visual representation from the evolutionoftheweb.com showing how web tech and browsers brought us to the myriad of Apps we have today.

The heart of what I needed to learn and understand about code involved the two core technologies that are key to building web pages and that was HTML (hypertext markup language) and CSS (cascading style sheets).   When you look at an HTML page, it is made up of block level elements and inline elements.  So a block element is a paragraph, section, article, aside, nav, header or footer.  Whereas an inline element is the bold let’s say in a paragraph.  CSS allows you to style block elements so a particular font or value, font size/colour, and background colour.   When you apply a style to a block element it can become a beautiful thing!  Here is my first html page with a CSS (in this instance I put a bold style on my header and sub-header and had a bigger font on the header vs the sub header.  It might appear simple to someone who has a lot of experience in code but for me it was a huge first step.  I had errors in this first assignment which I have now fixed.  The fact that I could go back and fix the code after 6 weeks is also an achievement for me.

 As the weeks went by I learnt the importance of keeping organized files so for each page that I created I would have the following folders:  CSS, HANDOUT (if applicable), IMAGES, JS, and MEDIA.  It would look like this:

I also learned that punctuation is everything!  A colon instead of semi colon, tightening a missed space can make the difference in seeing or not seeing the web page you coded.  I learnt about the box model and that it’s a box wrapping around html elements…so in looking at a box it has width surrounded by padding surrounded by border surrounded by a margin.  Armed with that knowledge and how to examine a page in Chrome and Safari using developer and view source respectively I was successful in creating my first box model html.

The next big task was to create navigational buttons that floated right of the main container image of my superheroes and the buttons would also then animate left when you hovered over the button.  I encountered two main problems.  First, my nav wouldn’t align.  In order to fix the problem I had to use Chrome as my browser and right click to inspect the element.  I highlighted the nav on the left and select computed on the right to add up the element (nav) plus padding, border, and margin (note margin was 110px).  I also had to select the h1 and counted the total i.e., the border, padding element and set the font size to 25px (I experimented with different font sizes).  This was how I was able to resolve my nav alignment problem.  Here is the before image and further below is the after using another superhero image.

The second issue was that my nav had squared edges when the objective was to style rounded edges.  My solution was that I needed a border radius declaration so I looked at the image that already had a rounded edge to determine my border radius and took a shortcut by cutting and copying all of the correct border radius declarations into the nav and voila, almost like magic the problem was corrected.  I still had one small problem.  If you look at the previous screen capture you’ll notice that the nav was off.  To rectify this problem I had to add a line height declaration of 1em in the style.css which equaled the font size in order to fix that problem. 

Extracting meaning from words and sentences is only part of the reading process.  We also need to logically move through text, images and other elements from the most to the least important on a page or screen. Stress increases when you only have time to skim read and are forced to skip details in the hope of catching all the pertinent points.

A deal breaker on making the difference between material that is easy to read, navigate and enticing is visual hierarchy.  This is the formatting the developer, designer or content creator uses to organize text, pictures and other visual elements and guide the reader’s eyes through it. 

To do this, they apply specific characteristics, such as size, colour, contrast and position, to make some elements more or less prominent than others and categorize them. This formatting helps the reader draw meaning from relationships between elements and find what interests them. A sub-set of this is typographic hierarchy, where characteristics are applied to each part of the text. This can range for example from one prominent coloured headline, set in bold weight, in the largest point size to mandatory but less relevant copyright text rendered in black, light weight, six point text.

Print newspapers demonstrate the value of visual and typographic hierarchy in the simplest way because without it, we’d be overwhelmed with identical black letters forming a sea of grey.

Visual and typographic hierarchy is equally, if not more important, in digital copy but requires additional considerations, particularly as its appearance will vary depending on the browser and device the reader uses to view it.

To ensure that the different hierarchy levels are clearly displayed on a digital screen, you must:  

Use legal syntax to specify typographic characteristics or declarations within RuleSets as they are called in Cascading Style Sheets (CSS), as well as corresponding 'attributes' for elements in the HTML documents. 

Include workaround RuleSet coding CSSs for browsers that may not recognize or have not adopted the specific tag yet.

Consider the hierarchy of the web pages themselves and how each element can be altered to accommodate a subsequent element’s code. For example, a early declaration for all body text (body) that sets a color value as grey can be overwritten with a more detailed RuleSet for sub-set element, such as a line item (li), that's subsequently documented in the CSS. Also, if an element, such as a paragraph, is nested within another element or ‘parent,’ such as a div in the HTML, it will inherit the attributes of the parent. 

Use relational measurement units, such as em, which is generally 16 pixels high or percentage (%) for text, versus specific pixel measurements. Similarly, use scalable declarations for objects or space declarations, such as ‘max-width for containers, to create screens that are responsive and can effectively display on varied devices, and maintain hierarchy proportions.

Build additional RuleSet layers into coding for mobile devices to tell readers how to interact and make sure they can do so. For example, this includes including drop-shadows to highlight buttons and ample spacing around them to ensure the reader can easily tap them.

Fortunately, tools for setting typographic hierarchy were set-up from the onset in HTML 1.0 through heading or ‘h’ tags for heading elements.  These tags enable you to establish headings, ranging from <h1> for the most important content, to <h6> for the least important. Heading elements do more than control how the typographic hierarchy will be displayed. They also tell search engines ‘how’ to index the organization and structure of the web pages so that others can find it on the Internet.

There are default values for each heading element that most browsers will use to display them. However, you can also adjust or append these values for the specific scenario and its purpose by setting up specific declarations in the CSS.

One of the key principles of layout design is to keep it simple, often by limiting a document to two typefaces and three or four point sizes. So even though there are six heading tags, it’s not advisable to use all six. In addition to heading elements, RuleSets are also set up in a document’s CSS to define attribute values for other elements, such paragraphs, footers and captions.

This Smashing article (Figure 1) shows how <h1> to <h4>, as well as other elements can be used to show visual, particularly typographic hierarchy on a web page.  

As per the way web coding works, the CSS serves as the directions for a how elements on a web page or pages will look. As such, specific details, such as the font, colour and point size, of block-level items, like paragraphs (<p>), that begin on new lines are defined once in the CSS. The specific CSS is then named in the main HTML document (ideally in the head section). In contrast, the main HTML document contains the web content, such as text copy and images, that are displayed according to the directions outlined in the named CSS.

So looking at the HTML for this page (Figure 2), we can see that: <h1> is used for the Smashing blog title. The RuleSet in the corresponding CSS specifies that this text will be rendered at 100% of the <h1> default size, which is 2em or two times the size specified for the body size in the CSS. The margin defaults to the first value of zero set as the element.style, at the top of the CSS.

Looking at Figure 3, we can see that <h2> is used for the article title (Taking A Closer….). With typographic hierarchy, it's important to clearly differentiate the important from the less important elements and so if size is an attribute used to do this, the variance should be significant enough to make a visual impact. In this case, the h2 is set as 2em or two times the default and bolded with a font-weight of 700. In the h2 RuleSet circled at the bottom, there is a font size of 1.5em, which is overwritten by the previous RuleSet for h2. It's also worth noting that the li (line item) class is used for the author's name and date and rendered at the smaller, default size just below the <h2> tag in the HTML.

In Figure 4, <h3> is used for the article sub-headings (beginning with The Aspects Considered) and at a size of 1.5em (as specified in the CSS section at left) that much smaller than the h2 tag. In this same figure, there is a <figcaption> tag circled in the HTML and its corresponding CSS declarations. As it is of significantly less importance than even the body text, it's declared at .875em, or less than the body text, to help visually depict the hierarchy.

In Figure 5, <h4>is used for tertiary sub-headings in the latter part of the article to organize additional ‘ephemera’ points that are hard to evaluate. As the name suggests, these points may not even be worth saving for the long-term. To clearly position them as add ons in the hierarchy, the CSS RuleSet declares them to be rendered in contrasting san-serif font from the rest of the article, as well as the 100% default text size. 

This is a very simple example of how visual hierarchy, particularly typographic hierarchy, is reflected in HTML and CSS.

However, as the industry evolves, there are ongoing discussions about the best scale, including text size, xheight and spacing for each heading element. It is particularly challenging to maintain visual hierarchy in responsive designs, which are scalable to mobile devices and tablets.