26 Inspiring Responsive Web Design

So in no way trying to compete with Lailah's very cool post on media optimized websites, I also found a useful one. Although it only has 26 examples (and not over 400 examples), it still is something useful to look at. At the end, there are a couple of tutorials from various blogs about media queries (try compete with that Lailah :P). All tutorials are interesting to read in their own way as each bring something different to the table. To be honest, I really wish we had started learning fluid layouts from the start of this course as I think it would have given us more experience to think more, well, fluidly, in terms of design. Seeing all these examples of websites that have the ability to change is inspiring as well as a bit frightening. To get a site to work on different screen sizes and with different capabilities is no easy feat. I am excited to try my hand at it and see how I fare. I am dying to get out of the pixel world - it's way too static and stubborn for me. To add to all that, we have to make it look like an online magazine. From a design perspective, it definitely forces us to stop thinking about creating a typical website page with a header, nav bar and footer. 

But to get back to the point: 26 Inspiring Responsive Web Design 

- Have a great day! 

Cool site

I was searching around for online magazine inspiration. I came across this really cool site. So have a look. Lots of interactive stuff:)

 http://www.planetdigimag.com/#10/1

Media Queries -- Useful Site

Here's just a really useful site that showcases mobile optimized websites...

Media Queri: http://mediaqueri.es/

Just useful to see it all in action :)

Interactivity and the Mobile Web

It is a week into the new semester and after a few days filled with introductions and at least a night or two spent googling for "mobile magazines", "mobile magazine apps" and somewhere between "e and electronic magazines and/or books", I realized the semester has officially begun and I'm feeling slightly disoriented -- as usual!

In all my googling about interactivity for mobile magazines, what I have concluded is that interactivity is just a practical extension of the concept: Experience... The experience of browsing, of interacting and receiving a response from the other end. All the concepts we learnt about with Processing last semester. And after reading the first chapters of our textbook, Head First Mobile Web, a call for the responsiveness of design mixed with the excitement and curiosity of the users together have seemed to push the browsing experience beyond anything anyone could have anticipated.

And I think essentially its the survival instincts in people that really fuel all these advancements. The fact that people want to be able to do things themselves, take things into their own hands and create. Be creators and express themselves. Be the authors of their lives. All these apps that require people to mix the perfect coffees, draw pretty pictures and travel the world over, for example World Atlas, all fuel this inner-aspect of users. And then again, having everything at the tap of a button or the touch of a screen, well how could that not be something people would be interested in?!

So getting to the point, our first assignment is to create a mobile magazine feature article about Zulu Love Letters, with an interactive component that allows users to create their very own Zulu Love Letter. This assignment is intriguing for a number of reasons, partly technical but also creatively. So a big thumbs up to our lecturers who came up with it. On a technical level, we're doing mobile. It's something I haven't taken the time to look at before, so I'll be learning something new and also something completely relevant to the times we're living in. The prospect of mobile web design was intimidating at first, as I wasn't sure how much of what we've done needs to change and how exactly that transformation occurs. Also probably largely all the above-my-head technical chatter about android devices and different operating systems for phones requiring different scripts for apps freaked me out. However, now that we're over the introduction to scalability and getting into the swing of Responsive Web Design using fluid layouts, I feel a whole lot better. I'm pleased to say that though my first fluid layout is hideous, it's successfully scalable and percentages are making a lot more sense to me now.

So on a closing note, I just wanted to say I am excited about getting this mobile web assignment started and I hope to learn as much as I can in the short time we have to execute it, and also to share the (hopefully) cool things I come across along the way.

Visit my blog post here: http://www.mendilab.co.za/FAM3007F/2012/ryklai001/?p=78

Below are a list of sites that I managed to come across in the mean time, related and just interesting and interactive apps:

Best Interactive E-books: http://www.bestinteractiveebooks.com/

About Interactive E-books: http://uxmag.com/articles/interactive-ebook-apps-the-reinvention-of-reading-and-interactivity

