to maintain •All links work as expected •Recommended for Google SEO •Less resources necessary •Lean = improved velocity •No more device detection redirects User Experience
/>! </head> Visual viewport (device width) Layout viewport NOTE: The viewport meta tag lets us control the layout viewport and scaling of many devices. with viewport without viewport
! @media screen and (min-width: 600px) {! html {! font: normal 100% Special Elite, Helvetica;! }! }! ! @media screen and (min-width: 860px) {! html {! font: normal 100% Condiment, Helvetica;! }! }! </style>! TIP: With embedded stylesheets all conditional media queries are downloaded but you gain the advantage of only one HTTP request.
CAUTION: External media queries get downloaded even if the media query is not applied. The rationale for this is that if the browser window size is changed, those styles are ready. However, there is a solution to this problem as shown in the next example.
});! </script> TIP: eCSSential, by Scott Jehl (https:/ /github.com/scottjehl/eCSSential), will only download the stylesheet if the media query could evaluate to true
driven breakpoints for a more future-friendly design. TIP: You can also set breakpoints with JavaScript with matchmedia.js https://github.com/paulirish/matchMedia.js/
srcset="small.jpg 1x, medium.jpg 2x"! ! ! src="small.jpg"! ! ! alt="pic" />! ! ! ! ! ! srcset: set of sources with w (width) or x (resolution) descriptors. small.jpg (320 x 240 px) medium.jpg (640 x 480 px) CAUTION: srcset can be defined with w (width) or x (resolution) descriptors but not both. They do not mix. src: fallback img if srcset is not supported. http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
! ! sizes=“100vw"! ! ! src="small.jpg"! ! ! alt=“pic" />! ! Use Case: fluid image Variable Known by browser when it’s loading the page? viewport dimensions yes image size relative to viewport yes via sizes screen density yes source files’ dimensions yes via srcset NOTE: We tell the browser the rendered size of our images and the browser picks the preferred image for it’s container. Very Cool! sizes: can be absolute (px or em), relative to the viewport (vw), or dynamic calc(.333 * 100vw -12em) http://ericportis.com/posts/2014/srcset-sizes/
36em) 33.3vw,! 100vw”! src="small.jpg"! alt="pic" /> Use Case: variable-sized image ! sizes=“[media query] [length], [media query] [length], ! [length]! ! If no media query it is the default size
type="image/png" srcset="logo.png">! ! <img src="logo.gif" alt=“logo" /> ! </picture>! ! If the browser doesn’t find a compatible source type it will fallback to the img Use Case: type-switching
also a great solution for both high-resolution displays and images that scale across screen sizes. However, their only problem is lack of tools and browser support (Android 2-, IE8-): http:/ /caniuse.com/ TIP: SVG offers all the advantages of icon-based vectors and also have the added benefit of supporting multiple colors, gradients, opacity and all kinds of other visual goodness that icon fonts can’t match.
manipulation, and linkability. 34 Dynamically show, hide, and bind data. Sharp at any resolution or size. SVG = Awesome Dynamically simulate a loading indicator.
is between 45 and 70 characters for ideal readability. Elastic layouts as shown above help ensure the ideal line length regardless of the font size or zoom. Elastic layouts adjust based on the size of the browser’s font size.
(ImageOptim, PNG Crush). •Load visible content first or defer everything else. •Minify and merge JavaScript assets. •Prefer sprites or use Data URI for images. •Use CDNs when available. •Avoid geolocation on initial home screen. •Dedicate time for performance testing. •Web storage. •Networks and devices will eventually get faster. Performance tips “86% of sites listed on mediaqueri.es weighed roughly the same when loaded in the smallest window, compared to the largest one. In other words, the m-dot site is still downloading the full website content.” -- Guy Podjarny
Are you connected to a trusted WIFI network? Or are you connected to a malicious StarBuks_FREE_WIFI network? Even if you connect to a site that uses SSL a MiTM may strip the SSL from every request exposing your credentials. The MiTM can forward your HTTP request to their malicious site and capture your credentials.
single HTTP request can compromise your entire SSL site. The attacker now communicates to the victim via HTTP and hijacks your data (SSL stripping). The attacker communicates to the server via HTTPS and strips the SSL before sending the response back to the victim.
a newer security solution that forces the browser to send its initial request to your site as HTTPS. This is the primary defense against SSL Stripping and other MiTM attacks. We can see if your site is using this solution by inspecting HTTP headers (DEMO). Site-wide SSL enforces confidentiality (encryption) and integrity (trusted certificates). The browser will warn you if you are communicating with an untrusted party (DEMO).
mobile (small screen, low bandwidth, etc), then progressively enhances the experience to take advantage of available screen space, features, and more.” Mobile-First Responsive
SiteGround - Reliable hosting with speed, security, and support you can count on.
bbroulik
oikon48
z63d
takasehideki
kinunori
daitak
kozy4324
takasyou
ks91
_shimizu
mocobeta
kworkdev
nekorush14
akashhashmi
jakevdp
geshan
rakko
3n
marcelosomers
skipperchong
jonoalderson
sstephenson
lemiorhan
afnizarnur
frankvandijk
![1 Patterns Slides: bit.ly/rwd-patterns Responsive Web Development @BradBroulik | [email protected]](https://files.speakerdeck.com/presentations/15cbeb809db80131aad02620211842eb/slide_0.jpg){kind=link}
![14 #3 Media Queries ! @media [not|only]? <media_type> [and (<media_feature>:](https://files.speakerdeck.com/presentations/15cbeb809db80131aad02620211842eb/slide_13.jpg){kind=link}
![69 Thank You! @BradBroulik BradBroulik.blogspot.com [email protected] ! ! Slides: bit.ly/rwd-patterns](https://files.speakerdeck.com/presentations/15cbeb809db80131aad02620211842eb/slide_68.jpg){kind=link}