How does our project affect Social Communication

There is no standardized definition of Social Communication online but as far as my understanding, Social Communication is about talking to the people around you no matter who they are or what they do. However, there are natural barriers in terms of Social Communication in many aspects. They are physical barriers, psychological barriers and linguistic barriers, etc. (Michael K. Swan, 2009). Moreover, with the development of Internet Technology some people are getting more and more independent and isolated since they can see the whole world by just simply viewing news pages on a tiny laptop. “It has been suggested that shy and socially isolated individuals communicate more on the Internet because it provides some protection from social anxiety.” (Sarah A. Birnie, 2006) Thus, to some extent, letting people become familiar with each other via Internet is no longer an easy task.


At first stage our group was only focusing on the technologies used on Responsive Web Design since the term RWD was originally brought out by Ethan Marcotte for more convenient use of web pages when displaying on different devices. (Ethan Marcotte, 2011) However his intention was all about removing a wall between laptop and mobile when users view a website on them. The navigation panel may appear differently according to the size of the browser, which can be recognized as the size of the device as well. The video shows on the website may shows at a different position when viewing this page on another device. Users are typing in a same URL but the whole pages shows differently on assorted devices.

In order to dig something new from RWD and challenge the original intention when inventing this term, after our team’s brain storm a creative idea came out. Other than showing the whole page on various devices which is a way that traditional RWD would do, we focused on one aspect which is media-query to build our website. Moreover, we designed a game related to our site for people to play. Our responsive web consists of six different parts of puzzles and each puzzle could only be showed on one specific device such as iphone, ipad or mac, etc. People who play this game need to guess what device she/he may need to find the puzzle and answer it. However, if we do it this way, there would be a problem for people to find devices since there are so many kinds of devices and it is impossible for one person to hold them all. So teamwork is all needed. “Teamwork is the coming together of an alliance or group of minds to collaborate, co-operatively work on a project, solve problems, negotiate, resolve conflict etc.” (Lovemyaj, 2008) Just like we do this project by six people of different races, colors and we are from four countries in the world. Teamwork is essential to us and besides teamwork, nothing can be more important than communication. “One key element to successful teamwork is communication and communication is what bridges teams together”. (Lovemyaj, 2008) Due to media-query, we are able to control the display of every puzzle by defining which puzzle could appear under a certain resolution and other puzzles would display none. If they open our website on a device that is not on our design list, they would see hints for them to try other devices. Our big prize goes to the person or team who find all the puzzles and answer them correctly.


On the day we presented our project, teachers came and some of our friends came as well. They formed teams by themselves and competed with each other.  As far as I know, two of my friends formed a team but they didn’t know each other before that day. Even though their team didn’t win the big prize, they got to know each other through playing this game. To find the right device for displaying the puzzles, they cooperated with each other and communicated in order to exchange thoughts together. One of them is my classmate and the other is from Sound Design. Although we attend courses in the same building and even have a same course this semester the two lovely guys don’t know each other. I am satisfied to see one of my friends becomes friend of another friend of mine through this project. The friend from Sound Design is talented in Music and instruments while the other is an excellent guy who is capable of writing any codes and a man of creativeness. There is a high possibility that these two people work together in other area to create something new and exciting since they are friends now. No one can deny the potential power of social communication resulted from our project. There is another way to expand the value of social communication from our project according to Prof. Martin’s suggestion. We could present this project in a way that people gather here with the purpose of finding a date. Moreover, this game could be brought as a game for icebreaking at the beginning of each academic year.

There is another aspect I would like to mention here about the communication between website and people. It would be a disaster when a puzzle is explained in a vague way. When designing my puzzle I made a mistake that I forgot to put “”diagonal“ after “horizontal” and “vertical” for people to guess how many words there are in total. This critical mistake had made people entered wrong answers.

So, the importance of communication both among people who play our games and between website and people who viewing it cannot be more obvious.  “Only with communication will the project beneficiaries become the principal actors to make development programmes successful.” (Jacques Diouf, 2000) It is a big breakthrough for us to change the traditional routine of designing a responsive web and challenge media-query to make our presentation to be a way of enhancing the social communication among people.



Michael K. Swan. (2009). Barriers to Communication. FACTSHEET.

Sarah A. Birnie. (2006). Psychological Predictors of Internet Social Communication. Journal of Computer-Mediated Communication. 7 (1), 0.

Ethan Marcotte (2011). RESPONSIVE WEB DESIGN. New York: Jeffrey Zeldman. 1,74, 128.

Jacques Diouf. (2000). COMMUNICATION a key to human development.Available: Last accessed 24th Apr 2013.

Lovemyaj. (2008). How Does Communication Affect Teamwork.Available: Last accessed 24th Apr 2013.

Responsive Web or Mobile Sites?


It is reported that about 10% of Internet traffic was caused by mobile web browsing in 2012 while there was only 4% in 2011. With the Smartphone penetration rising globally, “not designing for mobile is an inexcusable and cardinal web design sin.”


To meet customer needs and develop new web technology, designers have developed different kinds of web technology and concepts. Ethan Marcotte raised the concept of Responsive Web Design in 2010 which has become the most popular trends in web design nowadays. This design concept has not only solved the problem of web browsing by phone but also provided the root technologies to view web using arrays of different kinds of devices. However, there’s another situation that designers make a web which is specially tailored for mobile phones. BBC sites are a major example.

