Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Webdesign

Brief description of "Responsive Web Design" also called "Mobile First".
by

Osman Mrzljak

on 8 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Webdesign

First: Site structure
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
Optimize CSS and JavaScript
Tools made it easier
WHY?
Doing business online is continue changing.
HOW
Design "first for mobile" :
site structure
navigation
graphics
forms
and of course text
WHAT?
It is an approach of making your websites more "any device" friendly. So website responses to users device properties.

It is
not
making your web site look exactly the same on any device.

It is
not
; making a website version for every specific device type.
Responsive Web Design
Some statistics
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
http://inflection.com/assets/images/identity_1.svg
http://insights.sererra.com/Portals/107657/images/Website%20Construction.jpeg
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.
sources:
http://www.mobify.com/blog/13-stats-to-convince-your-boss-to-invest-in-mobile-in-2013/
http://www.digitalbuzzblog.com/infographic-2013-mobile-growth-statistics/
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:
larger graphics
extra info
use of different screen resolution
Using CSS 3.0 media queries you can easy define views for different screen types
For large screens
For tablets
And for smartphones
http://webdesignerwall.com/demo/responsive-design/index.html
Foundation
- responsive grid framework http://foundation.zurb.com/
JQuery.com
- easy css querying, and document manipulation
CSS Generator
http://www.designscripting.com/webtools/css3/generator/
Responsive Tester
http://mattkersley.com/responsive/
Build your own icon set http://icomoon.io/app/#/select
Some free fonts
http://www.google.com/fonts/
By Osman Mrzljak
www.osmanmrzljak.com
To much content
To small fonts
Heavy graphics
User have to zoom in and out all the time
Less content
Fluid and minimized graphics
No zoom in / out, but scroll down
large readable font
fits to device screen
Full transcript