On 23rd May Helsinki was once again hosting web design and development event/conference Webshaped. Notes (and links to mentioned tools, films, blogs, sites etc), that have been taken by myself through the day, are listed below.
Vitaly Friedman (@smashingmag) – Responsive Web Design: Clever tips and Techniques
- Google WebFont Loader, smart css font callback.
- Different devices and it’s browsers are using different browsers and default fonts. In terms of loading speed, load first fonts that excists on devices and then custom (additional) fonts.
- Always include performance in project documentation – for example: I’ve got that and that kind of content, which needs to load over that speed during that time.
- Set performance budget to your project, see also Responsive design on a Budget.
- Slowy App – emulate slow page loading – app to change connection speed to 3G of EDGE for example.
- There are emulators for testing your site across different devices, emulator for Nokia and Android.
- Responsive design affects all elements. Responsive content could be also accessible offline.
- CSS flexible box model for tables. You don’t need to display tables on mobile same way as on bigger screen. Be creative – tables to list for example.
- Pull down menu instead of displaying it by default or hidding it.
- typeform.com
- Cloud Four Blog
Holger Bartel (@foobartel) – 180 Degrees East
- Don’t asume that everyone has a smartphone or enough connection speed to load your 5MB “very responsive” website. In Asia, 70% internet users are using web over mobile. There are phones that never reach to our (west) market: Xiaomi 2S, budget oriented (~250 dollars) but very powerful smartphone.
- In Hong Kong there are phone stores that have 3 floors full of only mobile phones. And of course, there are copies and even copies of copies.
- Most popular web browser in China is local UC Browser with over 400M users and QQ Browser.
- IE 6 market share has dropped from 40% to about 6% but still many bigger portals claim that their visitors are mainly using IE6. But the problem is slowly vanishing.
- Network speeds: Hong Kong – 3G, 4G, unlimited data very cheap. China – 2G, 3G, no 4G. 3G is available only in bigger cities. Started 4G testing in Shanghai with approx. 5000 users. Most users are using internet over mobile phones – no money for computers and they don’t want to learn to use computers because they have their phones already and they don’t see reason for it. From mobile web users, 15% uses internet over 3G.
- One page should serve everybody, heavy weight pages are not for everybody.
- Firefox OS feature “cost control” #dontdownloadmorethanyouneed
- Data traffic is going bigger and bigger, we need bigger servers, faster lines, and due to that – more energy. From where this energy comes? Data crazyness.
- How can we be more “green” in the web industry?
What’s your content now?
Language culture
- Ravenue for native apps is high in Asia. China is very budget oriented, they love free apps but are willing to pay for content that has been translated.
- iPhone != iPad. Thay buy more translated apps on iPhone but translation does not really matter on iPad.
- Even small market share could mean several million users (in China). Stay open minded. Understanding different cultures can be very frustrating and hard to accept. Overcome technical as well of cultural barriers. Ponder your WTF moments.
- Users in China are very content based, practical minded, not so about the design. As much info as possible. But there are changes but not too much. But design is maturing. Context based.
- E-commerce, m-commerce in China could be next big thing and it’s a good time to jump on that train. Even 1% market share means millions of users.
Henrik Rydberg (@HenrikRydberg) – Hacking Into User Experience
1. We are thinking about ourselves. Best companies know that and step out the way. When ever to ask someone what are you thinking, it’s related to that person. (” I’m thinking of having a breakfast”).
2. Moments that carries you further – thay add value
3. Only people to people business works
- Top down – CEO, product lead, head hanco
- Bottom up – Designer, Developer, Ninja
- Outside in – Product manager, designer, researcher
If your team consists of 1 person, you’ll need lots of time managemant to do.
Top down:
Remove until it hurts and then little bit more. As easy as possible. For your app have only essential.
Bottom up:
Give users feedback, response to users actions. Good responce causes feeling that something is happening.
Outside in:
Get out of your office. You can’t asume that how your customers will use your product. We know that for what its for and how its working.
Observe and be very open minded. Do not give that job to salesman. Do not do everything in your task list. Be analytical what you see while your users use your app/page. Threat what causes problems.
Lunch
Yves Peters (@BaldCondensed) – Selecting Type
1. Look at face and see what it is meant to be used
2. What are your requirements
Every font has an historical context (Uses of Blackletter, from nazis to R&B)
- Marksimonson.com
- Cultural references – they tempt to change
- Helvetica – most neutral typeface that could be. But too many companies started to use it – became commercialised
- Cultural stereotype
- Mandarin typeface – originally for soup – now everyone is thinking that it’s default Asian type. May be inappropriate. Do not insult your audience.
- Floating heads mockumentary
Florian Plank (Polarblau) – Prototype in the browser
Terminology (prototype)
Years ago prototype was something physical and could be touched but it did not work. Rather primitive form not real product.
Prototype never reaches to end-point. It may overlap with end point. It’s never the same as final product.
Prototype = through away product
= scientific tool (user behaivor)
= way to learn and fail early
Prototype is not: cheap way to get your app done, half-ready product to ship quickly
Prototype should be fast, simple, disposable and fun.
Why browser for prototyping? Full featured interaction layers, it’s the same environment where final product is going to work. Browser is forgiving
Toolset for browser prototyping:
Keep parts of your prototype reusable – both layouts and partials
Jonathan Smiley (@Smiley) – The Future is Responsive
- Mobile users will outcome desktop this year.
- Samsung has made about 40 different mobile phones, 4 different resolutions, 20 different screen sizes.
Native apps – expensive, you can’t recompile apps for different platforms easily
Mobile apps – m.something.com – but what is mobile device anyway? Google glasses, self driving cars with mounted screens etc. Where mobile starts and where it ends?
