March 8th 2013

1. layout

2.  hints 

a-iphone 4s – We first met Siri

b-iphone 4 – This changes everything again

c-Android – galaxy

d-iphone 5 – the lightest iphone ever

L-blackberries – logo

e-Nexus 7 – google play

f-new ipad – retina display tablet

k-ipad mini – every inch an ipad

 

-Macbook – (browser)

-iMac – (browser)

-Windows – (browser)

 

 

– IE – (none) bonus

– Opera – an opera house

g– Firefox – a red fox

– Google chrome – a browser logo with combination of red yellow green and blue

– Safari – compass

 

riddles  (the answer must be words or number)

(riddles are not related to clues)

15 riddles at least

 

3. set several group user names 

input username

input answer

show the result of right answer amount

4. we can see the whole process of this game (like a sitemap) only on IE brower

it is considered as the homepage.

6TH MARCH

Great Meeting Today!

Absent : Will (Sick)

  • Some thoughts on the Responsive Web Design [Riddle game]
  • List of Devices and Browsers
  • Found Things we can use in this Riddle game at Alison House
  • Started HTML and CSS coding in the google doc.

For this Friday,

Everyone should check the codes in the google doc and think how we can use it in this Riddle Game. Feel Free to change it and adding more codes.

March 4th

No one is absent!

Discuss our thought of first submission mark and the coming submission.

  • We should figure out a creative way in presentation.
  • Actual work is the most important  for the marks.
  • Documentation like photos and videos, as Matin introduced in the second DMSP lecture, should be recorded.
Jacky came up with an new idea.
1\set 6 points in or around Alison house.
2\one person at every point holding an device
3\users use the information on the devices to find out the next one
4\the person who first finish the whole game, he/she win.
For Wednesday.
We need to figure out what content in our website and the way to present it.

 

27th February

Fantastic Meeting Today!

No one is absent!

  • Everyone were giving their thoughts on the feedback of the 1st submission. (There was probably miscommunication and misunderstanding within the group , however this was solved and everyone has already joined Facebook group for this DMSP course. To prevent any miscommunications in the future. )
  • We spent most of the time on brainstorming and many great ideas on presentation of and final submission were emerged.

  • We all felt really happy about this new idea  (we called it “Riddle” at the moment), not only it is strongly related the idea of a “Responsive” Web Design and also a very interesting approach by adopting each different devices to play this “Riddle” game.  It is hard to explain the whole concept of this “Riddle” game on the post, We can’t wait to talk about this to you (Amy) on Monday.

For next week:

The “Riddle” idea isn’t completed yet, everyone is being told to do some brainstorming after the meeting. Bring their additional ideas to the next meeting, and most importantly we would like to hear the feedback from Amy on monday 🙂

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 “m.bbc.co.uk/news”. “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.

References:

uxmag.com/articles/combining-responsive-and-adaptive-strategies-to-solve-mobile-design-challenges

www.bbc.co.uk/blogs/bbcinternet/2012/03/news_mobile_responsive_design.html

econsultancy.com/uk/blog/10956-bbc-news-embraces-responsive-design-for-new-mobile-site

alistapart.com/article/responsive-web-design

www.netmagazine.com/features/top-25-responsive-sites-2012

econsultancy.com/uk/blog/10977-what-is-responsive-design-and-do-you-really-need-it

www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites

en.wikipedia.org/wiki/Responsive_web_design#History

mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Web Design For Accessibility

The concept of progressive enhancement (basic conceptualization is the separation of HTML, CSS and JavaScript) has become a hop topic for responsive website design. It can be simply define as the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations (different devices)

The three separate layers (HTML, CSS and JavaScript) are useful for the accessibility of the websites, the web developer can at least be sure that all browsers and devices will be able to render the content and it is consider as the most important part of website.

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware. Such as Jaws screenreader (See demonstration on www.youtube.com/watch?v=C4SUIjggyN8), it makes blind users to access the webpage easily by listening to the options it gives. Another example of using JAWS screenreader is by Robin Christopherson (www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml)

The webpage also need to be accessible by some other disabilities users such as poor sight or colour blind, according to BS 8878:2010, it is suggested text and images large and/or enlargeable, links are underlined (or otherwise differentiated) as well as coloured. Below is what web accessibility aims to address.

  • Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness;
  • Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson’s Disease, muscular dystrophy, cerebral palsy, stroke;
  • Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
  • Seizures: Photoepileptic seizures caused by visual strobe or flashing effects.

        Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia,        dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental “maturity,” problem-solving and logic skills, etc.

Besides the concept of Accessibility, there is going to be code example for developing website on the final draft.

