{"id":2751,"date":"2013-06-03T19:38:54","date_gmt":"2013-06-03T23:38:54","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/03\/introduction-creating-a-responsive-web-design\/"},"modified":"2022-03-11T11:43:59","modified_gmt":"2022-03-11T16:43:59","slug":"introduction-creating-a-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/introduction-creating-a-responsive-web-design\/","title":{"rendered":"Introduction to Creating a Responsive Web Design"},"content":{"rendered":"

You can create your own Responsive Web Design (RWD)<\/em><\/a> using HTML and CSS. Before we get started, we will need to get an idea of what we need to do to create the Responsive Template. First we need to understand CSS Media Types<\/a>. Then you will need to have an idea of what mobile devices display sizes<\/a> are, then you can follow the steps to create your own Responsive Web Design<\/a> site.<\/p>\n

\u00a0<\/a><\/p>\n

CSS Media Types<\/h2>\n

A CSS Media type<\/strong> is a CSS rule that allows the website to detect the type of media (For Example, browser size, screen resolution) and display specific CSS code accordingly. There are many different device types that can access the web. Below is a table of the possible device types. We will only be working with the “screen<\/em>” CSS Media type. The other types are for coding your site for Access ability.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSS Type<\/th>\nCSS Type Description<\/th>\n<\/tr>\n
all<\/td>\n Detects all device media types<\/td>\n<\/tr>\n
aural<\/td>\n Detects speech and sound devices for Accessibility<\/td>\n<\/tr>\n
braille<\/td>\n Detects braille tactile feedback devices for Accessibility<\/td>\n<\/tr>\n
embossed<\/td>\n Detects paged braille printers for Accessibility<\/td>\n<\/tr>\n
handheld<\/td>\n Detects devices that are handheld <\/td>\n<\/tr>\n
print<\/td>\n Detects if its a printer<\/td>\n<\/tr>\n
projection<\/td>\n Detects projected slide presentations<\/td>\n<\/tr>\n
screen<\/strong><\/td>\n Detects computer screens<\/strong><\/td>\n<\/tr>\n
tty<\/td>\n Detects fixed-pitch character grids found in terminals<\/td>\n<\/tr>\n
tv<\/td>\n Detects if the device is a television<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0<\/a><\/p>\n

Common Display Resolutions for Devices<\/h2>\n

Before you create your website, you will want to get an idea of what size your site should be on any given device. Below are lists of popular, mobile Phone, Tablet, and Desktop computer display sizes.<\/p>\n

Common Mobile phone sizes.<\/h3>\n

There are countless mobile devices with different sizes for a display. The following are a few popular devices size and resolution to give you an idea of what size you will want to make your website.<\/p>\n