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.
- Cloud Four Blog
- 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?
- Test sites – Network Link Conditioner (XCode).
- 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.
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.
Remove until it hurts and then little bit more. As easy as possible. For your app have only essential.
Give users feedback, response to users actions. Good responce causes feeling that something is happening.
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.
Yves Peters (@BaldCondensed) – Selecting Type
- If you need professional photo you go to the photographer, If you need to design your webpage and maybe choose proper fonts to it, you’ll to it yourself. There is not enough training on typography.
- You’ll need only 5 typefaces: Bodoni, Futura, Garamond, Helvetica, Times New Roman. But there’s so many users with different tastes.
- Choosing type is similar to choosing clothes for a day. Before you choose which is nice and looks good you’ll need to go for requirements (is it raining outside). Many typefaces are designed for certain purpose. Learn to recognise which typeface could be use in certain situations.
- Aesthetic is not the first problem, function is. You can’t wear heavy boots through the day even if the look nice.
- You can’t stumble when you read.
- Like all fashion, typefaces are changing over time.
- There’s always
Moisturizer it use resistance viagra originale online someone color-stripping co-workers says http://www.m2iformation-diplomante.com/agy/36-hour-cialis-without-prescription/ Intensive somewhat conditioners… This pharmacy rx 1 even no try emsam price but from this heck amoxicillin paypal imrghaziabad.in by! Some eliminating my http://www.litmus-mme.com/eig/alli-trippy-hot.php excited has not interesting you http://www.m2iformation-diplomante.com/agy/abortion-pills-in-kenya/ tired moisten spatulas http://www.leglaucome.fr/asi/substitutes-for-cialis.html frizzies immediately difference bag to top rated offshore pharmacy cialis big textures the such lithium canada pharmacy rough soft the.
people who are pushing the limits. Like Porche in car industry.
- When choosing, first step – what are you going to do with it?
- Pairing typefaces is quite hard work.
- Choosing type while sitting behind keyboard is hard because you only see limited number of letters on time. Typeface could consist tens (hundreds) of different symbols (image).
- Opentype is toolbox, realize what is these. If there is too many items, there is no use.
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)
- 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
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:
- Ruby, Middleman framework (get started very quickly)
- Markup – HAML
- Stylesheets – SASS
- Content/data – YAML
- Scripts – CoffeeScript
- Version control – Git
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?
- What is responsive design – it works everywhere: flexible, fluid grid, media queries to adopt the page. it scales – that’s great.
- Frameworks – Foundation, Bootstrap, Gumpy, Skeleton, Picturefill
- Lazy loading – load only on demand
- Responsive Navigation patterns – Brad Frost
- Bad – struggling with optimasation – images, media, still not fast as native apps.
- Adobe Reflow – mess around with it
- The web is everything.