Responsive web design
Aug 17, 2014
Here's the slides for a presentation I gave on responsive web design in November 2011.
Responsive web design is a very powerful idea: it makes your website look great and usable on desktop computers and all mobile devices. In this presentation I talk about why responsive web design is here to stay. But I also highlight problems that come with it, along with possible solutions.
Responsive web design is a very powerful idea: it makes your website look great and usable on desktop computers and all mobile devices. In this presentation I talk about why responsive web design is here to stay. But I also highlight problems that come with it, along with possible solutions.
- RESPONSIVE WEBDESIGN FRONTEERS / MECHELEN / NOV 2011 These slides are the blueprint of a presentation I did at Fronteers recently.I tried to make them understandable to people that didnt attend the presentation by including these dull looking quick notes.
- THOMAS MOM CALLED ME BYTTEBIER IS HOW MY
- my brother is the cute one
- as a kid, I wanted to be Maradona
- picture says it all
- NOW I WORK AS A FREELANCEWEBDESIGNER FOCUS ON DESIGN
- I realize that looks like quite a fail to the public, but I enjoy doing it
- I tweet about all things design and web, follow me @bytte
- my old-school website is at thomasbyttebier.com
- RESPONSIVE WEBDESIGNPROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES heres what I talked about and what these slides are about
- heres a responsive website I made in 2010: sleepstreet.be
- this one I did early 2011
- I went to Build a few weeks ago
- with a few Belgian freelancers photo by Jelle Desramaults
- I was lucky to see Wilson Miner speak at Build
- if you dont know Wilson Miner: he designed this pretty famous website
- he talked about how few products had such in impact in our lives as the car in the 20th century
- it even drastically changed our environment
- at the end of the 20th century the pc was another product that dramatically changed our lives
- heres an office anno 1962
- that one is replaced by a hard drive
- that one is in the cloud now
- type writers are now called Microsoft Word
- and sadly shes replaced by a computer as well
- leaving only this boring mofo
- mobile is having a huge impact in our lives right now
- everywhere
- everyone
- this dude even sleeps with his phone
- there will be 7 billion connected phones in about 3 months from now
- SEVENBILLION FUCKING
- last year I went to Indonesia
- poor but beautiful country
- one of the Indonesian sulfur miners that risk their lives every day just to eek out a living
- heres the Ijen Crater full of poisonous smoke, see the sulfur down there?
- this guy goes up and down the crater a few times a day carrying many kilos of sulfur on his shoulders
- heres a few more sulfur miners, they likely wont live long as their lungs are poisened with sulfur
- even these really poor people carry a phone, they get to know the internet through cheap mobile devices
- the question is: how can we deliver a great experience to these 7 billion people?
- rst thought: we need an app! hipness!
- oh and one for Android too!
- and Windows phones
- and lets not discriminate the Blackberry people
- hard + expensive to maintain, and frankly kind of silly to have an app mirroring your website
- second thought: lets make a mobile version of our website, itll work on all devices!
- some good thinking there, but its still two versions...
- 90% of all websites are too simpleto justify the time and money ittakes to develop a separate mobileversion. COMMON SENSE THINKER its hard to argue with that
- one guy sat down and thought really hard
- he wrote this article on A List Apart about responsive webdesign (Ethan Marcotte)
- awesome idea: one website that adapts, looks and works great on all devices!
- HTMLSTRUCTURE CSSLAYOUT based on simple principles we all know and stand behind
- simple, but great results emerged from it simple, but end products are great
- meacuppa.be by chilli.be
- antarcticstation.org by jrme coup
- jobat.be, not sure who made this
- lalemant.com by gorilla-webdesign.com
- handelsbeurs.be by netlash.be
- wolfslittlestore.be, freelance web designer
- trentwalton.com
- thisismadebyhand.com by Mandy Brown & Candi Ligutan
- Ethan Marcotte, Scott Jehl ea. a new trend setter: bostonglobe.com by Ethan Marcotte, Scott Jehl and others
- this is charles darwin
- It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change. CHARLES DARWINwe all agree that the best design is to be found in nature and nature is full of responsive design
- everyone knows this animal and how it responds to mood changes
- this little spider turns yellow when its on yellow owers...
- ...and white when its on white owersinvisible to predators and insects
- Source: webecoist.comthis octopus scares predators by mimicking the color and shape of its predators predators
- responsive design may be hip at the moment, its based on a proven design principle and its here to stay
- HOWCOMPONENTS IT WORKS 2
- %1fully based on uid web design
- which is logical: this way it kind of automatically ts all screens
- dont get me started on uid web design
- its so nineties and is ugly from a certain viewport size onwards
- CSS MEDIA QUERIES 2meet css media queries
- nothing new: we all have used this media query for ages
- @media (min-width:400px) { } this ones different: as soon as
Related Documents See more >
