Responsive Retrofitting

RESPONSIVE
RETROFITTING
Christopher Schmitt
@teleject
http://E4H.tv

“This is the web
@brad_frost

Cars with their wifi and built-in browsers.

RESPONSIVE CONSIDERATIONS
➤ Different screen sizes from
various devices means our
designs need to scale
➤ Different resolutions of those
screens means our images
need to stay sharp.
➤ Different speeds of internet
(Hotel wiﬁ vs Google Fiber)
means we need to optimize
performance, speed.

RETROFITTING
ALLOWS YOU TO
KEEP THE SAME DESIGN

RETROFITTING
ALLOWS YOU TO
SAVE MONEY

RETROFITTING
ALLOWS YOU TO
SAVE TIME

RETROFITTING
ALLOWS YOU TO PLAN
WHEN TO GO FULL RWD

GO RETROFITTING
➤ Keep the same design
➤ Same UI, happy current
visitors and members
➤ Saves money
➤ Saves time
➤ Plan on full RWD experience
when the time and budget
works for you.
➤ Until then…

LOOKING INTO
WORD
PRESS
FOR RETROFITTING

Find a RWD Theme and switch to it. Or use underscores.me and start
building your own.

WORDPRESS
PLUGINS
IN RETROFITTING

You can either regenerate the thumbnails for all image uploads,
individual image uploads, or specific multiple image uploads.

OPTIMIZING
IMAGES
IN RETROFITTING

72 points-per-inch =
72 pixels-per-inch

72 points-per-inch
x [1+(1/3)]
= 96 PPI

78μm
“RETINA” DISPLAYS
300ppi at 12 inches from the eyes

“[In 2013, Intel sees their product line]
offer a higher resolution experience
than a top-of-the-line 1080p HDTV.”

LOW FILES ARE KEY:
OPTIMIZATION

…BUT IT’S ALL REALLY
FOR BROWSER TO DECIDE.

srcset="rock-climbing-400px.jpg 400w,
rock-climbing-compressed.jpg 600w"

srcset="rock-climbing-400px.jpg 400w,
rock-climbing-compressed.jpg 600w"
sizes="100vw"

SCALABLE VECTOR
GRAPHIC IMAGES

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
xtop: 6px;
xleft: 6px;
left: 50%;
@media
(min-device-width: 768px) and (max-device-
width: 1024px)

@media
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
xtop: 6px;
xleft: 6px;
left: 50%;
display: block;
}

@media
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
xtop: 6px;
xleft: 6px;
left: 50%;
/* Hide table headers (but not display: none;,
for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

@media
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
xtop: 6px;
xleft: 6px;
left: 50%;
td {
border: none;
position: relative;
padding-left: 50%;
}

@media
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-70%, -50%);
width: 50%;
padding-right: 10px;
white-space: nowrap;
}
td:before {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
}

position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Film"; }
td:nth-of-type(2):before { content: "Release Date"; }
td:nth-of-type(3):before { content: "Director"; }
td:nth-of-type(4):before { content: "Screenwriter(s)"; }
td:nth-of-type(5):before { content: "Producer"; }
td:nth-of-type(6):before { content: "Distributor"; }
td:nth-of-type(7):before { content: "Status"; }
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Film"; }
td:nth-of-type(2):before { content: "Release Date"; }
td:nth-of-type(3):before { content: "Director"; }
td:nth-of-type(4):before { content:
“Screenwriter(s)";}
td:nth-of-type(5):before { content: "Producer"; }
td:nth-of-type(6):before { content: "Distributor"; }
td:nth-of-type(7):before { content: "Status"; }
}

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="responsive-tables.css">
<script src="stylesheet" href="responsive-
tables.js"></script>

/* Put the responsive class on the table */
<table class="responsive">
<tr> …

.nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
display: inline-block;
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
text-decoration: none;
color: #444;
}
.nav ul li a:hover {
background-color: #ccc;
}
.anchor-link {
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4;
text-decoration: none; margin: 3px; float: right;
}
.example-footer {
font-size: 1.1em;
.nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
color: #444;
}
}

.nav ul {
display: none;
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
text-align: left;
}
.nav ul li a {
display: block;
padding: 15px 10px;
color: #444;
}
}
.anchor-link {
text-align: center;
padding: 10px 15px;
color: #fff;
margin: 3px;
float: right;
}
.example-footer {
.anchor-link {
text-align: center;
padding: 10px 15px;
color: #fff;
margin: 3px;
float: right;
}

margin: 3px;
float: right;
}
.example-footer {
font-size: 1.1em;
}
#mobile-nav {
display: block;
}
#mobile-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#mobile-nav ul li {
list-style: none;
text-align: center;
}
#mobile-nav ul li a {
display: block;
padding: 20px 10px;
border-bottom: 1px solid #ccc;
}
#mobile-nav ul li a:hover {
color: #fff;
}
@media all and (min-width:48em){
.nav ul { display: block; }
.anchor-link { display: none; }
#mobile-nav { display: none; }
}
@media all and (min-width: 48em){
.nav ul { display: block; }
.anchor-link { display: none; }
#mobile-nav { display: none; }
}

.nav ul li {
}
.nav ul li a {
display: block;
padding: 10px 20px;
color: #444;
}
background-color: #888;
color: #fff;
}
@media (max-width:48.000em){
.example-header .container {
width: 100%;
}
.nav ul {
width: 100%;
font-weight: normal;
}
.nav ul li {
width: 50%;
float: left;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
display: block;
}
}
width: 100%;
}
.nav ul {
width: 100%;
}
.nav ul li {
width: 50%;
float: left;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
display: block;
}
}

.nav {
width: 100%;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
}
.nav ul li a {
display: block;
padding: 10px 20px;
color: #444;
}
color: #fff;
}
width: 100%;
}
.nav ul {
width: 100%;
}
.nav ul li {
width: 50%;
.nav {
width: 100%;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0px;
font-weight: bold;
text-align: center;
}
.nav ul li {
}
.nav ul li a {
display: block;
padding: 10px 20px;
color: #444;
}
color: #fff;
}

$(function () {
$(“.nav>ul").tinyNav();
});

/* styles for desktop */
.tinynav {
display: none
}
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav {
display: block;
margin: 1em auto; }
#nav {
display: none;
}
}

#4
http://codepen.io/teleject/pen/BKzBbd/

.anchor-link {
display: none;
text-align:
right; padding: 0 1em 0;
text-align: center;
padding: 10px 15px;
color: #fff;
background-color: #0084B4; text-decoration:
none; margin: 3px;
float: right;
}
#mobile-nav {
display:none;
}

ul.simple-toggle {
display: none;
}
.anchor-link, #mobile-nav {
display: block;
}
ul.open {
background-color: #F4F4F4;
box-shadow: 2px 2px 3px #444444;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 100%;
width: 70%;
z-index: 500;

$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
http://codepen.io/teleject/pen/ONXLgR

Beyond the web, the internet of things and voice

FIND ME AT
➤ TWITTER @teleject
➤ EMAIL schmitt@christopher.org
➤ WEB http://christopher.org
➤ Hosting virtual Responsive Web Design Summit March 29-31
➤ http://RWDSummit.com/

Responsive Retrofitting

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (16)

Plus de Christopher Schmitt

Plus de Christopher Schmitt (20)

Dernier

Dernier (20)

Responsive Retrofitting