<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>RumahPixel.com &#124; Jasa Pembuatan Website &#187; web</title>
	<atom:link href="https://www.rumahpixel.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.rumahpixel.com</link>
	<description>Website Development &#38; Design Solution</description>
	<lastBuildDate>Fri, 25 Aug 2023 07:27:28 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.2</generator>
		<item>
		<title>HTTP Diperbarui Setelah 16 Tahun, Internet Bakal Kencang</title>
		<link>https://www.rumahpixel.com/2015/02/http-diperbarui-setelah-16-tahun-internet-bakal-kencang/</link>
		<comments>https://www.rumahpixel.com/2015/02/http-diperbarui-setelah-16-tahun-internet-bakal-kencang/#comments</comments>
		<pubDate>Sun, 22 Feb 2015 17:03:15 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[History]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[http]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[www]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=696</guid>
		<description><![CDATA[Standar protokol HTTP (Hypertext Transfer Protocol) baru, yaitu HTTP/2, telah selesai difinalisasi. Standar baru tersebut kini memasuki proses editorial sebelum dirilis sebagai standar yang baru. Seperti dikutip KompasTekno dari The Next Web, Rabu (18/2/2015), konfirmasi finalisasi standar HTTP yang baru itu didapat dari postingan blog milik Mark Nottingham, anggota dari IETF HTTP Working Group yang [...]]]></description>
				<content:encoded><![CDATA[<p>Standar protokol HTTP (Hypertext Transfer Protocol) baru, yaitu HTTP/2, telah selesai difinalisasi. Standar baru tersebut kini memasuki proses editorial sebelum dirilis sebagai standar yang baru.</p>
<p>Seperti dikutip KompasTekno dari The Next Web, Rabu (18/2/2015), konfirmasi finalisasi standar HTTP yang baru itu didapat dari postingan blog milik Mark Nottingham, anggota dari IETF HTTP Working Group yang mengerjakan protokol HTTP baru untuk world wide web.</p>
<p>Menurut postingan dari Nottingham, IESG (The Internet Engineering Steering Group) selaku lembaga yang bertanggungjwab atas manajemen teknis aktivitas UETF dan proses standarisasi Internet, telah menyetujui spesifikasi HTTP/2.</p>
<p>Spesifikasi yang ditetapkan itu saat ini sudah diajukan ke RFC (request For Comment) Editor untuk melalui proses editorial sebelum akhirnya nanti dipublikasina sebagai standar HTTP yang baru.</p>
<p>Perubahan standar HTTP/2 adalah langkah yang besar untuk internet dunia, mengingat standar HTTP 1.1 yang luas digunakan sejak 1999 (atau 16 tahun yang lalu), belum pernah direvisi.</p>
<p>Standar baru tersebut membawa perbaikan kepada inti dari teknologi web, seperti waktu load yang lebih cepat, koneksi yang bertahan lebih lama, item yang bisa dikirim lebih cepat, dan server push.</p>
<p>Walau demikian, HTTP/2 tetap mengusung API yang sama yang telah dikenal oleh para pengembang, dengan bebrapa fitur baru yang bisa diadopsi.</p>
<p>Salah satu perubahan yang dijanjikan dalam HTTP/2 adalah fitur multiplexing yang memungkinkan banyak request dalam satu web yang bisa dikirimkan dalam waktu yang sama, sehingga halaman bisa dibuka dengan lebih cepat.</p>
<p>Standar HTTP/2 baru itu dikembangkan berdasar protokol SPDY (dibaca: Speedy) yang dikembangkan oleh Google. Teknologi itu kini sudah dipakai untuk menangani lalu-lintas web dengan meningkatkan latensi dan keamanan.</p>
<p>Sumber: The Next Web dan Kompas.com</p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2015/02/http-diperbarui-setelah-16-tahun-internet-bakal-kencang/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Petinggi Google: Internet akan lenyap!</title>
		<link>https://www.rumahpixel.com/2015/01/petinggi-google-internet-akan-lenyap/</link>
		<comments>https://www.rumahpixel.com/2015/01/petinggi-google-internet-akan-lenyap/#comments</comments>
		<pubDate>Mon, 26 Jan 2015 07:12:23 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[Gadget]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[laptop]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Smartphone]]></category>
		<category><![CDATA[teknologi]]></category>
		<category><![CDATA[virtual]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=651</guid>
		<description><![CDATA[Eric Schmidt, Executive Chairman dari Google yang kontroversial itu menggemparkan acara pertemuan pemimpin dunia di forum ekonomi global di Davos, Swiss. Dalam pidatonya, Schmidt mengatakan bila internet segera hilang. Meskipun mengatakan hal itu, Schmidt tidak benar-benar menyiratkan bila manusia tidak akan bisa menggunakan internet di masa depan, tetapi justru sebaliknya. Manusia bisa menemukan internet di [...]]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/petinggi-google-internet-akan-lenyap.jpg"><img class="alignnone size-full wp-image-652" alt="petinggi-google-internet-akan-lenyap" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/petinggi-google-internet-akan-lenyap.jpg" width="670" height="335" /></a></p>
<p>Eric Schmidt, Executive Chairman dari Google yang kontroversial itu menggemparkan acara pertemuan pemimpin dunia di forum ekonomi global di Davos, Swiss. Dalam pidatonya, Schmidt mengatakan bila internet segera hilang.</p>
<p>Meskipun mengatakan hal itu, Schmidt tidak benar-benar menyiratkan bila manusia tidak akan bisa menggunakan internet di masa depan, tetapi justru sebaliknya.</p>
<p>Manusia bisa menemukan internet di mana-mana sehingga kehadirannya tidak akan lagi terasa. Dengan kata lain, internet telah menyatu dengan manusia itu sendiri.</p>
<p>&#8220;Internet akan lenyap. Nanti akan ada banyak sekali alamat IP, banyak gadget, sensor, teknologi wearable, dan hal-hal terkoneksi internet yang kita ajak interaksi sehari-hari, bahkan tanpa kita sadari,&#8221; ujar Schmidt, CNET (22/01).</p>
<p>Ironisnya, kemajuan pesat di bidang internet dan teknologi diprediksi membuat interaksi langsung dengan sesama manusia menjadi kurang menarik. Tanda-tanda fenomena itu mulai terasa saat ini, ketika manusia mulai lebih mengutamakan jejaring sosial ketimbang bertemu langsung.</p>
<p>Lebih lanjut, Schmidt mengatakan bila internet akan semakin terintegrasi dengan dunia digital, membuat semua kegiatan menjadi lebih dinamis dan seperti &#8216;sihir&#8217;.</p>
<p>&#8220;Internet akan menjadi bagian dari keberadaan Anda sendiri sepanjang waktu. Bayangkan Anda berjalan menuju sebuah ruangan, dan ruangan itu sangat dinamis. Dan dari konfirmasi Anda, Anda bisa berinteraksi dengan semua hal yang ada di ruangan itu.&#8221; tambah Schmidt.</p>
<p>Mungkin prediksi yang disampaikan oleh Schmidt itu ada benarnya. Setidaknya langkah awal menuju hal itu sudah terlihat saat Microsoft meluncurkan kacamata pintar hologramnya, HoloLens.</p>
<p>HoloLens membuat dunia virtual dan dunia nyata terlihat seperti menyatu dan terkoneksi dengan internet tentunya. Lewat HoloLens, pengguna juga bisa menyatukan seluruh tampilan gadget yang dimiliki, mulai dari smartphone hingga laptop.</p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2015/01/petinggi-google-internet-akan-lenyap/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cara Membuat Efek Bayangan Tulisan dengan CSS Text Shadow</title>
		<link>https://www.rumahpixel.com/2015/01/cara-membuat-efek-bayangan-tulisan-dengan-css-text-shadow/</link>
		<comments>https://www.rumahpixel.com/2015/01/cara-membuat-efek-bayangan-tulisan-dengan-css-text-shadow/#comments</comments>
		<pubDate>Wed, 21 Jan 2015 16:50:49 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[cara]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[efek css]]></category>
		<category><![CDATA[teks bayang]]></category>
		<category><![CDATA[text shadow]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=643</guid>
		<description><![CDATA[Cara membuat efek tulisan berbayang sebenarnya tidak begitu sulit untuk dilakukan, karena untuk menciptakan efek shadownya, anda cukup bermain dengan CSS TEXT SHADOW, semua pengaturan untuk membuat efek teks/tulisan dengan berbagai model dan warna, anda cukup mengatur nilai value dari kode text shadow, sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan [...]]]></description>
				<content:encoded><![CDATA[<p>Cara membuat efek tulisan berbayang sebenarnya tidak begitu sulit untuk dilakukan, karena untuk menciptakan efek shadownya, anda cukup bermain dengan <strong>CSS TEXT SHADOW</strong>, semua pengaturan untuk membuat efek teks/tulisan dengan berbagai model dan warna, anda cukup mengatur nilai value dari kode text shadow, sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan dengan keinginan.</p>
<p>Berbagai koleksi pilihan Efek Teks Bayangan Dengan CSS Text Shadow yang dapat anda jadikan sebagai referensi buat model Judul website/blog anda terlihat semakin menarik dan keren, seperti di bawah ini</p>
<div style="background: #4aacf7; color: #064475; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: 5px 6px 5px #9ad2fe,-5px -6px 5px #1895f7; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: #4aacf7; border-bottom: 2px solid #ccc; color: #064475; font: bold 16px/16px Georgia; padding: 5px 15px; text-shadow: 1px 2px 1px #9ad2fe,-1px -2px 1px #1895f7; width: auto;">Efek Teks Bayangan</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">.text1 {<br />
font-weight:700px;<br />
font-size:35px;<br />
background:#4aacf7;<br />
color:#064475;<br />
text-shadow:<br />
1px 2px 1px #9ad2fe,<br />
-1px -2px 1px #1895f7;<br />
}</div>
<p>Efek teks ini yang paling saya suka, karena desain tampilan style-nya terkesan seperti ukiran relief, Sedangkan pada warna saya menggunakan hijau gelap pada bayangan teks yang sama dengan warna teks aslinya, sehingga seakan membuat teks timbul <b>(Teks Emboss)</b></p>
<div style="background: #3e6a06; color: #3e6a06; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: -1px -1px 1px #528e06,-1px -1px 3px #528e06,1px 1px 1px #243d05,1px 1px 3px #243d05,1px -1px 1px #eafed2,-1px 1px 1px #eafed2; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: #3e6a06; border-bottom: 2px solid #ccc; color: white; font: bold 16px/16px Georgia; padding: 5px 15px; text-shadow: -1px -1px 1px #528e06,-1px -1px 3px #528e06,1px 1px 1px #243d05,1px 1px 3px #243d05,1px -1px 1px #eafed2,-1px 1px 1px #eafed2; width: auto;">Efek Teks Emboss</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text2 {<br />
font-weight:710px;<br />
font-size:35px;<br />
background:#3e6a06;<br />
color:#3e6a06;<br />
text-shadow:<br />
-1px -1px 1px #528e06,<br />
-1px -1px 3px #528e06,<br />
1px 1px 1px #243d05,<br />
1px 1px 3px #243d05,<br />
1px -1px 1px #eafed2,<br />
-1px 1px 1px #eafed2;<br />
}</div>
<div style="background: #fafafa; color: #91080b; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: 1px 0px 0px #fff,-1px 0px 0px #fff,0px 1px 0px #fff,0px -1px 0px #fff, 1px 1px 2px #000; width: auto;">RUMAH PIXEL</div>
<div style="background: #ccc; border-bottom: 2px solid #ccc; color: #91080b; font: bold 16px/16px Georgia; padding: 5px 15px; text-shadow: 1px 0px 0px #fff,-1px 0px 0px #fff,0px 1px 0px #fff,0px -1px 0px #fff, 1px 1px 2px #000; width: auto;">Efek Teks Garis Sisi</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text3 {<br />
font-weight:700px;<br />
font-size:35px;<br />
background:#fafafa;<br />
color:#91080b;<br />
text-shadow:<br />
1px 0px 0px #fff,<br />
-1px 0px 0px #fff,<br />
0px 1px 0px #fff,<br />
0px -1px 0px #fff,<br />
1px 1px 2px #000;<br />
}</div>
<div style="background: #f9f9d7; color: #9a9d0b; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: 1px 1px #404206,2px 2px #727415,3px 3px #727415,4px 4px #727415,5px 5px #727415,6px 6px #727415,7px 7px #404206,8px 8px 7px #000; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: #f9f9d7; border-bottom: 2px solid #ccc; color: #9a9d0b; font: bold 16px/16px Georgia; padding: 10px 15px; text-shadow: 1px 1px #404206,2px 2px #727415,3px 3px #727415,4px 4px #727415,5px 5px #727415,6px 6px #727415,7px 7px #404206,8px 8px 7px #000; width: auto;">Efek Teks Tiga Dimensi</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text4 h2 {<br />
font-weight:680px;<br />
font-size:35px;<br />
background:#f9f9d7;<br />
color:#9a9d0b;<br />
text-shadow:<br />
1px 1px #404206,<br />
2px 2px #727415,<br />
3px 3px #727415,<br />
4px 4px #727415,<br />
5px 5px #727415,<br />
6px 6px #727415,<br />
7px 7px #404206,<br />
8px 8px 7px #000;<br />
}</div>
<div style="background: #eee; color: #45bef7; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: 0px 1px #577079,0px 2px #577079,0px 3px #577079,0px 4px #577079,0px 5px #577079,0px 6px #577079,0px 7px #577079,0px 7px 10px #333; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: #eee; border-bottom: 2px solid #ccc; color: #45bef7; font: bold 16px/16px Georgia; padding: 10px 15px; text-shadow: 0px 1px #577079,0px 2px #577079,0px 3px #577079,0px 4px #577079,0px 5px #577079,0px 6px #577079,0px 7px #577079,0px 7px 10px #333; width: auto;">Efek Teks Tiga Dimensi</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text5 h2 {<br />
font-weight:680px;<br />
font-size:35px;<br />
background:#eee;<br />
color:#45BEF7;<br />
text-shadow:<br />
0px 1px #577079,<br />
0px 2px #577079,<br />
0px 3px #577079,<br />
0px 4px #577079,<br />
0px 5px #577079,<br />
0px 6px #577079,<br />
0px 7px #577079,<br />
0px 7px 10px #333;<br />
}</div>
<p>Pada Light efek teks ini besaran angka value pada deret bayangan sama besar saat menambakhan tingkat ketajaman BLUR dengan tambahan sedikit demi sedikit pada efek bayangan teks aslinya, jika warna teks putih maka latar belakang kita ubah menjadi hitam, dan nilai offset sumbu (y) menjadi nol (0), sehingga anda akan dapat menghasilkan efek teks menyala seperti berikut</p>
<p>&nbsp;</p>
<div style="background: black; color: white; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 30px; padding-right: 15px; text-align: center; text-shadow: 0 0 3px #FFFFA0,0 0 5px #FFFF4D,0 0 9px #FFFF41,0 0 20px #FFFF2A,0 0 25px #FFFF2B,0 0 30px #FEFE00,0 0 40px #F7F700; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: black; border-bottom: 2px solid #ccc; color: white; font: bold 16px/16px Georgia; padding: 10px 15px; text-shadow: 0 0 3px #FFFFA0,0 0 5px #FFFF4D,0 0 9px #FFFF41,0 0 20px #FFFF2A,0 0 25px #FFFF2B,0 0 30px #FEFE00,0 0 40px #F7F700; width: auto;">Efek Teks Menyala</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text6 h2 {<br />
font-weight:755px;<br />
font-size:35px;<br />
background:black;<br />
color:#fff;<br />
text-shadow:<br />
0 0 3px #FFFFA0,<br />
0 0 5px #FFFF4D,<br />
0 0 9px #FFFF41,<br />
0 0 20px #FFFF2A,<br />
0 0 25px #FFFF2B,<br />
0 0 30px #FEFE00,<br />
0 0 40px #F7F700;<br />
}</div>
<div style="background: black; color: black; font-size: 50px; padding-left: 15px; padding-bottom: 30px; padding-top: 37px; padding-right: 15px; text-align: center; text-shadow: 0px 0px 4px #ccc,-1px -5px 4px #ff3,2px -10px 6px #fd3,-3px -15px 11px #f80,3px -18px 18px #f20; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: black; border-bottom: 2px solid #ccc; color: black; font: bold 16px/16px Georgia; padding-bottom: 4px; padding-left: 15px; padding-top: 18px; text-shadow: 0px 0px 4px #ccc,-1px -5px 4px #ff3,2px -10px 6px #fd3,-3px -15px 11px #f80,3px -18px 18px #f20; width: auto;">Efek Teks Menyala</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text7 h2 {<br />
font-weight:600px;<br />
font-size:42px;<br />
background:black;<br />
color:black;<br />
text-shadow:<br />
0px 0px 4px #ccc,<br />
-1px -5px 4px #ff3,<br />
2px -10px 6px #fd3,<br />
-3px -15px 11px #f80,<br />
3px -18px 18px #f20;<br />
}</div>
<div style="background: #f5e6fe; color: white; font-size: 50px; padding: 15px; text-align: center; text-shadow: -1px -1px 0px #ddd,2px 1px 0px #f93e47,4px 2px 0px #f59b0f,6px 3px 0px #f5dc0f,8px 4px 0px #19a305,10px 5px 0px #057fa3,12px 6px 0px #052aa3,14px 7px 0px #7605a3,14px 8px 2px #000,14px 5px 10px #000,14px 5px 25px #000; width: auto;">RUMAH PIXEL</div>
<p>&nbsp;</p>
<div style="background: #f5e6fe; border-bottom: 2px solid #ccc; color: purple; font: bold 16px/16px Georgia; padding-bottom: 7px; padding-left: 15px; padding-top: 5px; text-shadow: -1px -1px 0px #ddd,2px 1px 0px #f93e47,4px 2px 0px #f59b0f,6px 3px 0px #f5dc0f,8px 4px 0px #19a305,10px 5px 0px #057fa3,12px 6px 0px #052aa3,14px 7px 0px #7605a3,14px 8px 2px #000,14px 5px 10px #000,14px 5px 25px #000; width: auto;">Efek Teks Warna-Warni</div>
<div style="background: #333; color: #cccccc; font: 13px/15px courier; overflow: auto; padding: 13px; width: auto;">text8 h2 {<br />
font-weight:900px;<br />
font-size:47px;<br />
background:#f5e6fe;<br />
color:#fff;<br />
text-shadow:<br />
-1px -1px 0px #ddd,<br />
2px 1px 0px #f93e47,<br />
4px 2px 0px #f59b0f,<br />
6px 3px 0px #f5dc0f,<br />
8px 4px 0px #19a305,<br />
10px 5px 0px #057fa3,<br />
12px 6px 0px #052aa3,<br />
14px 7px 0px #7605a3,<br />
14px 8px 2px #000,<br />
14px 5px 10px #000,<br />
14px 5px 25px #000;<br />
}</div>
<p><b></b></p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2015/01/cara-membuat-efek-bayangan-tulisan-dengan-css-text-shadow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>20 Fresh Sites With Amazing Scrolling Effects</title>
		<link>https://www.rumahpixel.com/2015/01/20-fresh-sites-with-amazing-scrolling-effects/</link>
		<comments>https://www.rumahpixel.com/2015/01/20-fresh-sites-with-amazing-scrolling-effects/#comments</comments>
		<pubDate>Mon, 12 Jan 2015 21:38:31 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[amazing]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[fresh]]></category>
		<category><![CDATA[scroll]]></category>
		<category><![CDATA[sites]]></category>
		<category><![CDATA[slider]]></category>
		<category><![CDATA[unik]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=579</guid>
		<description><![CDATA[Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention. There’s a wide variety of tactics that you can use to create [...]]]></description>
				<content:encoded><![CDATA[<p>Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention.</p>
<p>There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.<br />
<strong><a href="http://www.laurameroni.com/#/home" target="_blank">Laura Meroni</a> </strong><br />
I love these sites that are able to pull off something great without a lot of fancy animations. By manipulating the positioning of various items on scroll, they create an awesome parallax effect that makes the site look and feel like a deeply layered experience.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-1.jpg"><img class="alignnone size-full wp-image-581" alt="scrolleffects-1" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-1.jpg" width="715" height="414" /></a><br />
<a href="http://www.gozu.fr/#/home" target="_blank">‎<strong>Gozu </strong></a><br />
This site is really interesting and unique. The canvas is split into thirds vertically with the middle section being highlighted above the others. When you scroll, the page jumps a predefined distance to highlight the next section. It’s a pretty cool effect that makes for an infinitely scrolling (looping) experience that’s not like any other site I’ve seen.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-2.jpg"><img class="alignnone size-full wp-image-582" alt="scrolleffects-2" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-2.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.myprovence.fr/#p_partnerships" target="_blank">MyProvence Festival </a></strong><br />
This site is a series of eight different fullscreen slides. Every time you scroll, the page automatically jumps to the next or previous slide, which automatically sizes itself to the current screen size. If you’re designing a site with clear sections and don’t necessarily want the users focusing on the in between, this is a great way to go.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-3.jpg"><img class="alignnone size-full wp-image-583" alt="scrolleffects-3" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-3.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.monokroom.com/" target="_blank">Monokroom </a></strong><br />
Monokroom slices the page vertically a number of times and scrolls each slice at a different rate. The cool part is that the messy, discombobulated layers come together at a few predefined points to make everything look nice and organized. As you scroll further, there’s a pretty cool spinning gear animation to check out as well.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-4.jpg"><img class="alignnone size-full wp-image-584" alt="scrolleffects-4" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-4.jpg" width="715" height="414" /></a><br />
<strong><a href="http://aform.lu/index.php?id=3" target="_blank">AFORM: Fitness Coach </a></strong><br />
This site is all about data. As you scroll between background images, words and numbers fly in and out of the screen. The numbers have an awesome effect applied to them that makes them count up until they hit their target value. It’s makes for a fascinating way to present what would otherwise be static information.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-5.jpg"><img class="alignnone size-full wp-image-585" alt="scrolleffects-5" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-5.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.mightymatcha.com/" target="_blank">Mighty Matcha </a></strong><br />
This site is a perfect example of how you can use scroll points to specifically direct the user’s attention to very precise locations. As you scroll, different elements on the page are highlighted to grab your focus. Some fade into being, others twist, turn or grow, there’s even a mini video that triggers once you reach that point on the page. As you use the site, you can’t help but look exactly where the designers wanted you to.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-6.jpg"><img class="alignnone size-full wp-image-586" alt="scrolleffects-6" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-6.jpg" width="715" height="414" /></a><br />
<strong><a href="http://mailchimp.com/2012/" target="_blank">MailChimp Annual Report </a></strong><br />
The MailChimp Annual Report is another example of using scrolling technology to make data really interesting. The right side of the page scrolls through various animated infographics as the background changes colors and graphics and the left side cycles through the different sections of the report.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-7.jpg"><img class="alignnone size-full wp-image-587" alt="scrolleffects-7" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-7.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.scnr.jp/" target="_blank">SCANNER </a></strong><br />
This one isn’t so much a fancy effect as an interesting scrolling system. As opposed to scrolling the whole page, this site allows you to hover over and scroll each of the primary columns individually. The result is a great way to browse a ton of content while keeping all of the navigation and primary site info accessible.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-8.jpg"><img class="alignnone size-full wp-image-588" alt="scrolleffects-8" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-8.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.friendsandfamilyplan.org/" target="_blank">The Friends and Family Plan </a></strong><br />
Like our first example, this sites uses a simple vertically scrolling parallax effect to create a layered feel that makes the experience feel quite dynamic without any fancy animations or annoying loading times.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-9.jpg"><img class="alignnone size-full wp-image-589" alt="scrolleffects-9" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-9.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.astoriacassis.com/" target="_blank">Astoria Villa </a></strong><br />
This one is so simple and subtle that you might miss it. As you scroll down the page, there are gaps in the background that reveal the image underneath. However, each time you come to a gap, the revealed background image is different.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-10.jpg"><img alt="scrolleffects-10" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-10.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.wooddecker.ru/" target="_blank">WOODDECKER </a></strong><br />
This site uses scrolling effects to highlight the all-weather nature of their product. Hovering in the middle of the page, you’ll see a wooden slab. As you scroll, different animated weather elements are thrown at the product along with informational pop ups that inform you of the specifics of the weather resistance.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-11.jpg"><img class="alignnone size-full wp-image-591" alt="scrolleffects-11" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-11.jpg" width="715" height="414" /></a><br />
<strong><a href="http://webeffectual.com/" target="_blank">Web Effectual </a></strong><br />
This site uses the same effect as Astoria Villa above, occasionally presenting gaps in the background that reveal different images and text as you scroll.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-12.jpg"><img class="alignnone size-full wp-image-592" alt="scrolleffects-12" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-12.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.fatmedia.co.uk/" target="_blank">Fat Media </a></strong><br />
Fat Media has a ton of stuff happening while you scroll. A dotted path animates and leads you downward as elements fly in and out of view. Various numerical data points are presented in a way that’s nearly identical to what we saw in AFORM above.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-13.jpg"><img class="alignnone size-full wp-image-593" alt="scrolleffects-13" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-13.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.fannabee.com/wow/" target="_blank">Fannabee </a></strong><br />
This one is almost too crazy to explain so be sure to check it out yourself. Here, scrolling animates the background and the foreground elements. Items spin and drop, images change, iPhones slide in and out; it’s crazy… in a good way.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-14.jpg"><img class="alignnone size-full wp-image-594" alt="scrolleffects-14" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-14.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.antonioerrigo.it/" target="_blank">Antonio Errigo </a></strong><br />
Antonio uses a few different simple but effective parallax scrolling effects. A plane flies by in the clouds, Antonio leaps in and out of view, etc.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-15.jpg"><img class="alignnone size-full wp-image-595" alt="scrolleffects-15" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-15.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.sicky.net/" target="_blank">Andrea Sichinolfi </a></strong><br />
Different effects are in play at different points here. As you scroll, you reach an area with a section that suddenly expands to reveal hidden content, circles change their stroke width, items pop out from off screen; lots of great animations to keep you interested.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-16.jpg"><img class="alignnone size-full wp-image-596" alt="scrolleffects-16" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-16.jpg" width="715" height="414" /></a><br />
<strong><a href="http://holidaycards.bamstrategy.com/2012/" target="_blank">Bam Strategy </a></strong><br />
This one is really impressive. Here the scrolling effects are used to tell a story. As you scroll, you see a series of panels, each of which holds a little animated scene, revealing the next part of the story. If you’re looking for a way to inject narrative into your design, this is some great inspiration.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-17.jpg"><img class="alignnone size-full wp-image-597" alt="scrolleffects-17" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-17.jpg" width="715" height="414" /></a><br />
<strong><a href="http://italiokitchen.com/" target="_blank">Italio Kitchen </a></strong><br />
Another really simple use of scroll effects. As you move down the page, different ingredients fly into view. At one point, a bowl of salad jumps out of the way to reveal a circle container of text underneath.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-18.jpg"><img alt="scrolleffects-18" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-18.jpg" width="715" height="414" /></a><br />
<strong><a href="http://rit-team.ru/" target="_blank">Rit Team </a></strong><br />
This one is really fun to play with. As you scroll down the page, the car on the track follows you. Scroll back up and he’ll quickly turn around and try to catch up, veering wildly off the track to get back.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-19.jpg"><img class="alignnone size-full wp-image-599" alt="scrolleffects-19" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-19.jpg" width="715" height="414" /></a><br />
<strong><a href="http://www.namemesh.com/" target="_blank">namemesh </a></strong><br />
Namemesh presents a new idea for interaction that is one part effective and two parts bizarre. Type in some words and you’ll see four lists of ideas for available domain names appear. If you want to see more, you simply scroll down. As you do so, the list suddenly expands and fills up with new ideas. It’s difficult to describe properly so stop by and try it out.</p>
<p><a href="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-20.jpg"><img class="alignnone size-full wp-image-600" alt="scrolleffects-20" src="http://www.rumahpixel.com/wp-content/uploads/2015/01/scrolleffects-20.jpg" width="715" height="414" /></a></p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2015/01/20-fresh-sites-with-amazing-scrolling-effects/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cara cepat menaikkan trafik website dan mendapatkan 10rb visitor dalam seminggu</title>
		<link>https://www.rumahpixel.com/2013/07/cara-cepat-menaikkan-trafik-website-dan-mendapatkan-10rb-visitor-dalam-seminggu/</link>
		<comments>https://www.rumahpixel.com/2013/07/cara-cepat-menaikkan-trafik-website-dan-mendapatkan-10rb-visitor-dalam-seminggu/#comments</comments>
		<pubDate>Mon, 29 Jul 2013 10:31:26 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[autosurf]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[traffic]]></category>
		<category><![CDATA[traffic exchange]]></category>
		<category><![CDATA[visitor]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=252</guid>
		<description><![CDATA[Cara cepat menaikkan trafik website dan mendapatkan 10rb visitor dalam seminggu. Trik ini sudah tidak asing lagi di kalangan blogger, mungkin anda sering menemukan blog dengan total visitor yang luar biasa puluhan ribu total visitor dan pada widget trafik visitornya tercantum puluhan orang bahkan ratusan orang yang online. Caranya sangat mudah sekali, mungkin anda pernah [...]]]></description>
				<content:encoded><![CDATA[<p>Cara cepat menaikkan trafik website dan mendapatkan 10rb visitor dalam seminggu. Trik ini sudah tidak asing lagi di kalangan blogger, mungkin anda sering menemukan blog dengan total visitor yang luar biasa puluhan ribu total visitor dan pada widget trafik visitornya tercantum puluhan orang bahkan ratusan orang yang online.</p>
<p><a href="http://www.10khits.com/?ref=55647" target="_blank"><img src="http://www.rumahpixel.com/wp-content/uploads/2013/07/728x90x728x90.png.pagespeed.ic_.j1zsO-I2GY.jpg" alt="Autosurf Traffice Exchange rumahpixel 728x90" width="728" height="90" class="alignnone size-full wp-image-255" /></a></p>
<p>Caranya sangat mudah sekali, mungkin anda pernah mendengar Autosurf, Autosurf adalah sebuah program pertukaran trafik atau yang lebih dikenal dengan traffic exchange, traffic exchange sendiri sebenarnya memiliki dua pilihan, yaitu autosurf dan manual surf.</p>
<p>Kita akan menggunakan cara Autosurf, caranya:</p>
<ul>
<li>Silahkan kunjungi situs ini: <a title="Autosurf Traffic Exchange" href="http://www.10khits.com/?ref=55647" target="_blank">[Klik]</a><br />
Seperti yang tertulis pada banner di atas kita memang akan mendapatkan 10000 visitor secara gratis.</li>
<li>Setelah situs terbuka silahkan lakukan pendaftaran hingga selesai, caranya sama seperti mendaftar pada situs lain, klik Sign Up kemudian kita cukup mengisi kolom pada form sesuai yang diminta pada form tersebut.</li>
<li>Jika sudah terdaftar kemudian silahkan Login, saatnya kita mendapakan 10000 visitor untuk website atau blog kita secara gratis.</li>
<li>Klik Add New Site. isikan nama dan Url/Alamat website/blog anda. Setelah klik Add New Site dan akan secara otomatis menampilkan website/blog kita, tunggu hingga waktu yang ada di sana selesai kemudian &#8220;Confirm&#8221;.</li>
<li>Setelah itu akan terlihat point kita yang masih Nol, untuk itu kita perlu melakukan autosurf terlebih dahulu.</li>
<li>Pada atas panel klik Surf Now, akan muncul tab baru dan biarkan ia bekerja secara otomatis, untuk setiap 10 detik kita akan mendapatkan 1 point, yang kita perlukan adalah 1000 point untuk mendapatakan 10000 ribu visitor blog kita, biarkan terus berjalan sendiri hingga kita mendapatkan point 1000.</li>
<li>Jika sudah mendapatkan point 1000, kita akan mendapatkan bonus 10000 point yang berarti 10000 visitor untuk blog kita. Relog halaman atau page home dan lihat point kita telah berubah dari Nol menjadi 10000.</li>
<li>Lalu klik Allocate Points, setelah itu alokasikan 10000 point anda tadi untuk situs website/blog anda yang terdaftar di sana, kemudian komfirmasi dengan mengklik Allocate Points.</li>
</ul>
<p>Dan setelah itu 10000 visitor akan mengunjungi website/blog kita, jika anda memsang widget yang menampilkan jumlah visitor pada website/blog anda seperti widget hitstat atau traffic counter, anda bisa lihat akan ada puluhan hingga ratusan orang yang online pada website/blog anda dari berbagai negara setiap waktu, sehari blog anda akan dikunjungi 1000 hingga 1500 visitor, lebih kurang seminggu kita akan mendapatakan10000 visitor, mudahkan cara cepat menaikkan trafik website/blog dan mendapatkan 10rb visitor dalam seminggu.</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2013/07/cara-cepat-menaikkan-trafik-website-dan-mendapatkan-10rb-visitor-dalam-seminggu/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to Build a Successful Website</title>
		<link>https://www.rumahpixel.com/2013/07/how-to-build-a-successful-website/</link>
		<comments>https://www.rumahpixel.com/2013/07/how-to-build-a-successful-website/#comments</comments>
		<pubDate>Sun, 07 Jul 2013 19:52:30 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=142</guid>
		<description><![CDATA[Due to the many news stories in recent years about big corporate websites going bankrupt it is a common misconception today that all or most websites are unprofitable and will not make their owners money. This assumption is based on the idea that if big corporations like Disney fail at making a website then your [...]]]></description>
				<content:encoded><![CDATA[<p>Due to the many news stories in recent years about big corporate websites going bankrupt it is a common misconception today that all or most websites are unprofitable and will not make their owners money. This assumption is based on the idea that if big corporations like Disney fail at making a website then your average guy on the street must fail horribly, of course that assumption is wrong. In the case of content driven websites the smaller independent operation often has the advantage over large corporate entities. While an individual or a small group does not have the resources of the large corporation, they also do not have the overhead. If you run a website out of your basement or your bedroom your overhead is already significantly smaller than that of a major corporation because you&#8217;re not running your website out of a brand new state-of-the-art office building. Additionally if you only have one employee, yourself, you&#8217;re also reducing your overhead compared to corporations who have to pay for workers who do the same things you do, but also management, building management, building security, maintenance, marketing consultants, development consultants, secretaries, and a myriad of other positions that by keeping your operation small you don&#8217;t need. The only advantage a corporation has over an individual is that they can afford to pay for gross amounts of advertising both online and off, whereas the typical individual cannot.</p>
<p>What&#8217;s great about the Internet is that everyone is on a level playing field. Due to the relatively cheap or free access to search engines you can compete with big websites with minimal investment on your part. You don&#8217;t need lots of money to run a popular profitable website, all you need is time and know-how, and the time requirement isn&#8217;t even that much. While some websites may require more maintenance than others a typical site can be managed in your spare time, in the evenings or on weekends.</p>
<p>As far as how much you can make? The sky&#8217;s the limit, however keep your head firmly planted on earth. It is possible to have a monthly income of a few hundred to a few thousand dollars off a website(s) you run in your spare time, that is an attainable goal. It is also possible to make much more than that, but expecting more is a less realistic goal. Don&#8217;t go into your website project with the expectation of millions of dollars, chances are it isn&#8217;t going to happen. However, if you are after supplemental income that will last residually for a long time (quite possibly the rest of your life), then this guide will tell you how to do it.</p>
<p>There are no miracles here or magic systems, you will need to follow the correct steps and you will need to work on things. Your first site might fail, your second one too, but maybe your third site will be the one to succeed. After I launched my first commercial site it took me a year and a half before I started making enough money to live on, which was $2-3,000 per month, and then another 8 months before I started making great money, which was 5 figures a month. There wasn&#8217;t anything magical about it when I finally became a successful self-employed website publisher. It was the result of work, sacrifice, and learning from my mistakes. I now make a very nice six figure sum yearly, but reaching this point first required that I live on a very strict budget back when my websites were only bringing in a few hundred a month. I have taken everything I learned in my road to success and placed it here. This guide bridges the gap between those who know how to build a website, and those who know how to build a successful website. You will not have to pay for this information, this guide is 100% free.</p>
<p>The articles in this guide assume you have a familiarity with web development technologies. If you do not yet know what server side programming or CSS is you should take our services.</p>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2013/07/how-to-build-a-successful-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web Design and Development Trends for 2013 and 2014</title>
		<link>https://www.rumahpixel.com/2013/07/web-design-and-development-trends-for-2013-and-2014/</link>
		<comments>https://www.rumahpixel.com/2013/07/web-design-and-development-trends-for-2013-and-2014/#comments</comments>
		<pubDate>Wed, 03 Jul 2013 19:04:17 +0000</pubDate>
		<dc:creator>rupixadmin</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[website]]></category>
		<category><![CDATA[website trends]]></category>

		<guid isPermaLink="false">http://www.rumahpixel.com/?p=23</guid>
		<description><![CDATA[2013 is an exciting year for the web design and development community. Browsers are faster than ever, and mobile phones and tablets are in the hands of more and more people every day. That means more opportunity for web designers and developers to have their content reach a wider audience. This year we&#8217;re seeing a [...]]]></description>
				<content:encoded><![CDATA[<p><a href="http://rumahpixel.com/wp-content/uploads/2013/07/code.jpg"><img class="alignnone size-full wp-image-24" alt="code" src="http://rumahpixel.com/wp-content/uploads/2013/07/code.jpg" width="760" height="250" /></a>2013 is an exciting year for the web design and development community. Browsers are faster than ever, and mobile phones and tablets are in the hands of more and more people every day. That means more opportunity for web designers and developers to have their content reach a wider audience.</p>
<p>This year we&#8217;re seeing a few trends cross over from 2010 and up, with some new design and functional pieces evolving.</p>
<h1><strong>Design</strong></h1>
<ol>
<li><strong>Adaptive and responsive design.</strong>
<p>Responsive design and adaptive techniques aren’t going anywhere anytime soon. They are current, cost-effective solutions to an evolving problem. Having a mobile site just isn’t good enough anymore, and in some cases can even hurt your web presence or business due to duplicate content and costly content management.</p>
<p>Responsive design allows you to keep one content set for every device, while adapting the layout to give an optimal viewing experience for different resolutions. It’s an ongoing trend for 2013 that doesn’t show any signs of slowing down.</li>
<li><strong>Emphasis on typography and content over heavy design.
<p></strong>A few short years ago web design was trending toward ultra-glossy, apple-esque design. Not anymore. Jpeg-heavy designs are out; CSS3 and Font-Family’s are in.</p>
<p>Smart devices are in almost every user’s hands by now. My grandma has an iPhone, and my even little cousins have either an iPhone or iPod touch. Website content should be able to be delivered to these high latency devices, but designers don’t want to sacrifice aesthetics.</p>
<p>That’s where trends from the printing world come in: typography, clean lines, subtle patterns, and imagery only when it serves a purpose; less fluff, more value. This allows every device to have a focus on content, while feeling fresh and aesthetically pleasing to the end user. I think we can thank the print world for this trend.</li>
</ol>
<ol>
<li value="3"><strong>Touch me. I’m mobile first.
<p></strong>Mobile-first design accounts for the tough design architecture decisions up front.</p>
<p>Big buttons are in. Hover menus are out.</p>
<p>Design has to account for touch screens and desktop users, and the lowest common denominator is mobile. You can’t rightly hover on a tablet or phone, and skinny navigation is stress-inducing for phone or tablet users.</p>
<p>Navigation should be quick and straightforward and not rely on a mouse pointer to get the job done.</p>
<p>Tablets and phones can utilize swiping and other touch-centric navigation elements, and it would unwise to let these intuitive app-centric features go to waste on the web. Swipe it, tap it, and lastly, click it.</li>
</ol>
<h1><strong>Development</strong></h1>
<ol>
<li value="4"><strong>HTML5 and CSS3</strong>CSS3 allows developers to use animations and other aesthetic elements that look great and cost next to nothing in terms of file size, which is great for page speed. It’s the new flash element that is high in reusability and low on bloat.
<p>Box shadows, gradients, and border radius’ are just the tip of the iceberg. 3D is now possible and a viable option, and techniques such as filters (think photoshop and 3D effects) are just around the corner.</p>
<p>HTML5 gives developers semantics (hallelujah!), standards for movies, and more dynamic web support.</li>
<li value="5"><strong>Ajax goodness coupled with HTML5’s “onpop” state</strong>
<p>Utilizing HTML5’s onpop state allows a developer to change the browser url without reloading the page. Simple, but extremely powerful.</p>
<p>Using this ability allows a developer to create a website that no longer navigates from page to page, but from content to content, without ever reloading a frame.</p>
<p>This saves precious http requests and initial document ready event handling. I’m still in testing phases, but I predict a 20-40% increase in page speed.</p>
<p>If coded properly, the onpop state feature will allow developers to ajax in content while still having search engine friendly page URLs that are shareable and won’t break the web browsing paradigm.</p>
<p>Search engines can crawl content normally, and links can still be shared, but the flow of the web can be smoother and faster than ever.</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>https://www.rumahpixel.com/2013/07/web-design-and-development-trends-for-2013-and-2014/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
