Blog Post 3: Dadaab Stories

The Dadaab Stories impresses me by its clean and neat layout and interactive elements that engages the readers. While inspecting its code, I found some tags that are essential to web design which can add spices to a plain page.

Screen Shot 2015-02-23 at 11.03.10 AM

The first tag I found is “overflow”.

.tiny_avatar{

position:relative;

display:block;

float:left;

width:25px;

height:25px;

background-color:#fff;

background-size:cover;

-webkit-border-radius:2px;

-moz-border-radius:2px;

border-radius:2px;

overflow:hidden;}

The over-flow tag is to specify what happens if content overflows an element’s box. In this website, if the content overflows, it will be automatically hidden without overlapping with other elements, which is very useful. The W3c School also suggests that it also has several values, such as “scroll”, “visible”, etc. I think in my future design, I probably will use the “overflow: scroll”, to offer more information within limited space.

Another useful tag is “animation”.

.tumblr_controls.transition {

-webkit-transition: top 0.1s ease;

-moz-transition: top 0.1s ease;

-ms-transition: top 0.1s ease;

-o-transition: top 0.1s ease;

transition: top 0.1s ease;}

iframe#tumblr_controls.tumblr_controls.sticky.transition {

-webkit-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-moz-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-ms-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-o-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

top: 0 !important;}

.tumblr_controls.sticky.transition {

-webkit-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-moz-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-ms-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

-o-animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

animation: tumblr_controls_fade_in 0.3s 0.2s linear 1 both;

top: 0 !important;}

This tag is used to make the web element active and animated, which improves user experience. In this website, when you hover the “tumblr” button, a picture unfolds with text on it. I am not one hundred percent sure about how it works, but I think that the “animation” tag must play a role in this effect. I would like to use this tag to make my page livelier and cooler in my future design.

Advertisements

2 thoughts on “Blog Post 3: Dadaab Stories

  1. I also think the overflow tag is very useful. Especially when it comes to limited space, this tag can help solve the problem of displaying additional information. I think by setting the value of overflow to “scroll”, it also invites users to interact with the page. They can scroll down to read and see more content.

    Even through it’s very useful, I think we cannot reply on this tag too much. Instead, we should pay more attention to the overall page arrangement. Also we need to divide the space wisely so that each part of the website can be balanced and have enough space. If the space is too small, even with a scroll overflow tag, it’s still hard to read. Moreover, we should use just one or two scroll elements on a page. If not, the page will be complex and hard to use.

    About your second “animation” tag, I think it needs to work together with “@keyframes” tag to achieve the goal of animation on a page. Check it here: http://www.w3schools.com/css/css3_animations.asp.

    In my blog, I said that I want to use the “@keyframes” tag for my later work. So I agree with you that these tags can make a website more active and livelier. Because now we still know little about javascript and jQuery, I think this can be an alternative way for us to take.

    Like

  2. I enjoy this page a lot because of the interactive elements. It’s nice that the tumble side bar extends out, but what I like more is the video playing in the background, which I assume is similar to just embedding a video into a normal page. You would have to have it play automatically when you access the page though.

    Also, you don’t even have to scroll down to see more content. If you use the arrows, you can cycle through the different topics. I think this is a cool animation and can make navigation more interesting to increase the user experience.

    As you scroll down, you see photos with no title or cutline until you hover over. I think this page does that very well, and I’d be interested in using that type of animation on my own.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s