What is Responsive Design?
Recently, everyone wants to have a mobile version of their website. Visits from mobile to websites have increased to 25% in the world and will increase even more in a short time. Website shaped with responsive design; as viewed in high resolution on computers; It will also be displayed legibly and in high resolution on mobile devices and will contribute to your customer satisfaction. When the site is entered from a mobile device, the design changes and turns into a mobile compatible design. Responsive design, which has an important place in terms of SEO, is effective in ranking the website in the first place in search engines. All of our work in Dijital Gen is mobile-friendly with Responsive Design.
Responsive Web Design Editing
In order to prepare a responsive website, the current HTML5, CSS3 coding structure is used, as well as the use of grid design. Ready-made framework systems can be used for mobile-sensitive coding of the design prepared in the grid structure. This framework structure, called Bootstrap, provides convenience to the coder during coding and provides a compatible mobile web view to the visitors. This design information will provide the most efficient performance while creating your website and will lighten your workload and enable you to reach the right result. Responsive design is a very useful alternative for a healthy web design page.
Responsive Design Techniques
If you want to work on a Responsive Website in an easy way, you can work with Boostrap.
You can work with PX as well as Boostrap.
If you are going to use an image in your design, this image should be vectorized. When you work in vector, you will not have a problem with the quality of the picture no matter how much you enlarge or reduce it.
Make Adsense ads mobile friendly.
How is Responsive Design Made?
Let’s start Responsive Design right away in line with the information below.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>How to Make Responsive Design</title>
</head>
<body>
</body>
</html>
Step 2
In the second step, we open an outer carrier div and encode the header part.
<div id=”container”>
<header>
<!–Logo, menu and banner will go here–>
</header>
</div>
We fill in the header part;
<header>
<div class=”logo”>
<img src=”img/logo.png” width=”250″ height=”61″>
</div>
<nav>
<ul>
<li><a href=”#”>Homepage</a></li>
<li><a href=”#”>About me</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
<div id=”banner”>
<img src=”img/banner.jpg” alt=”banner” />
</div>
</header>
CSS Codes for Responsive Design
We can also write our css codes by creating a css page or opening and closing a <style></style> tag between the <head></head> tags inside the current page.
/* reset
——————————————————— */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
Dijital Gen and Mobile Compatibility
Dijital Gen prepares, presents and develops all its works as mobile compatible. It has become the symbol of uninterrupted and continuity in every moment of our mobile life. Studies that are not mobile-friendly have had to lose their use day by day. Companies have had to look for mobile-friendly applications, programs or applications that are not mobile-friendly. Dijital Gen and his team continue to work as a solution partner in this regard.