Reference:

BS 8878:2010 Web accessibility – Code of Practice

The W3C’s WAI Web Content Accessibility Guidelines 2.0

Adaptive Web Design

www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml

www.currybet.net/cbet_blog/2010/06/future-of-web-design-inclusive.php

sixrevisions.com/web-development/progressive-enhancement/

This is a draft of the article, I plan to add at least another feature and some images.

The good, the bad and the ugly

Of the new HTML5 and CSS3 features

By Kristin Yordanova

The fast incoming features from HTML5 and CSS have the capacity to turn around the industry of web designing and coding into a near spaghetti western disaster. And one of the vastly ongoing trends is the responsive website, which again changed the rules of the game.

The vicious circle of constant user demands growth and the reply in the form of new techniques and rules, has open the door to new exciting possibilities for designers. However keeping up with the upcoming features can turn into a “Catch me if you can” situation, but don’t worry this is where html5please.com, css3please.com and caniuse.com come to the rescue. These resourceful websites focus on the new features, give their verdict on how they should be used, and whether or not to use them at all. So we decided to put them to the test.

Using CSS borders in HTML has changed significantly moving away from the boring dotted to new border-image. However it is not supported by all browsers and within these, as you would have thought falls IE. Firefox, Chrome and Safari don’t need additional prefixes added to the code, but in order to avoid the image fall back flat when opened in an Opera, iOS and Android you need to add the respective prefixes –o and –webkit.

Although the code might seem a bit tricky when handled at first it is easy to get used to. All you need to remember is that when specifying the border-image values you’re doing so in a strict order of top, right, bottom and left. Another new feature is that values can also be determined by percent and not only pixels.

border-style: solid;

border-width: 27px;

-webkit-border-image: url(your_image.jpeg) 27 repeat;

-o-border-image: url(your_image.jpeg) 27 repeat;

border-image: url(your_image.jpeg) 27 fill repeat;

This new feature of CSS3 is fairly easy to use, however to make matter even more simple border-image.com is set up to edit and illustrate how your border will look and provide you with the code. Just don’t forget to remove the –moz prefix, which is no longer needed since Firefox supports this code up to 3 generations back.

Although not a brand new feature of CSS3 the @fontface is worth taking a look at when thinking about your frontend design. Even though custom fonts are now supported by most browsers, it is a good idea to use web safe fonts as a fallback option for users IE 9- and the Blackberry users, which don’t support that feature at all. Just specify the font that you would like to use and its location and you are ready to go.

@font-face

{

font-family: NameofCustomFont;

src: url(ThisGreatFont.ttf’),

url(ThisGreatFont.eot’);

}

However in order to make sure you have a fallback option as well you need to add those at the end as well.

div

{ font-family: “NameofCustomFont”, Palatino, Ariel, Times;

}

Even though fallback fonts are a good option, they could sometimes change the layout look, by not fitting in as expected. But not to worry! The creators of html5please.com have thought of that as well and produced the Modernizr Javascript, which detects if a certain feature is supported by the browser. You’ll need to download Modernizr and add it to the <html>, and from then on it will inspect the browsers compatibility with certain features. In the case of font face, where it is not supported it will add a no-fontface. From there it is very straightforward to find the right fallback font and adjust it.

It is worth mentioning HTML5 new input features, which excite us with the idea to make input options easier to integrate in our design, but in reality, fail to impress. While some of the browsers like Chrome and Opera support these new features, sadly most of the browsers don’t.  In the case of input color, we’re looking forward to the time when all browsers will support it, and there will no longer be need of a complex Javascript to create a color palette. However for users of Chrome and Opera, the solution of the HTML5 input color is to just add the code below

<input type=”color”>

and test to see the results on your browser.

The progress of HTML5 features is also presented in its new progress bar tag. An easy input to the code

<progress value=”52″ max=”100″>

</progress>

makes it accessible for users to view to progress time of a certain task, but it will require Javascript to synchronize the time shown. Even though adding a progress bar can be very straightforward, because the supporting browsers provide their own design for it, the novelty lies in the option of customizing that look.

EXAMPLE : Progress bars in different browsers.

From fancy fonts, background images and speedometers, HTML5 now allows you to make your progress bar as complicated as you want. However with the new trends in responsive websites, which are a clean-cut design, we don’t recommend having complex images as a progress bar. But for a more elaborate view on the matter take a look at the “Cross browser HTML5 progress bars in depth” post on useragentman.com.

The new HTML5 and CSS3 features are exciting on many levels, but most because they seem to be simple to implement in your design. However you need to keep in mind to always check the supporting browsers for each feature and to be on the safe side by providing fallback options.

 

