Progressive Enhancement vs. Graceful Degredtion

When creating a webpage, the designer can approach it in many ways. The two most popular ways are through progressive enhancement and graceful degradation. Both of these approaches are influenced through web browsers and how they display information and the the design.
With so many web browsers out there, and so many versions of them it can become quite a task to make a page that looks good and functions well on them.
Some designers approach a project by making sure the website works on all the browers, using the more outdated browsers as guidelines. They do not focus on the design of the page, but more of the content of the page. This approach is called Progressive Enhancement. The benefits of this approach is that older browsers and cell phones benefit from it. It is also a faster and less expensive approach than graceful degradation.
When using progressive enhancement, you plan out the content, and then the presentation, and finally the scripting of the page.

Other web designers plan on a page by using the most recent browsers as guidelines for how to create a page. They focus more on the design of the page, wanting to be able to use the bells and whistles that are out there even though not everyone can see and benefit from them. This approach is called graceful degradation. When using this approach, the designer must decide which design elements are the most important. When they decide what elements they MUST have, they then have to code those elements for each browser. An example of this is if they wanted to create a box shadow.

“Let’s start with a box-shadow for Firefox, Chrome, Safari and Opera:
.button {
-webkit-box-shadow: 5px 5px 5px #777; /* for Chrome + Safari */
-moz-box-shadow: 5px 5px 5px #777; /* for Firefox */
box-shadow: 5px 5px 5px #777; /* for Opera 10.5, IE9
and future-proofing */
}
Now, let’s extend this with some CSS for IE specifically:
/* call this in IE only */
.button {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(
color=’#777777′, Direction=135, Strength=5);
}” (http://jonraasch.com/blog/graceful-degradation-with-css3)

Some elements such as rounded corners or gradient colors will not work on older browsers. The rounded colors will become square and the gradient colors will become flat.

I personally feel that Progressive Enhancement is the best approach. This is because it relies more on what the webpage is about. Why is this page online, what information is it trying to send out to the users? I do not think a box shadow will influence users whether or not to purchase an item or believe the information on the page is true. Some do believe that these elements are extremely important and stick to the idea of graceful degradation.
To each their own on how they create a site, I believe I will use progressive enhancement, but who knows I may change.

http://www.webdesignerdepot.com/2010/08/a-complete-guide-to-progressive-enhancement/

http://jonraasch.com/blog/graceful-degradation-with-css3

Typography for the Web

As I stated in my previous entry, web design and designing for print are different playing fields,similar, yet very different. The best way I know how to explain it for those not involved in either field is to think of Cricket and Baseball. They both have the same basic layout, however the details are very different. Both use an object to hit a ball and run bases. However the object to hit the ball is different, the balls are different, and the fields are different, yet you can still use one to explain the other. Although web and print design look similar, they really are not.
Through my research I realized something that should have been obvious from the start, but fonts were not created for the screen. They are created for print, for newspapers and magazines. Most fonts are not created with the web in mind. An example one of my sources shows is when you put a layout that was printed on a poster, on the web, the font is harder to read. The reason for this is because the type is aliased. Here is an example of what this means..

In my research i found that there are various ways to make type more readable on the web. Some of these ways are to change the x-height to make the type more readable, to use fonts in the same family so that there isn’t a lot of contrast in the message or confusion.

Although print designing isn’t “easier” than web designing, print designers most defiantly have different challenges. Hopefully through some practice and more research, I can find type faces I enjoy using when designing pages and understand the relationships with typefaces and the messages they carry.

On Web Typography

Webfonts

Typography Books

Web Design

When designing a web page, one must be aware that there are many different browsers, technologies other than computers, and various qualities of screens that we use to look at the pages. Some believe that designing for the web is less stressful than for print, due to the fact that you can always make tweaks on the page if you notice something you would like to change. But in print, you are stuck. This argument was brought forward by Mark Boulton on his chapter of “Designing for the Web” While he makes a valid point I have to argue why would you want to continually edit something while it is viewable to the public? If I was a user and went to a page where I would go to visit it 10 minutes later and it has some changes, I would become frustrated if this continually happened.
I also think designing for the web would be more difficult than designing for print. When you design, say a magazine cover, you know the dimensions you need, who your target audience audience is, and once you have finished designing it, you can sleep peacefully knowing that everyone will see your design the same way and the way it was intended. As I mentioned before, with the different browsers and technologies accessing the page, Web Designers don’t have the same luxury as those designing for print.
There is a post by Nicholas Holland which is an extreme example of how people believe web designing works. They view it as a simple way to take away or add features without it affecting the rest of the web. Although adding or taking away features may not be easy, designers can create pages that adapt to the user.
Ethan Marcotte explains how designers can design a page that adapts depending on the user. An example he gives is how architects now are able to create homes that change depending on how many people are in a room affecting the temperature and how see through the glass is. I think that this is a great article explaining how we do not have to stress over creating a new “home” for every browser or technology that is used. We can create one “home” and make it so its features will adapt to the different browsers or technologies being used. This truly makes the most sense.
I know that I am new to web designing and coding, so my opinion may change in the future, however regardless if it does or not, these articles were very informative and I hope to keep these ideas and thought in the back of my head.

Designers

Francisco Inchauste
Get Finch
His blog is very simple and clean, but still creates a fun vibe. In his blog he discusses design problems and advice, in particular I really enjoyed his post about the “Stop being a Rabo Designer”.
I also do really enjoy his legend on the side, which explains the color of the titles of his blogs. For example those with the red background are “Hott off the cooker to enjoy.” This shows his personality on the blog but not too much personality comes though which is nice. 🙂

Shaun Inman
Compilation Blog
His page makes me laugh as the images are pixelated ON PURPOSE. He has links for his pages all on one main page. I do enjoy the layout of his page, however his music I don’t particularly care for. Although you are able to find the stop button, which usually is a problem in most web pages.

Paulo Canabarro
Abduzeedo Blog

I do enjoy this blog because he picks designs and textures from various sources, such as items outside, western films and so on. I think this is great to use as a guide to help train your own eye that there is design and influences everywhere around you, you just have to know where to look. He also provides tutorials, inspirations and wall papers. This will most definitely be visiting this blog often!

E-Portfolio

As we all know with the introduction to web 2.0 came a lot of great and useful tools. One of these tools is e-portfolios. An e-portfolio is an electronic portfolio used for reasons such as learning, self marketing, and assessment/accountability. An e-portfolio can link individuals to one another, as well as be used for resume purposes.
For learning purposes, an individual can use e-portfolios to document their progress on a particular project. Using it to share images, their reflections, and thought processes.
This is a great tool especially for students. As a student you are still learning about your developmental process and how you learn and express yourself. Documenting it will help the student learn more about themselves more quickly and be able to understand why they went a particular direction.
Using an e-portfolio for resume purposes can be VERY helpful. Placing your address to your resume can help businesses understand your capabilities and variety of work.
I think e-portfolios are a great thing to have. I would love to be able to show someone my work rather than tell them I created a webpage. I would feel much more confident in applying to places when they know what I am truly capable of. I know that some people could have had the same positions as me but may not have the same strengths as I do, and having an e-portfolio would allow my abilities to shine through.
An e-portfolio would even allow others to see my work without me applying to their company. They could look at my work, like it, and offer me a job.
When I start designing web pages and other sorts of media, I will most definitely have an e-portfolio. I don’t see any strong negatives to having one.

EPortfolio and web 2.0
Educause: Electronic Portfolio
Blog on Eportfolio Apps

Web standards.

When the web first came out in the early 1990’s, a competition began between web browsers and operating systems. The first few years of web design, was not so much design oriented. They were mainly text based with a grey background and black font. Here is a youtube video that shows images of web pages from 1994-1998.
As you can see they are all boring and bland (compared to todays standards). Not colorful and very simple with their images. As the web began to become more popular and main stream the competition between web browsers and operating systems began to get a little out of hand.
Mosaic was the first web browser that was able to support graphic images within a text page (as opposed to opening the image in another page with a link). They released a browser in 1993, which allowed the public to be able to use the web. They then turned into Netscape ( a name we are all familiar with..if not..I am showing my age..ahhh) The netscape browser that was introduced in late 1994 supported coding such as the <alt> tag and <embeded> tag.

Netscape’s competitor, Internet Explorer, came out with a browser that was able to support CSS and Java applets and much more.  As more techniques and languages were created, the war between these two mainstream browsers became more powerful and created a bigger gap between the two.  Keep in mind that there are two mainstream browsers, but there are many other smaller browsers that were used as well.  As all of these browsers were used, it became extremely stressful to create a webpage that everyone could see.  Your site could work on Internet Explorer, but would not be viewable in any other browsers out there.

To be able to see in other browsers, web designers would have to create pages for each one, which took up more time and money.  It is a bit silly to think about it, why go through all the stress when you could just create a page that simply worked on all browsers.  That is why web standards were created.

Web standards are not the LAW of web designing.  You won’t receive a fine from the head of W3C for not following the standards.  You may, however, receive a lot of angry and frustrated emails and phone calls saying your site won’t work on so and so’s browser.   And of course, if you upset the customers, you most certainly will upset the client.

The web standards were created to avoid this huge dilemma and create a more peaceful and cheaper internet environment.  The standards you should follow can be found at the W3c website at W3c.org.

I think the creation of standards was a brilliant idea.  It does not restrict someone from doing what they want, but it most certainly creates strong guidelines for those who want to be successful in the web design field.  It would be nice to know a head of time that a particular language would not work on the browser Safari, but if I used CSS I would create a site viewable by all.

It is definitely tempting to create a page that blows you out of the water when you go to it and has all sorts of images and sounds.  But the reality of the situation is why put in all the time and effort for a wonderful page when no one will be able to enjoy it?  You need to make yourself, as well as the pages you create more accessible by being more creative with the restrictions the web has.

Web Browser History
Word Wide Web 1994-1998
Web standards Project
Netscape browser

Designing a site for a mobile device.

If it wasn’t frustrating enough for designers to be conscious of all the different types of web browsers and being conscious of formatting a page that would work on them, they now have to worry about cell phones, Ipads, Itouches, and other mobile devices wanting to see the page.

One site suggested using a code in your CSS. The code you can put is a code for a handheld device. When an item that considers itself a hand held device accesses the webpage, it automatically removes anything under the #nav section. (that is for the navigation bar for a webpage.) Unfortunately, this would not work on an Iphone. The reason for this is because Apple did not want their products displaying simplified versions of pages, when they had the capability to show a page as it was meant to be seen. The solution to this can still be done in the CSS coding section. You just need to set the display for an item with a resolution smaller than a particular resolution.
Another site I came across also refers to using CSS as well as javascript in setting the parameters for a mobile phone. They also suggested to be conscious of how large your columns are and to avoid using frames.
You can also set in a code that detects an Iphone. As i stated before, an Iphone will display a site differently than any other mobile phone, which is why there is coding out there specifically for that device.

I have wondered what happens when a phone accesses a webpage and when my computer accesses it. I did notice some differences in layouts and wondered how that happened. I do think it is fascinating and amazing how some simple coding can do something so drastic.

As I researched this topic I wondered to myself how I would make sure my site would look good on an iphone when I don’t own one. And of course, the answer is as simple as using a certain web browser device on your computer.

I am constantly amazed at how simple it all ends up being. Of course the coding is the difficult part of anything, but aside from that, accomplishing these things are truly simple. They are especially simple if you take the time to research what you want to do and learn the ins and outs of it.

Learning all of these tricks and the coding will be frustrating in the beginning I am sure, but it will most defiantly be worth it. When a business wants a web page created for their company, they do not want to be restricted on the types of viewers they receive. They, of course, want to be seen by anyone and everyone, regardless of the device they are using.

I am looking forward to the days when I am an employed web developer, and a new device comes out that needs particular settings in order to view web pages. To be able to see the process of figuring out how to make everything work will be a great thrill for me.

Designing for Iphone
How to design websites for mobile phones and iphones
Test iphone