Best Cheap ASP.NET Hosting | Since smart new gadgets such as tablets, smartphones and phablets with advanced operating systems like Android, iOS, Windows Mobile appeared on the worldwide market, web designers and web programmers came with a new type of design for website because these new gadgets have different sizes of displays so a website cannot be 100% compatible with different resolutions. This new design is called responsive web design and contains HTML also CSS code that improves the functionality and especially the design of a website for any type of device. A responsive web design has so many advantages, one of the benefit is responsive web design can affect your SEO ranking. So, in this article, we will share to you some tips to make a responsive web design.
How To Make A Responsive Web Design
Tips 1 – Test Your Website
You can test if your website is Responsive Web Design using Matt Kersley’s tool, where you can see how your website looks for gadgets that have the following width 240, 320, 480, 768 and 1024. Another very good online responsive test is ResponsiveTest.net that lets you do test any resolutions not only the default ones and you also have the possibility to rotate or to test for a specific website such as different versions of smartphones.
Tips 2 – Write a Code For Different Screen Resolutions
For each type of mobile gadget you can write at least one line of CSS code to improve website’s design so usually, you start the CSS code for RWD writing the resolution in pixels like in this example:
Portrait Tablet
1 | @media (min-width: 481px) and (max-width: 768px) |
Landscape smart phone
1 | @media (min-width: 321px) and (max-width: 480px) |
Portrait smart phone
1 | @media (max-width: 320px) |
Enter this code depending on each object under the line of the CSS code on your website. Normally you need to reposition and shrink objects from your website in a manner that they don’t overlap so people from small smartphones or bigger ones can see your content in a proper way, but sometimes you may want to change the color or the entire design of an element for different browsers or devices, like this:
1 2 | #banner {margin-left:auto; margin-right:auto; width:1000px; } .widget-text {padding:10px; background-color:#FCFCFC; } |
Tips 3 – Use A Framework To Make Your Website Responsive
If you need a quick solution for a responsive web site or if you don’t have the proper knowledge to create the responsive CSS code you can always try one or more available free responsive frameworks such as:
Twitter Bootstrap
Twitter Bootstrap was created especially to have a great look and also to behave properly in the latest smartphones, tablets, laptops and desktop browsers and other programs that navigate through the internet. You can download either the source code, either the compiled version and unzip it and upload it to your FTP root directory.
Semantic UI
With Semantic UI, you can design quickly beautiful websites because it is friendly, it has concise HTML, intuitive Javascript, simplified debugging, more than 3000 themes, 50 UI components, and 5k commits and it partners with most popular libraries such as JQuery. To use Semantic UI, you need to download the zip archive, unzip it and upload it to your FTP or you can directly install it using the NPM package.
Foundation 6
Foundation 6 is flexible, 100% customizable, readable, semantic and constantly updated including HTML templates, resources, code snippets and so on. You can use Foundation to create sites in HTML, CSS, and JavaScript, to create emails using HTML or apps using Angular and Flexbox.
Pure
Pure is a not so popular framework created by Yahoo in 2013 but still it has a very beautiful design and a 10k stars popularity on GitHub. Its advantage is a small size and also being responsive so the base is 1.1 KB, the grids are 0.8 KB, forms are 1.5 KB, buttons are 0.8 KB, tables 0.5 KB and the menus are 0.8 KB having a total of just 4.0 KB, but the non-responsive version has even less 3.8 KB. You can create responsive layouts in different colors such as black, purple, orange, blue, green, gray, yellow, red or indigo. You can use Pure by downloading it or checking out Yahoo’s free CDN and using an HTML code.
UIkit
UIkit has autocomplete functions for IDE’s such as Sublime, PHPstorm or Atom, helping more advanced programmers to create a theme, a style, a layout or a project. You can use UIkit to create different layouts using grids, panels, blocks, articles, comments, utilities, flexes, covers; various navigations using navs, navbar, subnav, breadcrumbs, paginations, tabs, thumbnavs; a lot of elements with lists, descriptions, tables, forms or common things such as buttons, icons, badges, alerts, thumbnails, overlays, columns, texts, animations, contrasts. With its JavaScript, you can use Dropdown, Modal, Off-canvas, Switcher, Toggle, Scrollspy, and Smooth scroll.