seen from Brazil
seen from Malaysia
seen from Kenya
seen from Vietnam
seen from Slovenia
seen from TĂĽrkiye
seen from United States
seen from United States
seen from Ukraine
seen from Argentina
seen from Kazakhstan
seen from Switzerland
seen from TĂĽrkiye
seen from United States
seen from Philippines
seen from Malaysia
seen from United States
seen from Iraq
seen from China
seen from Trinidad & Tobago
@n8565406-blog-blog
Mobile Layout Reflection
The mobile layout looks okay on desktop, but I have viewed my site on my phone and also an iPhone. I would in the future adjust the CSS for content to fit to the mobile screen and be more aware of the resolution of the screens to apply to media queries. Also the fixed positioning and the scrollr plugin is not as smooth on mobile compared to desktop. On mobile it feels jagged and glitchy, which is something I would fix in the future.
Assessment 2 Website Link
http://anhn.siteground.net
Note: the site will only be online for 3 months, due to the plan I managed to get from site ground.
I also recommend viewing this in Google Chrome. As there are still some CSS issues in Firefox, IE, Safari.
To see my UI development/experiment posts, you can click on the Assessment2 tag, grey button on the left.
This is my assignment link. I recommended viewing with Google Chrome.
Future Opportunities #1
Since I was designing the site based on the Google Chrome Browser, it looks best in Google Chrome. However, when I open the site in Firefox or Safari, there are still plenty issues and bugs. In the future, I would be more aware of cross browser functionality, and make the website more cross browser friendly.Â
I would also change the video content to be more specific. And also improve on the responsiveness of the website. At the moment the site uses media queries, and there are still some issues when scaling the browser window. I would also change the layout a bit more and also, make the data visualisation for section 3 more interesting.
I would also make the site more functional, for example you can’t actually type in an amount, some filters are disabled and sometimes you have to refresh the page in order to select. In the future I would like to know how to fix these problems. I would also try to find out how to make the graph adjust to percentages. The domain name from: “anhn.siteground.net” would also change to something like “guesshydration.com”.
Mobile Layout Change
Overall, the main thing I added was the share function down the bottom of the screen, to allow a similar functionality to the desktop version.
UI Development
Overall, some more changes I’ve made was replaced some placeholders with content. I’ve also re-worded sections and made interactive elements more obvious, to clarify things happening on certain sections.
For Section 1 not much has changed.
Section 2 I’ve replaced the placeholder video with reference to this video:https://www.youtube.com/watch?v=Gt09pAgTVj0
The video is just an example of what might go there. In the future I would make the video more suited to the site’s aesthetics and more specific to the headings.
Section 3, I added some instructions and also styled the interactive elements a bit more obvious.Â
Section 4, I reworded “confirm” to “guess” to make it feel less robotic. And also re-worded some sentences to be more instructive, to allow more guidance in how the user should interact with the page. I also changed “current status” to “Current Attempt”, because the word “status” is associated with many other things, such “social status”, etc. It had to be more specific.Â
Section 5, I changed “Current Status” to “User Results” to show that the section has changed and that the user is on a different section. Before it remained as “Current Status” in Section 4 and then remained the same “Current Status” in Section 5, which was a bit confusing. Overall the section was reworded, to make more sense of the page.
Section 6, I reworded the bottom red text, so that it’ll link to more information on dehydration.
Some Mobile Layout experimentation. These are some results from playing with media queries. The biggest challenge here, was the data section (Sections 4 and 5). The mobile version at the moment is quite limited compared to the desktop version, in how you would filter the data. At the moment it is using filters: Attempt1, Both, All ages and current year as its default filter. It’s only when you switch to the desktop layout, you get more options. This is something that I would improve on in the future is having the same levels of interaction as the desktop version but also having it balanced aesthetically on a smaller screen is quite tricky to do (for me).
Some more UI development on the 21/05/15
Section 1 compared to proposal: It has not changed that much from the proposal other than a subtle change with the graphics/image of the blood, i added “waves” to indicate that it is a liquid and not a solid block. I felt this was important to change because, if it was just a flat horizontal line, it would just look like a block rather than a liquid, therefore i changed it to make it look more like a liquid.
Section 2 compared to proposal: The main change I made with the UI was made the content video instead of text, the main reason why was because I intended the site to be a bit more visual compared to my competitors and by making it a video, i think is an improvement from my original design. The only thing though that i would be careful about is that it is on Youtube and also the length of the videos as well. For future applications, the videos would be 1-3 mins in length or maybe shorter, summarising what the headings suggest. I also changed the font to be more readable on the page, because before it was quite hard to read with the other font.
Section 3 compared to proposal: I decided to make the text more interactive, before the user would passively watch the words change, but i thought it would be more meaningful and impactful, if the user interacts with the information and find out what they want to know. The idea is that the number that shows on the screen is from an outside source and from gathered data. In the future I would try and create the data visualisation i imagined in a previous post:Â http://n8565406.tumblr.com/post/118063786718/possible-new-idea-for-data-visualisation-on-theÂ
Section 4 & 5 compared to proposal: Some small changes I made, were removing the arrows on the selections, instead of clicking on arrows, the user can click on the box and then pick an option. I also changed some of the wording to try and direct the user on how to interact with the page. Some buttons that I included was a skip button, to show that the user doesn’t have to confirm any details, they can skip the section and move on to seeing previous visitor data. I managed to write a few Javascripts that simulates what I intended from my proposal. There have been a few bugs, sometimes the selectors don’t function and you need to refresh in order to select it. In the future that it is something that I would fix, and I would continue in trying to make it more like what I proposed, at the moment it is quite far away (interaction wise) from what I envision.
Section 6 compared to proposal: Section 6 has not changed that much from the proposal, the animation is what I planned from the proposal. The only minor change is the font color, from white to red. The reason why I changed the color was because red implies and connotes death and I wanted the text to be read in a certain way and that it is associated with death. I also wanted make more contrast on the page.
In this video was my development stage on the 11th of May. It’s only now after spending sometime in komodo edit, i finally got around to posting it. But basically at this stage in the video, i was experimenting with fixed positioning and also z-indexing to block out the last few sections. In the end the layout was similar to what i wanted from my proposal and i managed to get it behaving in a way that was similar to what i envisioned, except the original idea was for the animations was not to have a crossfade transitions, but rather translate transitions where things would fly off the page. But that was a bit problematic in getting that to work.
A few bugs in the video included not being able to select text on certain sections and that was because of my z-indexing not being correct.Â
For the second section, i got some feedback to change the font on the side as it was hard to read, therefore i will change that in the css.
Some changes were made on the third section, this time i added options that you could select such as “where people are getting dehydrated” and also the year. These are filters that would change the number result of deaths, which i think allows more interaction with the data. Before from my proposal it was intended to be like an automatic feed where it change after a certain time, like news headlines, but i think it would be more impactful if the user could interact with the interface and find out what they wanted to know.
I remember at the time of this video, my goals were to make this more responsive (as it was not responsive at that stage), adding a navigation on the right hand side and also completing the last few sections. The video below was just me experimenting around with media queries ad trying to understand how it worked a bit better. Below I managed to make the background color change, font size change and also swap the background-image URL with image1.jpg (dog’s head) to image2.jpg (black)
Statistics 200 per year
http://www.theguardian.com/society/2013/dec/02/dehydration-malnutrition-care-homes-hospitals
Just a bit more research for the third section on my site.
After playing around with the html select tag. Some of the things that went wrong was how it looked across all browsers. This is a solution just using CSS, that I could follow.
Of the three elements that can't be styled using CSS, radio buttons and checkboxes are easy to simulate. Select menus however are harder to handle, but in this tutorial, we're going to show you how to do just that.
These awesome jQuery Floating Menu plugins in today’s post will allow you to add a floating, sticky menu containing important links to your website.
Some references for a floating element i’m trying to do. Out of these, the plug in I might be using is:  http://simianstudios.com/portamento/
Some more UI development. Here I’m just trying to make the site more visual and interactive in replacement of text. I figured a way to do that is by having video and the video will be about the heading that you select. I also made the typography more bold so that it is more readable, before the font-weight was quite light and hard to read. I also added a slight opacity to the typography, to lessen the contrast and make it more soft.
I’ve made a few changes to the Third page as well. The idea for the third section is that you can click on the year, e.g. “2014″ and it will give you filter options like 2013, 2012 and then it will tell you the approximate amounts of people who have died from dehydration. Before I was thinking of having the world map be interactive where you can click on certain sections of the map and it will tell you how many were dehydrated in that area within different years. But I thought that kind of interaction was a bit too ambitious and pretty big in scope, considering my skill sets in coding.Â
At this point, it is not a responsive design yet. The responsive design and also the navigational side bar is something I’m going to try and do, after when I get the basics done first.Â
Video I will try to embed into my prototype. (With no suggested videos after). The problem with this is that it is linked with youtube and if Youtube goes down. Then my site will go down too.Â
Signs and Symptoms of Dehydration
Video on the site? Possibly embedded into the second section.
Possible new idea for data visualisation on the third section. Dehydration visualised on the world map. It would just have a year filter. e.g. 2015, 2016, 2017. I’m not sure whether this visualisation would be good or not, because it would also need to work on mobile devices as well. Fitting a world map data visualisation on a mobile device might be tricky. But I think showing where deaths related to dehydration is more effective when we see it on the world map than reading it.Â
21/05/15 UPDATE= I will not be executing this idea, for it is too ambitious at the moment, especially with my skills, but the idea was you could click on the world map and then find out how many deaths of dehydration occurred in that area.Â
