art leokadia Art Leokadia email artist leokadia art leokadia sitemap

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)

/* 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){
var browser_size = $(window).width();
document.getElementById('browser_size').innerHTML = 'Window Width: ' +browser_size.toString();
<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


/* Smartphones and small tablets */
@media only screen and (min-width: 240px) and (max-width: 767px){

changed styles go here...


Recommended Servers

XAMPP from

Browser tools to test your responsive web design

Responsive Tables

Responsive Design Tool

Test your site with Matt Kersley


Twitter Bootstrap


HTML5 Boiler Plate



Responsive Website tester for google (a Chrome plugin)