- How to Embed Iframes to HTML
- Posted on October 1, 2019 | Comments This is a n approach to embed iframes to your HTML using PHP
the Blog
What is Responsive Web Design?
Posted on May 23, 2012 by Michael Rosario | Comments
Responsive web design is a new approach in which a site would appear flexible aka "responsive" as it automatically adjusts to your screen size, browser platform, and/or screen resolution. Before responsive design/development, we had something close — the ability to serve targeted CSS stylesheets for mobile, screen, and print - three separate stylesheets!
Remember these?
<link rel="stylesheet" type="text/css" href="reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Responsive websites show the same content - but rearranged to maximize the use of the space allowed by your browser or screen using media queries. See example below, let's say – iphone screen, ipad screen, and LCD screen:
/* CSS for all browser goes here */
@media only screen and (max-width: 900px) {
/* CSS for browser screen with 900px and below goes here */
}
@media only screen and (max-width: 600px) {
/* CSS for browser screen with 600px and below goes here */
}
For more information here are a few helpful resources:
- Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design
- HTML5 - Responsive Web Design
- What The Heck Is Responsive Web Design?
Books to Read:
- A Book Apart: Responsive Web Design by Ethan Marcotte
- Responsive Web Design with HTML5 and CSS3 by Ben Frain
Cool Frameworks/Boilerplates:
comments powered by Disqus
Other Recent Blog
- Choosing the Perfect Group Members in Coding Bootcamp
- Posted on June 5, 2019 | Comments We were tasked to create our own group and pick our own members in the coding bootcamp. This is proving to be the most challenging tasks.
- How to Post 3D Photos on Facebook
- Posted on November 2, 2018 | Comments Facebook's latest feature allows you to add 3D photos that has a "parallax" effect.
- What do I need to be a Web Developer?
- Posted on November 8, 2017 | Comments I was asked recently asked by a college student what he needs to be a "Web Developer." If I were to sum it into one blog entry, it would be a mix of the tools I use, best-practices and the coding languages that I know. It's never to late to learn how to code and learn new tools. Once you have an idea on the basics - it's never too far to learn another. Every single thing online has documentation, youtube videos, and wikis readily available. There are a lot of tools out there and a lot of developers willing to share their two cents on forums and social media.