Monday, 31 December 2012
Sunday, 16 December 2012
Responsive Web Design: Media Queries
Inhabitant and structure can—and should—mutually influence each other.
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.Responsive Web Design by ETHAN MARCOTTE
It's a shame that I started to know of Responsive Web Design until recently. I was constrained by the things I had already learned. As a result, I spent a lot of time playing with CSS without further exploration.
It might be late but at least I finally read Ethan Marcotte's inspiring article. Fluid grid and CSS3 media queries allow the website to tailor its layout according to the devices used.
First, set meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Then, three ways to set media queries: You can test multiple property values in a single query by chaining them together with the and keyword.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
@import url("shetland.css") screen and (max-device-width: 480px);
@media screen and (max-screen-width: 480px) { .column { float: right; margin: 0 3.3175355% 0 0; /* 21px / 633px */ width: 31.1216429%; /* 197px / 633px */ } li#rowfirstend, li#rowsecondend { margin:0; } }
Other sources:
50 Fantastic Tools for Responsive Web Design
Multi-Device Layout Patterns
Responsive Navigation Patterns
Practical Instruction for Responsive Web Design
- Research/scoping
- Business requirements: business research and goal definition. Web design questionnaires and project sheets
- User needs: user research and persona creation
- Develop core and path: scenario creation, brainstorming, sketching, and scoping
- If something isn’t working well or goes off schedule, keep moving forward. Either find alternate ways to get results or switch to a task that you’re better suited for at the time.
- Wireframing
- Build a responsive site
- Have the key layouts > Consider the key widths > Focus on certain pages > Define the logic
- For each of the chosen widths: Define a grid structure > Home page > Main navigation > Footer
- Test the initial wireframe > Add the tablet and mobile versions to the user testing process
- Build a responsive site
- Look and feel
- Keep styles simpler
- Think about font
- Building the site
- Think about image size, advanced CSS, and constant communication.
(Source: How to Design a Mobile Responsive Website, Mission Impossible: Shrinking the UX Process)
Thursday, 13 December 2012
Using Data analytics in Mobile Responsive Web Design
According to Data analytics in a multi-platform world and Data: Fab Mobile Sales by Day & by Time of Day, many websites have already collected data from tracking what and how their users read, and use analytics to find out the patterns of user behaviour.
The conclusions seem pretty unanimous that a tablet or a smartphone is used to read certain type of content at specific time and day. (使用者會在特定的時間點、閱讀特定的內容主題、使用特定的device)
Take FT.com's user consumption for example,
Users tend to use tablet devices at the breakfast table (around 7 am). Then the consumption reaches the peak for smartphone use at commuting (between 7 to 9 am). During the office time, the usage of desktop site is back to the field. However, after 9 pm in the evening, the tablet and smartphone devices return to the domination once again.
The consumption of FT content on devices takes turns like
tablet -> smartphone -> desktop -> tablet & smartphone
Moreover, according to FT's analytics, the sections read on the tablet include Weekend, Personal Finance/Comment, World, while World, Companies, Markets, Comment are the main content read on the smartphone.
To combine the findings of the data collection, presumably people would like to read the articles regarding personal interests and leisures through tablets. Once they set out to the office, they would start to learn the relevant information and connect with the world news. The devices used are related to their behaviours: when you just woke up on your warm comfortable bed, no wonder a tablet fits best in the cozy atmosphere, but for commuting, it is easier to use a mobile phone rather than a bigger device. And desktop computer is a work-oriented device for sure.
Using data analytics becomes an interesting and useful design method, just like observation of search keywords is a marketing tool for learning trends and human behaviour.
Therefore, when it comes to responsive web design and content arrangement, users' behaviour and goals across different platforms are worth considering.
Image source: How to Design a Mobile Responsive Website
The conclusions seem pretty unanimous that a tablet or a smartphone is used to read certain type of content at specific time and day. (使用者會在特定的時間點、閱讀特定的內容主題、使用特定的device)
Take FT.com's user consumption for example,
Users tend to use tablet devices at the breakfast table (around 7 am). Then the consumption reaches the peak for smartphone use at commuting (between 7 to 9 am). During the office time, the usage of desktop site is back to the field. However, after 9 pm in the evening, the tablet and smartphone devices return to the domination once again.
The consumption of FT content on devices takes turns like
tablet -> smartphone -> desktop -> tablet & smartphone
Moreover, according to FT's analytics, the sections read on the tablet include Weekend, Personal Finance/Comment, World, while World, Companies, Markets, Comment are the main content read on the smartphone.
To combine the findings of the data collection, presumably people would like to read the articles regarding personal interests and leisures through tablets. Once they set out to the office, they would start to learn the relevant information and connect with the world news. The devices used are related to their behaviours: when you just woke up on your warm comfortable bed, no wonder a tablet fits best in the cozy atmosphere, but for commuting, it is easier to use a mobile phone rather than a bigger device. And desktop computer is a work-oriented device for sure.
Using data analytics becomes an interesting and useful design method, just like observation of search keywords is a marketing tool for learning trends and human behaviour.
Therefore, when it comes to responsive web design and content arrangement, users' behaviour and goals across different platforms are worth considering.
Image source: How to Design a Mobile Responsive Website
Tuesday, 11 December 2012
The Future of Entertainment
The phrase 'the second screen experience' I learned recently was from Martin Belam's article The second screen experience: mobiles, tablets and TVs, pointing out that people using mobile devices while watching television, as a result of which, two 'screen experiences' happen at the same time.
Martin suggested that the key to a successful second screen experience design is making a decision about whether you are aiming to enhance the coverage for people or replace first screen coverage.（增進既有的話題與吸引點，抑或是讓它擁有取代電視，但無法被取代的功能）
However, Mark Sorrell had given a criticism that TV is the second screen, and suggested that instead of fighting for attention against which is the second screen, it would be more meaningful to focus on the future of entertainment, to understand the future of the world, as all things working together in that world.
All these can be traced back to users' experience. What are the incentives for users to concentrate on something? Just like Martin suggested, to make it controversial and appealing, or to endow it with irreplaceable meanings and functions.
For example, TV programme(or video-sharing website), online forum and Facebook, somewhat are irreplaceable at the moment. TV programme provides topics for discussion, online forum provides a platform for people who have the same interests, and Facebook provides a personalised place, like a personally owned property. Each of them have almost irreplaceable features, but Facebook gives us more. We are in an active position.
Surely there are many reasons contributed to the success and influence of those platforms and social media. What I want to say is, apart from the reasons mentioned above, people lingering on the Internet are all seeking for an IDENTITY（認同）. I am not sure if the word can express what I would like to say. I mean the social acceptance from the people around them, not only the identity from himself or herself.
What makes some blogs more attractive to their audience? Not only the content is crucial, but if the audience receive their 'unique' responses from the author directly, the mutual interaction becomes a circulation of agreement, and people find contentment from it.
Therefore, whether the identity is from instant feelings or long-term trust establishment; whether controversial features or irreplaceable functions are given, it takes more observation and understanding to create the future of entertainment.
無論是即時的感受，還是溫火慢煮的建立信任
創造話題，抑或是提供不可取代的功能
都需要更多的觀察與理解
Martin suggested that the key to a successful second screen experience design is making a decision about whether you are aiming to enhance the coverage for people or replace first screen coverage.（增進既有的話題與吸引點，抑或是讓它擁有取代電視，但無法被取代的功能）
However, Mark Sorrell had given a criticism that TV is the second screen, and suggested that instead of fighting for attention against which is the second screen, it would be more meaningful to focus on the future of entertainment, to understand the future of the world, as all things working together in that world.
All these can be traced back to users' experience. What are the incentives for users to concentrate on something? Just like Martin suggested, to make it controversial and appealing, or to endow it with irreplaceable meanings and functions.
For example, TV programme(or video-sharing website), online forum and Facebook, somewhat are irreplaceable at the moment. TV programme provides topics for discussion, online forum provides a platform for people who have the same interests, and Facebook provides a personalised place, like a personally owned property. Each of them have almost irreplaceable features, but Facebook gives us more. We are in an active position.
Surely there are many reasons contributed to the success and influence of those platforms and social media. What I want to say is, apart from the reasons mentioned above, people lingering on the Internet are all seeking for an IDENTITY（認同）. I am not sure if the word can express what I would like to say. I mean the social acceptance from the people around them, not only the identity from himself or herself.
What makes some blogs more attractive to their audience? Not only the content is crucial, but if the audience receive their 'unique' responses from the author directly, the mutual interaction becomes a circulation of agreement, and people find contentment from it.
Therefore, whether the identity is from instant feelings or long-term trust establishment; whether controversial features or irreplaceable functions are given, it takes more observation and understanding to create the future of entertainment.
無論是即時的感受，還是溫火慢煮的建立信任
創造話題，抑或是提供不可取代的功能
都需要更多的觀察與理解
Monday, 10 December 2012
Designing for Mobile
Some elements need to be considered while designing for mobile:
Designing for Mobile, Part 1: Information Architecture by Elaine McVicar
Mobile and tablet specific guidelines - Part 2 Design considerations by Elaine McVicar
Source:
Physicality and Specifications
How, where and when
- Touch screens: gestures, hit areas, orientation, transition methods.
- Small Dimensions: device guidelines, design and style guidelines.
- Connectivity
How we behave and feel
- Viewing conditions
- Distractions
- Mobile devices give us a new sense of freedom and control
- Mobile devices as an extension of users' own body and personality
Designing for Mobile, Part 1: Information Architecture by Elaine McVicar
Mobile and tablet specific guidelines - Part 2 Design considerations by Elaine McVicar
Sunday, 9 December 2012
Monday, 3 December 2012
Quadrants of User Intents
In order to classify various intents and needs that individual users might have, Jordan Julien suggests a four-quadrant diagram:
Then, for users having explicit intents, give ways for them to state their needs; otherwise, find ways to persuade them to explicitly state their needs.
(Source: The Importance of Knowing User Intent)
Explicit Specific: Users know what they want; would tell directly.Therefore, to use this approach while designing a website, users' intent should be identified first.
Explicit General: Users don't know what they want; would tell directly.
Implicit General: Users don't know what they want; browsing & navigating (indirectly).
Implicit Specific: Users know what they want; browsing & navigating (indirectly).
Then, for users having explicit intents, give ways for them to state their needs; otherwise, find ways to persuade them to explicitly state their needs.
(Source: The Importance of Knowing User Intent)
Subscribe to:
Posts (Atom)