Responsive Design in a Nutshell

One of our forthcoming tasks is to create an application that works on multiple platforms. Our aim is to create suitable design for our app so it can be operated smoothly on laptops, pc´s, smartphones and other touch screen devices. We also have to remember the basic laws of web design and UI design. 

What is Responsive Design?

Responsive design is a web design approach aimed at crafting sites to provide an optimal viewing experience from desktop computer monitors to mobile phones.

 

BBC hits the age of Responsive Design.
http://thenextweb.com/dd/2013/01/13/30-new-inspiring-responsive-design-websites/2/

Elements of responsive web design

A responsive web site uses CSS3 media queries, an extension on the @media rule, to adapt the layout to the viewing environment. Plus fluid proportion-based grids and flexible images.

• Media queries allow the page to use different CSS style rules based on the device.
• The fluid grid concept calls for page element sizing to be in relative unites like percentages or EMs, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units (up to 100%).

Creating and updating multiple parallel web sites or apps is laborious and impractical. Responsive web design means that “website should have the technology to automatically respond to the user´s preferences”. In this case one good design is enough!

resources&inspiration: 
 
Responsive Web Design: What It is and How To Use It (Smashing Magazine)
url: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

Design Guidelines and Tutorials
url: 
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

Showcases of Responsive Web Design


http://artequalswork.com/
http://blog.teamtreehouse.com/
http://informationarchitects.net/

http://en.wikipedia.org/wiki/Responsive_web_design

Bechmarking

The second part of the Dynamic Visualization course started last Thursday, and our task was to do some well-structured benchmarking. We had been looking into other similar apps and services already during the fall's course, but perhaps not in such a systematic way. What we found already then was that none of the environmental apps we looked into were that engaging or well designed and that most geo-location based apps we found were pretty similar: based on google maps with some pins and additional layers.

The main points of benchmarking were to find concrete ideas we could use, and to learn from others' mistakes. Below are some of or findings regarding a few services we looked into in more detail.

1) Wanderlust: Good traces of the most famous trips in history

What's good here:

• First impression was very promising. The layout and Look&Feel gave a promise of good quality content and meaningful interaction. 
• When studying the titles of the content user gets a feeling of comprehensive and versatile content. 
• The design itself is appealing and suitable for the content
• The design of the map is nice and clean and could work also in mobile devices. 

What we must avoid:

• Poor and clumsy interaction
• The map is not really dynamic part of the user interface, it is just illustration with minimum amount of functions. The map does not work as an interface.
• The journeys are not interactive in a dynamic sense: The user can select a journey from the list and then follow the given narration. The content of the journey is still images and text. 
• There is no visible timeline or visual cues how time passes by -- you can find some years in the text but time is not navigational element. 
• Content and design inconsistency
• There is no information considering the amount of content per journey -- it varies from 2 images to n images.
• Confusing design and poor communications
• Difficult to divide which parts of the webpage are functional (ui) and which parts are graphics. 
• Do not promise too much -- you do not want to disappoint the users
• How to give a general overview of the project (app, webpage) to new users --> graphics, info text, titles --> what is this service about. 

2) The urban mediator (website / demo)

What we can use

• Closely related to our project in a way that location-based information is displayed on a map with symbols. 
• They're using open street maps, while we're planning to use google maps. Why was open street maps chosen? Is there something we don't know that makes it more suitable?
• They give people the option to view a list of the data, or the data on a map --> sort of similar to what we want to do.
• Clickable symbols open a popup screen on top of the map to display photos, comments etc. --> pop-ups won't probably work in a mobile environment, but how about tablets/dekstop?
• They have a desktop and a mobile version of it --> Should we only concentrate on mobile at this point?

What we can do better

• Design: right now the service isn't really working, and it looks outdated (at least based on the demo)
• Communications: when entering the urban mediator site, its hard to figure out to whom it is made for. Developers? The general public?
• Usability: It's not that clear what you should do when entering the site. We want to make it obvious.

3) Finally, we found a visualization example that uses gradient colors on a google map

This is not a pretty example, but it is the first one we have found that uses gradient coloring to represent data on a map. It represents how the world's population is divided across the globe, which makes it a valid example for us: it is realistic to assume that places with the most population have the largest amount of reviews, making our gradient coloring equally unevenly distributed.

Tests for local environment

Here are some samples from early map tests for local environment with different color gradients.

Masked color gradient tests.

Some try-outs in Illustrator with gradient spots where transparency didn't really work.

The map of Finland with Illustrator's gradient spots.

Different color schemes with Google map.

From Google earth came the idea for logo with a paper cut figure inside a globe. 

This has to be rethinked, since the customer isn't quite happy with it:

Some test pictures for facial expressions:

All in all

I have two close friends who both are artists.

The other one is red-green color blind. He is an illustrator and before he started working with Painter program he bought colors by their names (red-something and green-something) and told me how he used to place red and green colors to the opposite sides of his watercolor palett.
He can not see the difference, only the darkness-lightness values between anything concerning these color combinations. As he told me, the way he sees these missing colors are something between brown or gray. Even so this does not affect his art:

The other artist friend of mine has a glaucoma. He is trying to paint as much as he can before he becomes blind. Glaucoma cannot be cured. He tried the medication, but it did not help so now he is facing an operation in which they try to diminsh the pressure in his eye:

About Group 1's assignments:

