Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
Transcript of Responsive Webdesign
Define building blocks using a grid
Last: Fluid and Flexible
Scale images down to appropriate size
Consider making different images for different views
Chose cool font and bigger font-size.
(less is more) Use less text as possible
Tools made it easier
Doing business online is continue changing.
Design "first for mobile" :
and of course text
It is an approach of making your websites more "any device" friendly. So website responses to users device properties.
making your web site look exactly the same on any device.
; making a website version for every specific device type.
Responsive Web Design
91% of all people on earth have a mobile phone
About mobile device
high pixel destiny - small screen size
lower network speed
smaller browser cache
(multi) touch input
position aware (GPS) / localization features
One user device
is responsive design
With web 2.0 the internet is changed to social network.
From the year 2010 web gets a mobile dimension (on the way, everywhere and anytime)
You have been warned: Statistics are always out of the date.
50% of mobile phone users, use mobile as their primary Internet source
72% of tablet owners purchase online from their tablets each week
Over 1.2 billion people access the web from their mobile devices.
Mobile-based searches make up one quarter of all searches.
Simple Test Case
Go to your site and switch Analytics on.
Post on facebook (or linkedin) "Check my new website"
And check results in analytics
make your website "responsive"
Add support for desktop:
use of different screen resolution
Using CSS 3.0 media queries you can easy define views for different screen types
For large screens
And for smartphones
- responsive grid framework http://foundation.zurb.com/
- easy css querying, and document manipulation
Build your own icon set http://icomoon.io/app/#/select
Some free fonts
By Osman Mrzljak
To much content
To small fonts
User have to zoom in and out all the time
Fluid and minimized graphics
No zoom in / out, but scroll down
large readable font
fits to device screen