Examples of apps ~ Since it all of these are about the user having the opportunity to create something (much like our Zulu Love Letters), they just seemed relevant... conceptually anyway o.O!

Starbucks Coffee Master: http://itunes.apple.com/za/app/starbucks-coffee-master-for/id436466118?mt=8

Glow Coloring: http://itunes.apple.com/za/app/glow-coloring/id360776513?mt=8

How to make Origami: http://itunes.apple.com/za/app/how-to-make-origami/id472936700?mt=8

Quick facts about the Zulu Letter

For those who don't want to trawl through sites and books to find out what a Zulu love letter is all about I have made a list of quick facts to cover the basics. This is the quick and dirty way to cram info so if you interested in the full story then check out the full version on my blog - Geek Streets.

Here are the quick facts!

• What is it?
• It is a message conveyed using symbolically coded beadwork. 

• Why is it used?
• It is used to convey feelings of love and affection.

• Who makes them?
• Zulu maidens. 

• What influences the coding?
• The colours combined
• The way the colours are arranged
• The use of the object
• That nature of the object

• What do the colours mean?
• Black - grief and loneliness. 
• White - purity, hope and true love. 
• Yellow - wealth.
• Green - love sickness and jealousy.
• Blue - loyalty.
• Red - intense love. 

• Where do these meanings come from?
• From nature. Eg. Red - intense love, because red is the colour of blood (igazi) hence the saying "my heart bleeds for you". 

• How do you read it?
• Traditionally they had a long single strand of beads and then reading it from one end to the other. Now with the square design you read the message from the outside toward the center. 

Now see how this one is read...starts from the outside with loneliness and grief then advances to the center while conveying various other emotions. 

It's all about the grid yo!

Fluid Grid Layout!!!

While doing the exercise I found the thing I needed to wrap my head around was the layout. Some of us are used to using fixed pixels so that we can program pictures and content containers to fit in exactly where we want them to. I know at one stage we have all had that frustrating moment when you are chasing a container around your screen because it won't stay in the center of the page...hate that.  Since being considerate is the new buzz word we need to start allowing our sites to shape to whatever screen or device they find themselves on. We need to stop being so darn inconsiderate!

Adobe Dreamweaver CS6 contributors found inspiration from Ethan Marcotte (this guy must be awesome amazing socks because he was mentioned in our textbook too) and Joni Korpi when dealing with arranging the columns into a fluid grid layout.

*See Marcotte’s article, Responsive Web Design, and skip down to the Media Queries paragraph to see the thought process behind media queries.

*Check out Korpi’s Golden Grid System, which uses meticulous calculations to respond to the biggest and smallest screen sizes. This article also gives you html, css and javascript examples to download which has comments as well so you understand as you go along. 

For those who have Dreamweaver CS6 (lucky bums) they have templates set out for fluid grid layouts. I advise you to just skim over those layouts if you are completely lost and see how they did it there. You should invest in downloading Dreamweaver for a month’s trial run if you have not already, dude...like seriously...

Get the trial version of Dreamweaver CS6 or buy it if your wallet allows. Price being $485 - excluding tax. Then check out the tutorial video. The first video is from the Adobe site (the nasal sounding guy, I think his name is James) and the second one I found on YouTube (the ponytail guy) is more basic. Both of the videos are very helpful. 

Some Helpful Stuff I Found

Hey guys,


So I've been doing some extra readings on mobile web practices. I came across a really helpful one, Mobile Web Best Practice 1.0. Although it's pretty long, it mainly comprises of short pointers about best practices for delivering web content on mobile devices. It aims to explain how user's experiences can be improved when accessing web content over such devices. I read this before we started term and I felt like I understood the majority of what was being said (and that says a lot!). It shouldn't take you that long to read, but have a little patience and I hope you get something out of it. 


I also found two YouTube clips that I found gave nice summaries on what we've covered so far in class. The first video: Media Queries Part 1 The second video: Media Queries Part 2.

It will be great if we could all post links of blogs or videos that we've stumbled upon and think are useful.

View this on my Wordpress site.

