Responsywny szablon (responsive html template)

Demo:

Responsive tutorial

Strony responsywne na każej rozdzielczości, na każdym urządzeniu wyglądają bardzo dobrze. Obszar roboczy dostosowuje się do przekątnej okna urządzenia, z którego aktualnie przeglądamy witrynę.

Responsive Design

Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.

CSS Tutorial

Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.

Skrypty na stronę

Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.

jQuery pomoc

Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.

Responsywne tworzenie stron internetowych jest obecnie standardem. Kto nie ma strony dostosowanej do różnych rozdzielczości ten ma problem. Po pierwsze Google źle widzi takie trony, a po drugie co ważniejsze użytkownik przeglądający taką stronę na np. smartfonie zaraz z niej wyjdzie bo nie będzie mu się ładnie skalować i komfort przeglądania będzie tragiczny. Dlatego warto budować nowe strony, oraz przebudowywać je w oparciu o zasady responsive web design.
Można budować strony w oparciu o gotowe komponenty przygotowane własnie pod responsywne strony, takie jak chociażby Bootstrap, czy UI Kit.
Są to bardzo dobrze przygotowane narzędzia do takiej pracy, jednak zdarza się, że i one mogą sprawić nie jedne problem. Skrypty te mają bardzo rozbudowane struktury css i chcąc coś zmienić trzeba się czasami nieźle główkować aby do tego dojść gdzie to jest zamieszczone i jak to zmienić. Dlatego w przypadku, gdy nasza strona będzie wymagać duże ingerencji programisty, lu, gdy strona zbudowana jest z kilku statycznych elementów i podstron warto stworzyć własny szablon oraz własne style css.
Poniżej przedstawiam bardzo prosty sposób tworzenia własnej struktury responsywnego stylu css.

Struktura strony

Struktura strony jest w tym przypadku bardzo ważna. Zazwyczaj kod HTML nie jest tak istotny, jednak w tym przypadku należy zwrócić szczególną uwagę. Budujemy o nowe znaczniki z HTML5: (nav, header, section, footer).
Do prawidłowego skalowania się strony należy w znaczniku head dodać linię z kodem:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Z kolei układ naszej trony w prostym przykładzie wygląda następująco:

<header class="ewd_rd">
		<nav class="clearfix" id="ewd_rd">
			<ul class="ewd_rd">
				<li>
					<a href="#">
					<i class="fa fa-user"></i>
					home
					</a>
				</li>
				<li>
					<a href="#">
					<i class="fa fa-eye"></i>
					About
					</a>
				</li>
				<li>
					<a href="#">
					<i class="fa fa-area-chart"></i>
					Gallery
					</a>
				</li>
				<li>
					<a href="#">
					<i class="fa fa-sun-o"></i>
					Portfolio
					</a>
				</li>
				<li>
					<a href="#">
					<i class="fa fa-envelope"></i>
					Contact
					</a>
				</li>
			</ul>
		</nav>
	</header>
	<section class="ewd_rd">
		<header class="ewd_major">
			<h2>Major section</h2>
			<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
		</header>
	</section>
	<section class="ewd_rd content text">
		<div class="ewd_rd-1-2">
			<span class="ewd_rd-green">
				<i class="fa fa-coffee fa-2x"></i>
			</span>
			<h2>Responsive Design</h2>			
			<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
		</div>
		<div class="ewd_rd-1-2">
			<span class="ewd_rd-blue">
				<i class="fa fa-star fa-2x"></i>				
			</span>
			<h2>CSS Tutorial</h2>
			<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
		</div>
	</section>

	<section class="ewd_rd content image">
		<div class="ewd_rd-1-2">
			<span class="ewd_rd-image1">
			</span>
			<h2>Skrypty na stronę</h2>			
			<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
		</div>
		<div class="ewd_rd-1-2">
			<span class="ewd_rd-image2">			
			</span>
			<h2>jQuery pomoc</h2>
			<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
		</div>
	</section>
	
	<footer class="ewd_rd">
		<p>Copyright &copy; 2014 <a href="http://ewebdesign.pl">eWebDesign</a></p>
	</footer>

Responsywne arkusze stylów css

