ITEC 3650 – Savvy IT

Marshmallow Tower

Height: 9.5 in

Place: 4th (tied)

Reflection

Was there a leader in your group? Who was it and who decided who the leader would be?

There was not an official leader. I somewhat took the lead on design ideas and delegating tasks.

If you had no leader, do you think having designated someone a leader would have helped?

I think having a leader, designated or unofficial, is valuable. A leader gives direction and helps the team work toward a common goal.

How helpful was everyone on your team in the process of building the tallest structure? How helpful was the five-minute design process? Did anyone appear to be an expert?

The five minute planning period would have been more helpful had we utilized it properly. We should have spent more time brainstorming structural ideas instead of jumping in. Everyone contributed evenly and preformed their delegated tasks. No one was an expert.

Did any team members tune out the activity–out of frustration with other members or for some other reason? What could you have done to keep all members of the group fully engaged?

None of our members became frustrated. If we had a problem, we would discuss what measures to take next.

Did you feel everyone’s ideas were well received during the activity?

I feel like the ideas we had were well received, but that there was a lack of ideas put forth. Some members seemed hesitant to make suggestions.

How did you feel as the time limit was approaching? Did the pressure increase? If yes, was that helpful or not?

We did feel pressure as the time limit approached. All of the other groups had finished and our structure’s foundation was still shaky. The pressure was more burdensome than helpful. We realized we would not have time to properly fix our structure. We had to make due.

In retrospect, what could you have done differently throughout this process?

We could have spent more time planning.

We could have every member put forth an idea.

We could have used better time management skills.

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.

Leadership

Qualities

Forbes’ 8 Essential Qualities That Define Great Leadership:

Sincere Enthusiasm

Integrity

Great Communication Skills

Loyalty

Decisiveness

Managerial Competence

Empowerment

Charisma

Learn More

Types

Designated: A person who has been assigned to or chosen for a leadership position.

Emergent: A person who proves their leadership skills before being formally assigned to a leadership position.

Styles

Kurt Lewin’s 1939 leadership framework

Authoritarian Leader:

Takes full power
Makes all of the decisions
Has the potential to foster resentment and stress amongst team members
Can have benefits with divided and/or unmotivated groups

Laissez-Faire Leader:

Allows members total freedom
Members make decisions
Works well with highly motivated and competent groups
Can cause group conflict
Can prolong the decision-making process

Democratic Leader:

Shares decision-making responsibilities with members
Listens and participates in group discussions
Makes the final decisions
Fosters a positive, inclusive, creative, and collaborative work environment

Learn More

Image Optimization

Vector vs. Raster Images

Vector:

Vector is ideal for images that consist of geometric shapes.
It is consistent at different zoom and resolution settings.
Vector Graphics represent images using lines, points, and polygons.
Examples: logos, text, icons

Raster:

Raster should be used for more complex, detailed images.
Raster graphics encode individual pixel values within a rectangular grid to represent an image.
Example: Photos
Formats: GIF, PNG, JPEG

Image Formats

Animation: GIF

Preserve Detail: PNG

PNG uses a larger file size.
If the file uses geometric shapes, consider SVG as an alternative.

Optimization: JPEG

JPEG can be optimized for smaller file sizes.

Image Alternatives

Image resources often require a large number of bytes relative to HTML, CSS, and JavaScript. The best optimization strategy would be to eliminate images where other resources can be used.

Alternatives to Consider:

CSS: Effects, such as gradients and shadows, and animations are often only a fraction of the bytes used by an image file. They are resolution-independent and look clear at every resolution and zoom level.
Fonts: Fonts come in a wide variety and improve usability by preserving the ability to select, search, and resize text.

Flat Icon Tutorial