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

WordPress Responsive Design Bootcamp

No description
by

Sonja Leix

on 27 April 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of WordPress Responsive Design Bootcamp

And why is the future of web design
What is Responsive Design?
RESPONSIVE?
Ethan Marcotte
He coined the term “Responsive Design” in 2010 in his article on A List Apart.
Because we don't want to and can't create separate sites for each new device.
Who is...
So what is Responsive Design?
Flexible, device-independent design for the web.
vs.
FLEXIBLE GRID
CSS3
with Flexible Images
&
MEDIA
QUERIES
The Elements of
Responsive Design

Responsive Websites adapt to mobile, desktop and tablet screensizes
or Fluid Grid
Desktop / Laptop
Tablets
Mobile
Flexible Designs adapt to device and browser sizes.
The Flexible Grid
It’s all about
understanding the
ratio-based
relationships between
element and container
THE MAGICAL FORMULA:
target ÷ context = result
Example:
ratio-based relationship between target and context is 0.6 to 1, which means the target's width is 60% of the context's width.
Flexible EVERYTHING
body {
font-size: 100%;
/* ~ 16px */
}

target ÷ context = result

h1 {
font-size: 2.25em;
/* 36px / 16px */
}
Flexible
Fonts
almost
Flexible Images & Media
img,
video,
object,
iframe {
max-width: 100%;
height: auto;
}
Mobile
Tablet portrait
Laptop / Tablet landscape
Desktop
The Power of
CSS3
Media Queries
iPad (portrait)
@media screen and (min-width: 480px) and (max-width: 768px)
media type
first query
device feature
second query
Example Media Query for:
Thank You!

Twitter: @sonjaleix
Sonja Leix
ROUTINE #1:
Making the Grid
FLEXIBLE
Adding some
Media Queries
@
ROUTINE #2:
60%
100%
Full transcript