Fluid grid draft

Birth of Responsive web design

With the popularity of 3G and Wifi, more and more people start to using mobile phones, iPad or other mobile devices to surf on the Internet. Thus, web designers have to face a dilemma: how to show the same page on different screen sizes?

For example, phones have small screens, and the width is usually less than 600 pixels; PC has big screen, which is up to more than 1000 pixels generally, and some are 2000 pixel even. It is not easy to show same content on different screen sizes with a satisfied effect

The solution for many websites is that providing different pages for different devices. For instance, specializing in providing a mobile version, a iPhone version or iPad version. Although doing this way can guarantee the results, it leads to more trouble to maintain several versions, and even will greatly increase the complexity of the architecture design if a website has several portals. Also, in spite of working in one website version from one portal, the content cannot appear in a satisfied way when we change the window size.

Therefore, it has been envisaged since very early whether we can design once for universally application, which means one page can adapt to different screen sizes automatically, and automatically adjust the layout according to the width of the screen.

In 2010, Ethan Marocotte came up with the word “ Responsive web design”, which also named “ Adaptive web design”. It refers to the web design that can automatically identify the width of the screen and make the appropriate adjustments.

He produced an example for a hypothetical magazine, which contains the six roles’ headshots. (d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html) If the screen is larger than 1300 pixels wide, six pictures will lie side by side in a row. If the screen width ranges between 600 pixels and 1300 pixels, the layout of six pictures will change into two lines. If the screen width ranges from 400 pixels to 600 pixels, the navigation bar will move to the top of the page. If the screen width is smaller than 400 pixels, six images will move into three rows. (Use www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ to test)

Fluid Grid – One of the Three Major Elements in RWD

  • What is fluid grid?

Fluid grid is one of the three necessary elements in responsive web design (the other two are media queries and flexible image). Fluid grid requires that page elements use relative units (such as percentage or EM), rather than absolute units (such as pixels).

This idea came from Ethan Marcotte. When writing code, Ehtan Marcotte realized that, whenever a complex grid has been designed to meet customer demands, customers, as well as the client user, always required a fluid layout. However, at that time, almost all of the grid-based designs are fixed width strictly. So he thought to build fluid grid.  The idea is to use the relative size, combined with the percentages and EM, to get corresponding width by simple segmentation, which is same as the pixel width in fixed-width design.

  • Fluid grid VS fixed grid

Fluid grid is created through the intelligent usage of div, percentages and simple mathematical calculations. Fixed layout has a fixed-width container, and each inside module is also width fixed rather than percentage. Importantly, the container cannot be moved. No matter how the visitor screen resolution is, the pages display the same width as other visitors. Compared with the fixed grid layout, the main part of the fluid grid layout is set with a percentage width, so it can be automatically adaptive to the various screen resolutions of users.

However, many designers still prefer fixed grid layout, because it has a lot of advantages. In terms of design, fixed grid layout is easier to customize, and there will be no trouble of pictures, forms, videos, and other fixed width content, because it has the same width in all browsers. Moreover, it does not need min-width or max-width in fixed grid, so all the browsers can support it. Nevertheless, it will leave a big blank in fixed-width layout for users who use the high resolution screens; also, the vertical scroll bar and horizontal scroll bar will appear when the screen resolution is too small.

Fluid grid layout just can overcome this defect of the fixed grid layout. The blank area around the pages is same in all screen resolutions and browsers in fluid grid layout, leading to a more beautiful visual appearance. If the design is appropriate, it also can avoid horizontal scroll bar appears in a small screen resolution. In addition, for the users, fluid grid layout looks more friendly because it is automatically adaptive to users’ settings.

Of course, compared with the fixed grid, fluid grid also has some drawbacks. For instance, in the fixed grid layout, we can ensure what the designers see is that the users see; however, in the fluid grid layout, it is hard for designers to control the users seeing, and may ignore some errors, because the layout looks fine in designers screen resolution. Besides, in the particularly large resolution, the content will be stretched into a very long line, and becomes difficult to read.

How could Fluid Grid Work?

In order to overcome some problems in the fluid grid layout, we can use simpler design. The less fluid layout depends on pictures and difficult technology, the easier it is for the production and maintenance. Use simpler design and code, the compatibility issues can be better prevent, detect and resolved.

In addition, in order to allow the fluid layout has fixed-width when the screen resolution is very large or very small, to avoid the page being too large or small to read, we can use min-width and max-width.

Some Fluid Grid Layout Design Examples

Example design by Ethan Marcotte

Dustycartridge.com

Palantir.net

Dressresponsively.com

Simplebits.com