Visual Attention we did babdly: we just chose of the six topics two to each, and it was a bad thing since they all are related to each other. It was clearly a textbook thing and we could have got further – maybe – together.

With the other assigment Local Environment it was easier to divide who does what.
My concern was the mapping in the way the client wanted: as a blanket. The client wants two colors: green and red. I had tried all color combinations as the Global Environment group had done: from red to yellow to green with through yellow.
I knew there has to be a more simple way of doing it: there cannot be more than two colors. To keep things simple for the user: KISS-rule. So I talked the members of our group as well as the client to have the other color black. What is the good color then?

I understand the point red: alert!!! But I put black first. Yes, a negative color, but maybe we change into some other by showing a point, by making see there is as something else?

Why black is worst is because painters for some time have used to represent bad. There are examples from Soviet posters (Potjmekin) or Picasso's poster where the pigeon flies over the black guns with the green olive leave in  its mouth. These are the colors that we understand in our culture, also green is the color to which a human vision is most perceptive of.

I could of course wonder largelly of all the mathemaical equations about color, but since I'm not in to that I just wish you all

Merry Christmas and thank you all especially Markku for the great course

See you next year

The final presentation

Rate your environment 
our 2nd presentation

This is our 2nd also the final presentation. There is still room for improvement. Hope the current problems can be fixed in the DVD2 in spring.

Joy the app and welcome any comments!

Questions discussed in our presentation

At the end our our concept presentation we presented some questions that we discussed with our contact person from the ministry on Friday. After our discussion we have a pretty good view on how we are going to proceed.

The questions we presented and the answers to those are presented below.

1) How to show detailed results on the map?

How to indicate to the user what location you have chosen to view, if you cannot display information based on named areas? E.g. “Chosen location” vs. “Helsinki, Finland”
--> We won't show the user the name of the place (s)he has chosen, but will rely on their knowledge of geography. We will also display the names of major cities on the map (similar to google earth, for example).

What is the most user friendly way to move from the map view to viewing detailed results? So when will the clickable symbols appear, and from which range will reviews be displayed from?
We have been benchmarking different solutions in for example hotel booking portals and the Urban Mediator app that was recommended for us to check out. We haven't found out what the best solution would be yet, but decided to try to discuss with people who have experience in creating similar apps right when the spring's course has started, and we know what kind of resources we have during the spring.

2) Color schemes? 

Are we going to separate the expert data from common user data by using different color schemes? If so, how does the user understand the idea?
We will be using the same color schemes for both reviews, displaying them in the same view. The expert data is different from the common user's opinions essentially because this data is from country level, but it will be good to have at lest some data in the beginning, so the results section isn't completely empty, and all parts of the world have been rated at least once.

3) Logging in?

To view “my review history”, the user has to be log in. Also, (s)he has to be logged in for the ratings to appear here. At which point is the user offered the opportunity to log in?
The user will be asked to log in only when trying to access the "review history" section. This is not relevant to those users who do not want to record their own review history, but may be an interesting option for frequent users.

At this point, we have a pretty good idea on how were going to proceed next year. Only thing we need now is more information on next years course, e.g. what kind of resources and time frame we are going to have. No one of our group knows how to code, which will surely make things more difficult.

Concept presentation

Last week, we presented our concept to both our client on Monday, and our classmates on Thursday. What was really positive was that our contact person from the ministry of environment seemed to be very pleased with our presentation. The only major thing he wanted to change was moving from an area based thinking into location based thinking. This means, that we wouldn't give the user the chance to rate a certain city, like Helsinki, or a part of the city, like Arabia in Helsinki, but instead we should just ask him to rate his current location within a 1 km range.

This proved to be really problematic to change by our thursday's presentation, and resulted in some critique about the user friendliness of the app. I perfectly understand this critique, since we were struggling with this problem quite a bit, and it was good to hear that others had similar thoughts to ours. I was a little disappointed though that we didn't receive that much of constructive criticism, or ideas on how this could work better, but we were only told that this doesn't quite work. Which we already knew. This is also our fault, since we failed to send the presentation to our opponents in time, which was partly due to lack of information, and partly due to the changes we still had to make after discussing with the client on Monday.

So what we will have to do, is to really think about this location vs. area thing, and hopefully talk to a person with more experience on GIS systems. What makes this problem really tricky is that whichever solution we decide to go with, it should be applied consistently throughout the app, so both in the review tool, and in the results tool.

Overall, the presentation to our class gave some valuable ideas on what we will have to develop further, but I have to say that most comments were about the exactly same things we already had considered, over and over, and didn't help us get any closer to a solution. At this point, perhaps we would have needed a more in depth discussion with someone who has experience from building an app like this. The suggestion to discuss with the research group responsible for creating the urban mediator app was really helpful, and we might also contact the GIS department in Otaniemi. I met one of their professors Paula Ahonen-Rainio a few weeks ago when she was giving a guest lecture on cartography at our school, and she seemed really interested in helping us find the GIS knowledge we need to further develop this app. There apparently is a whole master's degree program dedicated to GIS systems in Otaniemi, so perhaps we could find someone from there to help us in the app development during spring, if needed. We currently have no info on the spring's course, so it's hard to plan that far ahead yet.

We will meet with the client again tomorrow. We will go through the same questions we presented in our presentation, and hopefully agree that the next step is to consult people with more expertise on our subject.