ResponsiveWeb Design

HTML5, CSS3, JavaScript, jQuery, Bootstrap,

September 14, 2014 Disclaimer: this presentation is for educational purposes only, I took almost all images from google therefore use of graphics and other materials are reserved from its respective owner.

Outline

Why responsive design?Internet is a place w/c can be access by anyone (means any device or platform), anytime (24/7) and anywhere (ain’t gonna happen)

Webpages/Websites are the medium that provide information in the Internet

Screen resolution varies depending on devices

Why responsive design?

Why not develop a mobile website and a full website?

Maintenance

Why not develop a mobile website and a full website?

Cost

Storage

Mobile First

We design based on the assumption that whoever is accessing our page he’s using a mobile device

Mobile Last vs Mobile First

HTML5

Links Pages CSS and Scripts

CSS3

Angular.js

YouTube on PS3

www.jobs.cz

Layout

FixedComponents have a fixed width which means the container is made not to move or be resized

Any visitor will experience the same width regardless of their resolution.

FluidComponents width are built using percentage making columns relative to one another

View is adjusted for each user

AdaptiveNot necessarily built on a fluid grid

Can use fixed grid or media queries to target specific device

ResponsiveBuilt in fluid grids

Uses media queries to control designs and content

Grid

Flexible images

img

{

width: 100%;

}

img

{

width: 231px;

}

Media Queries

a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012. And is a cornerstone technology of Responsive web design.

wikipedia

Media query and a viewport

<meta name="viewport" content="width=device-width">

Media query and a viewport

Media Queries

Break points

Breakpoints

Navigation

• HTML5, CSS3, JavaScript, jQuery, Bootstrap,

September 14, 2014 Disclaimer: this presentation is for educational purposes only, use of graphics and other materials are reserved from its respective owner.

Bootstrap

• Bootstrap

• Grid System

• Glyphicons

• Carousel

Bootstrapa sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development

Grid System

Glyphicons

Carousel

WordPress

• HTML5, CSS3, JavaScript, jQuery, Bootstrap,

September 14, 2014 Disclaimer: this presentation is for educational purposes only, use of graphics and other materials are reserved from its respective owner.

WordPress

• Content Management System (CMS) that create and manage (insert, modify, update, delete) contents of a website

• Other alternative technologies: Joomla, Drupal,

Starting XAMPP

Starting XAMPP

WordPress

• WordPress website example

• Setting Up WordPress in your local machine• Other options is to Get Hosting sites and a Domain Name

• Install the theme

• Add pages

• Change the homepage

• Get a Logo

Setup the Database

Select “phpMyAdmin”

Select Databases Tab

Provide the name of the database then name then press create button

You will be prompt once database is successfully created

Proceed to your website via localhost

You will be asked to provide the info of your database

Note: if you have not provide any username or password when you set-up MySql the default is ‘root’ and blank password

Run to install your settings

Provide the Information of your website

Log in to your newly created website

You can now proceed to your dashboard

Embedding Google Map

Making the Map adapt to browser resize

width = “100%”

Adding a Contact Form

Removing Comments Section

Adding Embedded YouTube page

Share > Embed > Copy

Adding/Customizing Menu

Note: Menu won’t change unless you change header menu on Manage Location Tab

Customize Home Page

Customizing Widget

Adding YouTube subscribe button

Adding Facebook like box

Thank You! Have a Nice Day!