FAM3008s Assignment: Mobile magazine feature and HTML5 app

Interactive feature: Send a Zulu love letter 

Develop a responsive web page in HTML5 as an interactive feature for a magazine, suitably adapted so that it is easily accessible via mobile devices.

The page should include the following:

1) Magazine logo for a (fictional) magazine.                                                                                 

2) A short feature article explaining the tradition behind and meaning of Zulu love letters.

3) Hi/low res photographs of Zulu love letters.

4) An interactive component (using the canvas element and Javascript) which will allow readers to design their own love letter.

5) A set of annotated links so that readers can explore further.

You will be assessed on how well your page is designed to adapt its layout and content to the client on which it is viewed (smart phone, tablet and desktop browsers).

Write a short blog post linking to your project where you explain different strategies used by magazines who are adapting to the mobile era.

Bonus marks: Write a blog post which explains how you would go about saving the user’s design and displaying it as an image (png, jpeg etc) 

The Assignment will be spread across 3 Phases:

A) Using CSS3 features (media queries, fluid-grid layout and fluid images), javascript and web-fonts a dynamic online magazine web article will be produced that conforms to the display capabilities of  smartphones, tablets and the desktop. This design should consider Phase B's interactive component in layout design.

B) An interactive Zulu love letter component will be produced using the canvas element and Javascript.

C) The Zulu love letter component will be integrated in the web article. This will require careful consideration for whether to include the Zulu love letter component in the smartphone layout or to link to it. This will also require developing javascript to load and display the Zulu love letter component.

Media Queries and online Typography

Some usefull URLs for considering Media Queries and Online Typography:

http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html

http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries-pt2.html

http://www.alistapart.com/articles/fluid-images/

http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/

http://www.smashingmagazine.com/tag/typography/

http://www.html5rocks.com/en/tutorials/webfonts/quick/

http://www.speckyboy.com/2008/06/15/32-inspirational-examples-of-amazing-layout-and-typography/

Taking license to introduce Considerate Web Design as yet another Buzz phrase

Yes, Considerate Web Design is another Buzz phrase, attempting to capture the innovation and transformation of tools, concepts and practices attempting to meet the capabilities and requirements of new web consumption devices. It refers to a concepts and techniques (Responsible, Responsive, Fluid, Liquid, Mobile First web design, etc.) as well as the technologies that make the implementation of these possible (html5, CSS3, server and client capability detection, etc.) 

On a more personal note one of the reasons for the "Considerate" in the phrase stems from the blog creator's "pet hate" being inconsiderate people. Not being considerate of others indicates a lack of empathy and awareness. Inconsiderate people seem less conscious. Imagine a web page or application that is more considerate...

Principles of learning Considerate Web Design

As new technologies necessitate the development of new techniques and tools with which to consider such developments, Considerate Web Design is still an emerging domain of practice. This is an exciting time for web development as there is rapid innovation and existing practices, standards and tools are transformed. This poses some challenges to would be considerate web designer as standards, practices and tools are still in the process of being defined and developed. There is no single authority regarding it and technologies and practices do not cover all requirements and the implementation of standards vary. However, this is also an opportunity to innovate and make a contribution.

The basic principle for learning considerate web design is therefore participation. This blog subscribes to the learning principles of constructivism and in particular the sociological notion of communities of practice. According to this notion learning takes place through communities participating in a shared practice. Typically novice participants learn the "culture" of the community, i.e. the language, stories, concepts, tools, practices and ultimately learn how to see the world through the eyes of that community. Through time and experience the novice becomes an expert and innovator in the field redefining the practices, tools, concepts of the community of practice.

This blog attempts to provide a public space for such learning and collaboration to take place. A space where participants can consider, share, experiment, play, discuss the emerging practice of considerate web design. The creator of this blog is currently teaching an introductory course in Considerate Web Design to a group of third year Film And Media Students at the University of Cape Town. This blog will thus also represent the learning, assignments and research done by the participants of this course. Kindly consider this blog, posts made by its participants and engage with us through comments, suggestions and contributions.