On March 27th, 2012, Chris Russell released the news on BBC Internet Blog that they adopted a new approach to creating web applications – called responsive design.

Is this site really “Responsive”? With this question in my mind I opened the BBC news on laptop and lessened the size of my browser, all the content in this page stayed the same. Then I used my Ipad and Iphone to open it. The Ipad page mostly mirrored the page on laptop but the iphone page was definitely different from the one on laptop. Then I found the URL on my mobile was actually “”. “Creation of the mobile site was driven by consumer demand, as in an average week 13.3m users worldwide use their mobile or tablet to visit the BBC News site and apps-around one-third of total visitors to BBC News Online.”(img1&2)

I can not stop thinking whether this is a responsive design or not. There are quite a lot debates about this topic online as well. In Ethan’s article of Responsive Web Design, he put forward media queries to define how the layout should be when screen is within a certain width. This means that when people browse websites on their phones the content they see is the same as what they can see from laptop sites. Here is an  example: the following codes of Media Queries define that this stylesheet should be used when the screen width is maximumly 480px.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

However, the definition of RWD is quite vague. Even << .net>> magazine reported BBC News as Top 4 of the Top 25 responsive sites in 2012. “Designed with a mobile-first mentality, it scales to meet different device characteristics beautifully.”

I don’t deny that this mobile site is well designed. Firstly, it looks quite neat and clear since there is only one vertical division and different pieces of news are in order including images and videos. Secondly, designers are considerate to put two separate tabs on top. They are “Top Stories” and”Most Read” which help readers save a lot of time in finding popular pieces of news. Thirdly, there is a “Section” icon which links users to different part of the website including worldwide region, different areas such as business or education, and magazine area. Fourthly, if you enter a specific news page, the characters are just fine to read and the layout is simple. It took me around 2 seconds to play the embedded video. (I’m using keysurf wifi and it’s 100.0 mbps).(img3&4)

On the other hand people argue that BBC News site is actually not a responsive web design. “The site is ‘responsive’ in that it responds to being viewed on different devices, displaying content in a way that’s appropriate to that screen, but it doesn’t look like it’s been coded as one ‘responsive design’ site.”

I stand in a neutral position in this argument since from Ethan’s article of Responsive Web Design he said that “That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach”, “we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things. ” However I personally see more flaws of this mobile site. First of all, there is much information which has been deleted on mobile sites. For example, on the laptop version, we can see many sub-tabs under Home tab including “special reports” and to the right there is watch/listen“section and “Features” section. All of this guides are deleted on mobile sites. Secondly, from the page I just mentioned above of the mobile page when entering a specific piece of news, we cannot find analyst’s comment on this incident or event, we can not see the related news’ link from other sites, neither. Moreover, as for the news “Chris Huhne admits perverting the course of justice”, there is a “Chris Huhne’s timeline” which can help readers understand his characteristics more on the laptop version. But there’s nothing on the mobile page. Thirdly, even though the simple and fast design can save people’s time when they are holding a phone, but there is a great chance that people are using phone to kill time. The more information the website can provide, the longer the readers stay on it. The more the website functions, the more satisfied are the users. Fourthly, it would take more time to design a mobile site rather than to only design a website with fluid grids since the mobile page is actually another new page with totally different codes. Thus responsive design is more effective.(img5&6&7&8)

All in all mobile sites have their benefits since it is easier to serve a dramatically limited experience through a separate site. The responsive ones have their limitation too, you can take a look at Barack Obama’s official election campaign site, it contains too massive amount of content that the result on phone is extremely long pages.

But I personally prefer the web with fluid grids, flexible images and media queries in the code.


Things for this week

I’ve put my index and some supporting materials on playground under my folder

This simple web looks like:

The most import things I’ve learnt through these two tutorials are that the width needs to be set as percentage and we need to use media query as well and sometimes Jquery

There’re some bugs when I combined these two tutorial then Amy helped me a lot and the key thing is that we need to design the mobile view first and put media query at last… case some important codes may be overlapped by others…..Thank you Amy!

Here are the links of my two tutorials:

IMPORTANT: There’s a wrong point of the codes in first tutorial that is

  1. nav a#pull:after {
  2. ……
  3.         rightright: 15px;  (you need to delet one “right” here)

There’s another thing to notice that in the html, we need to put <script src=””></script> 

in order to use jquery and link js to make the effect…but actually…this is my guess and it worked but I don’t really know why it works…I’ll ask Amy about this.

Here are some other websites which I think may help us:




Meeting Minutes on 23th Jan

  1. We have a regular meeting at 3 pm every Wednesday at Room 5.02 in the Informatics Forum.
  2. Things to do for this week:

(1)  Watch related tutorials then build a simple responsive web and place it on            playground

(2)  We’ve decided that for the first submission we will examine existing responsive/adaptive websites. Next week we can bring the best web examples to our team and discuss individual responsibilities to analyze the website which is going to be chosen from the good examples.

3. We can post on blog that what we have done this week about creating the website and what have we learnt about the techniques to build them, etc. (We can also link the tutorial)

4. Think about what we are going to do at last.

5. We have 10% mark are valued by our attendance of group meetings.

6. Remember to do the reading and we can borrow books and magazines from lovely Amy.

7. During Innovation week (18th-22th Feb) we’re welcome to join the Smart Data Hack