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. ^_^
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.
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!
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.
We have a regular meeting at 3 pm every Wednesday at Room 5.02 in the Informatics Forum.
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/
“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 deﬁnitely 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.”