rwd - bootstrap

Post on 30-Jun-2015

347 Views

Category:

Design

6 Downloads

Preview:

Click to see full reader

DESCRIPTION

Responsive Web Development with bootstrap

TRANSCRIPT

Responsive Website Design Process

WHYWHATHOW

Agenda

The total number of people using the web on mobile devices is set to surpass desktops by 2015.

The future ofMobile Webin 2015

- International Data Corporation (IDC)

WHY

Separate Mobile Sites

WHY

Mobile Apps

WHY

Rather than tailoringDisconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.

- Ethan Marcotte

WHY

Responsive Website Design

WHY

What is RESPONSIVE WEB DESIGN?

Fixed width pixel designs were all the rage.Desktop screens are getting largerMobile users are visiting our sitesUser accessing web from everywhere

WHAT

RESPONSIVE WEB DESIGN EXAMPLEWHAT

http://www.hicksdesign.co.uk/

• A flexible grid based layout

• Flexible images and media

• Media Queries

What does it takes to create a Responsive Design?WHAT

WHAT

WHAT Flexible Grids

Flexible images and MediaWHAT

Media QueriesWHAT

Responsive UI Framework WHAT

In the world of web design, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.

The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.

Popular 5 Responsive UI Framework WHAT

• Bootstrap• Foundation• Skeleton•Unsemantic•Gumby

WHAT

An open source UI Framework

HTMLCSSJS

About Bootstrap

WHATFacts about BOOTSTRAP

- Bootstrap was released in by Twitter developers 2 year back.

- Their idea was to develop a frontend UI framework to encourage consistency across the platform and speed up the development of new websites.

- Bootstrap is now widely accepted in the market.

- Recently they have launched 3.0 version.Mark Jacob

Twitter Developer

}

WHATWho are using BOOTSTRAP?

- Joomla 3.0

- Slideshare

- Toyota.com

-Appster

WHATResponsive/Bootstrap Examples

http://wrapbootstrap.com/preview/WB0412697

http://wrapbootstrap.com/preview/WB0L500N4

http://wrapbootstrap.com/preview/WB0F7FH2P

Inspiration

http://netfruits.com/2013/02/websites-built-with-bootstrap/

WHATWhy everyone is loving BOOTSTRAP?

- Support HTML5 & CSS3.- Supported by all major browsers.- Fluid Grid System - Bootstrap use 12 columns grid system.

- Many starter templates available - (pre-defined styles for typography, tables, buttons, navigation, breadcrumbs, forms elements, etc.)

- Inbuilt jQuery plug-in to add interactivity to websites ( to create modals popup ,tooltips, carousals)

- Responsiveness (RWD) – A big plus

WHATPackage Deal – Customize it before you download.

WHATPackage Deal – Customize it before you download.

Scaffolding: Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS: Styles for common HTML elements like typography, code, tables, forms, buttons & plus includes Glyphicons, icon set.

Components: Basic styles for common interface components like tabs, navbar, alerts, page headers, and more.

Javascript plugins: Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

WHATPackage Deal – Customize it before you download.

WHAT

Bootstrap Website Walkthrough

http://getbootstrap.com/2.3.2/

- Is free! Saves you time & money. Implementation is easy.

- Gives you free CSS styles and inbuilt Jqueries.

- Best is you can make a responsive website for all devices.

- Being open sourced, you will get great help from online forums.

Summary

WHYWHATHOW

Agenda

Folder StructureMockup DesignSelecting a TemplateApplying StyleManipulate templateTesting tools for different Devices

HowFolder Structure

CSSbootstrap.css bootstrap.min.css

JSbootstrap.js bootstrap.min.js

Fontsglyphicons-halflings-regular.eotglyphicons-halflings-regular.svg

HowMockup Design - Desktop

HowMockup Design

1170

HowMockup Design - iPad

HowMockup Design - iPad

HowMockup Design - iPhone

HowSelecting a Template

HowTesting tools for different Devices

http://lab.maltewassermann.com/viewport-resizer/

Device simulator

Grid Display

http://alefeuvre.github.io/foundation-grid-displayer/

top related