Monthly Archives: January 2013

January 30

Posted on by

Good meeting today, all!

Absent: Christin (Sick)

  • Mobile-first development is key. Start with the simplest, most basic mobile version and build on it with media queries.
  • Some mobile devices do not understand media queries, so making the mobile version the first code that displays.
  • CSS hierarchy is important.
  • Use classes, not IDs.

Some responsive sites:

For next week:

A draft of a .NET magazine-style article for our first submission.

  • Will: Responsive Media (Media Queries included.)
  • Findo: Responsive vs. Mobile Sites (Focus on BBC)
  • Serena: User Experience (Focus on Human Interface: Touch, etc.)
  • Jacky: Accessibility
  • Ming: Responsive Layout (Fluid Grids)
  • Christin: Pro Tips on HTML5 and CSS3/4, What’s Good/Bad/Works/Doesn’t Work. Pick 3-6 keys and elaborate. (html5please.com, etc.)

Remember, the key is that pages scale UP to desktop, not DOWN to mobile.

Use nth-of-type to design column

Posted on by
I’ve learnt using nth-of-type to design column and I’ve put my web page on playground under my folder
The web page looks like:
_________________________________________________________________________
I firstly analyzed the code of a typical example of responsive web design:
The main points of this example are
  • using Media Query module
  • do not use absolute width
  • using relative font-size
  • using fluid grid
  • using fluid image
_________________________________________________________________________
Here is the link of tutorial:
 http://webdesignerwall.com/tutorials/responsive-column-layouts
The nth-of-type means targeting every “nth” .col element, stating from the first column.
  • .grid4 .col:nth-of-type(4n+1) target every 4th .col element, starting from the first
  • .grid3 .col:nth-of-type(3n+1) target every 3rd .col element, starting from the first
  • .grid2 .col:nth-of-type(2n+1) target every 2th .col element, starting from the first

We need set the stylesheet for them and then consider how to change from 4-column layout to 3-column and how to change 4-column layout and 3-column layout to 2-column layout when the width of the web page changes. The code in the tutorial helps us solve this  problem. And the website of this tutorial is also responsive. ^_^

_________________________________________________________________________

Useful links about grids system in responsive web design:

www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

responsive.gs/

A simple and clear responsive web

Posted on by

The simple responsive web that I put in the playground is

playground.ace.ed.ac.uk/~dmsp_amys/Ming/dmsp1/Untitled-7.html

The tutorial I read is

www.netmagazine.com/tutorials/build-basic-responsive-site-css

As talking in this tutorial, media queries are very important in making a responsive web.

During this experience, I met two problems. One is about the sentence “Sip to Main Content”, I don’t know why it does not appear in the tutorial’s example web. As the code writing in the html, I think it should appear.

Another is about the Head picture “Demo”. I think “Demo” is set as a background picture, so I make a new “Demo” picture by Photoshop, but I cannot put it in the right place, even though I adjust its size.

Things for this week

Posted on by

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

This simple web looks like:

playground.ace.ed.ac.uk/~dmsp_amys/findo/ResponsiveWeb/

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…..in case some important codes may be overlapped by others…..Thank you Amy!

Here are the links of my two tutorials:

www.hongkiat.com/blog/responsive-web-nav/

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=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></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:

blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

thenextweb.com/dd/2013/01/13/30-new-inspiring-responsive-design-websites/7/

 

 

 

Simple isn’t so simple.

Posted on by

playground.ace.ed.ac.uk/~dmsp_amys/will/index.html

I started into building a “simple” responsive website and quickly discovered that such a thing doesn’t exist. The whole premise is straightforward, but the end product is never without complication. There are about 50 ways to do everything. Adaptive font sizes? Using em units works, but only on initial loads or page refreshes. JavaScript? Again, that works. But it’s clunky.

I tried to focus on essence of an adaptive website. The reason is exists in the first place. People access sites from many different devices, on different platforms, and with differing screen resolutions and pixel densities. With all of these things considered, what is the most important part of a website? Displaying the content in a way that makes the user able to navigate it and comprehend it.

So I just created a basic layout-swapping and adaptive-sizing page using a placeholder image and some dummy text. It’s not extravagant, nor is it beautiful; but it shows how media queries work and the basic principle behind adaptive sites.

If this was an elaborate, complete design, I would have used em units for everything because px units don’t convert directly on screens with various pixel densities.

Meeting Minutes on 23th Jan

Posted on by
  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 rhiaro.co.uk/ilwhack/ 

Requirements

Posted on by

From the main DMSP project brief:

Short online article 20%, 1000 words max.

“Taking your lead from interesting online magazines such this one in artcritical, 2011,
write a short, punchy article on a theme relating to your project. We definitely DO
NOT want personal diaries about how well or badly the project went, but a discus-
sion of an interesting theme that you might have had to engage with directly or that
interests you now that the practical work has been completed.

“For example, if your project was about projection mapping, you could write about
the issues relating to how projection mapping has been co-opted by the advertising
industry and how might have limited the artistic potential of these approaches. You
SHOULD NOT write about how you fell out with everyone because your projector
broke on the night of the presentation.

“The article should be no more than 1000 words long but can include images and
references to the documentation and resources you published in submission 2.”

Due: Friday 26th April

Requirements

Posted on by

Submission outcomes are flexible to start with, but must be made concrete by group consensus by Week 2.

The final artefact, probably a website, will be fully functional and looking pretty.

Documentation, which will include:

  • Initial planning, conception and justification of decisions.
  • The design process, including early user testing.
  • Commented code.
  • Testing procedures and outcomes.
  • Clear descriptions of who did what.

(Documentation could be in the form of a website, presentation, poster, or an ordinary document.. or any other method, within reason, that students would like to use).

Due: Friday 26th April