Responsive Web Design Tools
Free Editors
Recommended Source Codes
Use
css.reset stylesheet
Download Jquery library
Responive
Slides
Add the following code to the top of your stylesheet to set styles
for different screens:
@media only screen and(min-width:240px) and (max-width:568px)
{.element{
/* Styles go here */
}
}
To display the pixel size of your website on the top of the screen during development insert the
following javacode into your header and body tag: <script
type="text/javascript">
var show_width = 1;
if(show_width == 1){
$(document).ready(function(){
$(window).resize(function(){
var browser_size = $(window).width();
document.getElementById('browser_size').innerHTML = 'Window Width: '
+browser_size.toString();
});
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="browser_size"></div>
...continue with your code here...
Mediaqueries for the different screen sizes in your stylesheet
/* Start Media Queries */
/* iPads and Small Laptops */
@media only screen and (min-width: 768px) and (max-width: 1100px){
changed styles go here...
}
The iPad Design width can be tested nicely with the
ipad-emulator.com
/* Smartphones and small tablets */
@media only screen and (min-width: 240px) and (max-width: 767px){
changed styles go here...
}
Recommended Servers
XAMPP from Apache.org
Browser tools to test your responsive web design
Responsive Tables
Responsive Design Tool
Test your
site with Matt Kersley
Frameworks
Twitter Bootstrap
Foundation
HTML5 Boiler Plate
Skeleton
Gumby
Responsive Website tester for google (a Chrome plugin)