W przypadku skalowalnych stron najważniejsze są własnie style css. To w nich zawiera się cały układ strony – jej widoczność zarówno na dużych monitorach jak i smartfonach.

header.ewd_rd
{
	width:100%;
	min-height:80px;
	border-bottom:#444 2px solid;
	margin-bottom:10px;
}
#ewd_rd
{
	display:block;
	margin:0 auto;

}
ul.ewd_rd li
{
	list-style:none;
	float:left;
	margin-right:30px;
}
ul.ewd_rd li a
{
	color:#ddd;
	text-transform:uppercase;
	text-decoration:none;
	transition: all .5s ease-in-out;
}
ul.ewd_rd li a:hover
{
	color:#fce600
}
section.ewd_rd
{
	width:80%;
	margin:0 auto;
}
header.ewd_major
{
	width:100%;
	background-image:url("header-image2.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	min-height:250px;
	text-align:center;
	padding-top:40px;
	border-radius:0 0 10px 10px;
}
header.ewd_major h2
{
	color:#fff;
	font-size:35px;
	font-style:lighter;
}
header.ewd_major p
{
	color:#fff;
	font-size:18px;
	line-height:19px;
}
.ewd_rd-1-2
{
	width:45%;
	float:left;
	text-align:center;
	padding:20px 0;
	margin-right:3%;
	min-height:250px;
	border-bottom:1px solid #444;
}
.ewd_rd-1-2:last-child
{
	margin:0;
}
section.content:after
{
	clear:both;
	content:'';
	display:block;
}
 section.content h2
 {
	font-size:25px;
	color:#fff;
 }
  section.content p
  {
	color:#bbb;
	font-size:15px;
	line-height:18px;
	padding:0 20px;
  }
section.content.text span
{
	width:80px;
	height:80px;
	display:inline-block;
	border-radius:50%;
	text-align:center;
	line-height:30px;
	margin-bottom:30px;
}
section.content.image span
{
	width:100%;
	height:150px;
	background-size:cover;
	background-repeat:no-repeat;
	display:block;
}
section.content.text span:hover i
{
	color:#fce600
}
section.content span i
{
	color:#fff;
	line-height:77px;
}
.ewd_rd-green
{
	background:#B24A7D;
}
.ewd_rd-blue
{
	background:#76BCFF ;
}
.ewd_rd-image1
{
background-image:url("image1.jpg");
border-radius: 0 0 10px 10px;
}
.ewd_rd-image2
{
background-image:url("image2.jpg");
border-radius: 0 0 10px 10px;
}
footer.ewd_rd
{
	border-top:2px solid #444;
	text-align:center;
	width:100%;
	min-height:40px;
	color:#bbb;
	margin-top:30px;
}
.ewd_rd i.fa
{
	display: inline-block;
	font-family:FontAwesome;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 665px) 
{
	.ewd_rd-1-2
	{
		width:100%;
		
	}
	ul.ewd_rd li a span
	{
		display:none;
	}
	header.ewd_major h2
	{
			font-size:22px;
	}
	header.ewd_major p
	{
		font-size:15px;
		line-height:16px;
	}
}

Aby strona się ładnie skalowała i dopasowywała do każdego okna należy odpowiednio połączyć klasy ze znaczników HTML. A więc widok Grida musi mieć odpowiednie klasy i odpowiednią konstrukcję w stylach css.
Moje elementy, które się odpowiednio zachowują posiadają klasę ewd_rd-1-2. Ponad nimi jest sekcja section. Układ ten jest bardzo ważny i musi posiadać właściwe style. Dla sekcji muszą znajdować się takie pozycje jak:

section.content:after
{
	clear:both;
	content:'';
	display:block;
}

Natomiast dla klasy obowiązkowe są:

width:45%;
float:left;

Oczywiście można do tych elementów dopisać inne potrzebne nam do sformatowania. Ale te pozycję muszą bezwzględnie być napisane.
Innym równie bardzo ważnym elementem w stylach jest komenda:
@media screen and (max-width: 665px).
Znaczy to nie mniej nie więcej, jak obszar stylów dla których obszar okna jest nie większy niż 665px. A więc tutaj wpisujemy te same klasy co wyżej tylko dla rozdzielczości mniejszej niż 665px.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code