Design

Progressive Enhancement

Graceful Degradation (GE) “degrades” a user’s experience. The less capable the browser or device, the worse the experience. The loss of presentational elements affects the availability of content and the functionality of the website. It is like falling down a staircase: it’s painful, confusing, and thoroughly unenjoyable.

Progressive Enhancement (PE), on the other hand, “enhances” a user’s experience. At its most basic level, a website’s function is to convey information – content. In order to make this content accessible to as many browsers, search engines, and circumstances as possible, PE places it in the basic HTML layer. After the HTML is complete, PE progressively adds presentational features, such as CSS or JavaScript, to the content. If a user has the capability, they can gain the full experience and presentation of the website; if they don’t, they can still interact with a functioning webpage and get the needed information. With PE, we are moving up that staircase: content is our floor and, depending on our leg functionality, we can move up to different levels of presentation.

Knowing the difference between these two techniques is even more valuable in the age of mobile devices. More often than not, your user will take in the majority of their content via their cellphone or tablet. Content and presentation need to be able to adapt to different sizes and work responsively.

Graceful Degradation builds a webpage for a desktop format. It then adds in mechanisms such as media queries to take away features and make the page fit smaller screens. This method is inefficient and can be labor-intensive.

Progressive Enhancement, on the other hand, starts by building a webpage in its mobile format. This prioritizes the most important content and features. PE then progressively adds in secondary features as the screen size increases and there is space to do so effectively.

More Information

Original Article

Website Critique

Feedback Techniques

Giving Feedback

Use “I” Language: I think, I noticed, etc.
Use Specific Examples
Look the Person in the Eye, Show Respect
Be Enthusiastic, Speak Encouragingly

Receiving Feedback

Actively Listen
Be Open-minded

Positive Improve Positive (P.I.P) Method: The Sandwich Method

Top Bun: Positive Comment
Lettuce: Feedback (What can be improved)
Cheese: Feedback
Meat: Detail (How to improve)
Bottom Bun: Positive Comment

Website Critique (with Christian)

Visit Webpage

Christian’s Positive Notes:

Likes animation
Really likes parallax background
The Smooth Scroll is nice

Critique:

Choose a 3rd distinctive font or font effect to add visual variety.

Post-Feedback Results

I used the text-transform property to capitalize the main title.
I used a 1px silver text-shadow effect.

Reflection

Who was your partner and what was their project?

Christian was my partner. He built a website for Space X.

Did you feel that having the sandwich template helped your critiquing efforts?

The sandwich method helped me to organize my thoughts. I was able to give positive, constructive feedback without eliciting a defensive attitude from my partner.

In which role did you feel the most/least comfortable; being evaluated or in the role of the evaluator?

I was more comfortable evaluating rather than being evaluated. Being evaluated makes me feel vulnerable. I had worked hard on my project and I didn’t want to have to change anything. I realized, however, that my website is built for the use and enjoyment of others just as much as myself.

What did you learn from interacting with your partner?

I learned that sometimes two pairs of eyes are better than one. Having someone else look at your work can give a fresh perspective and help to identify problems.

What do your feel were your strengths / weaknesses as an evaluator?

I felt that one of my key strengths was explaining how my partner might be able to fix certain problems I pointed out. For example, Christian was using HTML breaks to put spacing between pieces of content, so I showed him that it would be more efficient to use padding and margins in CSS.
A weakness I had to be aware of was remembering that this was his project and not mine. I had to make sure to specify when I was just giving my personal stylistic preference.

What would you do differently next time you found yourself in an ethical constructive feedback situation?

I would talk more about the components that I struggled with in order to see if my partner has an easier or better way of completing certain tasks.

Concluding Thoughts

Positives:

Increased my design knowledge and capabilities by learning how to utilize:
- parallax scrolling
- relative and absolute positioning (of content over a background image)
- media-queries
- responsive images and font

Negatives:

Although I utilized media-queries, I used them for graceful degradation rather than progressive enhancement. I am in the process of learning mobile-friendly design skills.
I used floats rather than flexbox or grid on my images and layout. This is method is not as clean or efficient. I am in the process of learning CSS Grid.

Structure, Content, Design, and Behavior: WolframAlpha

Structure

WolframAlpha has a clean, easily navigatable parent page. Under the search bar, the first navigation links are to major categories of study (Mathematics, Science and Technology, Society and Culture, and Everyday Life. Under these major categories, it lists links for widely used topics within the categories (Algebra, Chemistry, People, Personal Health, etc.) Finally, under the widely used topics, it has links to more topics in each category.

Content

If content is king, then WolframAlpha is royalty. It contains vast amounts of reliable information (you can view sources and citations) including (but not limited to) summaries, step-by-step analyses, and examples. A user can ask a question, look up a specific piece of information, or browse through different topics.

WolframAlpha knows a lot, but the downside is that it tends to only know a little about a lot. It does not provide paragraphs of information like Wikipedia, it provides more of a summary or overview on a topic. It is good if you want to know the basics or are looking for some information to build off, but it is not great for heavy research (which is a shame due to its level of credibility and vast array of knowledge).

Color Scheme:

The basic color scheme is a white background with red and orange accents. It highlights different categories and category pages with different colors (orange, green, purple, blue). The color scheme is easily readable and provides a clean, professional look. The different color categories help to navigate the website and make topics easier to find.

Font:

The fonts are simple, well-sized, and readable. The colors are light and not hard on the eyes.

Graphics and Imagery:

On the parent page, it has small, representative icons next to each topic. This adds to the user’s understanding of the information. On pages about specific pieces of information, it contains only relevant imagery and graphics such as pictures, tables, and graphs about the subject.

Layout:

The layout of the home page, as described in structure, is neat and user-friendly. The search bar is at the top and center of the page with informative links in categorized columns below. Individual subject pages have information placed under clear headings and in tables and charts.

Behavior

WolframAlpha’s behavior is agreeable. Links and buttons are highlighted when the user hovers over them. Under the search bar, there are drop-down links for an extended keyboard and for uploading content. Category pages have drop-downs for browsing examples. The user can click the site’s logo at the top of each page in order to return to the home page.