Saat Anda mengubah ukuran halaman elemen blok ini jatuh di bawah satu sama lain dengan anggun. Saya telah menyiapkan beberapa contoh kueri media dalam stylesheet eksternal. Ini membuatnya lebih mudah melacak gaya ketika akan kembali mengedit sesuatu nanti.

 
 
 
Jake Rocheleau
 
Penulis Lepas & Pengembang Web
  Hudson, Massachusetts, Amerika Serikat  [email protected] Portofolio saya • @jakerocheleau 
 
  
 
 

Sebelum kita beralih ke CSS terperinci, saya ingin menjelaskan lebih lanjut tentang penggunaan microdata. Jika Anda melihat lebih dekat, saya sudah mengotori atribut di dalam banyak elemen berbeda dengan namanya tipe barang, itemscope, dan itemprop. Ini semua berhubungan dengan proyek Schmea yang berharap untuk menawarkan struktur data untuk web.

Memformat Microdata yang Berguna

Semua mesin pencari utama termasuk Google, Yahoo !, dan Bing telah menerima Skema sebagai sintaks terbaik untuk markup data. Dengan memberi label detail tentang diri Anda, ini membantu mesin pencari ini menampilkan hasil terkait untuk konten Anda secara online. Mari kita uraikan cara mengaturnya.

Atribut itemscope diterapkan pada wadah apa pun yang menyimpan informasi tentang item skema. Ini selalu diikuti oleh atribut itemtype, yang dalam skenario ini menggambarkan seseorang. Di dalam bungkus wrap ini saya bisa memberi label konten apa pun dengan menggunakan itemprop bersama dengan setiap detail yang tercantum di halaman dokumentasi mereka.

Metode yang disarankan adalah membungkus konten Anda di dalam tag rentang alih-alih menambahkan langsung ke elemen. Saat Anda melabeli sesuatu seperti foto, Anda harus melampirkannya pada img elemen secara langsung. Tetapi jika tidak, Anda akan memiliki markup yang lebih bersih dengan membungkus data Anda dalam rentang tag.

Berapa Banyak Terlalu Banyak?

Saya berpendapat bahwa tidak ada batasan jumlah detail yang bisa Anda masuki. Microdata tersedia untuk membantu komputer mengenali orang, organisasi, produk, dan barang-barang lainnya dalam konteks online. Semakin banyak informasi yang Anda tawarkan, semakin baik.

Penting untuk menjaga dan membuka pikiran dan melihat bagaimana Anda dapat menggunakan mikrodata ini dalam aspek situs web Anda sendiri. Jika Anda menghabiskan 10-15 menit melalui dokumentasi Skema itu jauh lebih mudah daripada yang Anda pikirkan. Kita dapat melihat dua contoh solid dari resume resume:

 
 
Skillet
 
 
Pengembangan
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
Database SQL
 
Wordpress
 
Pligg CMS
 
Beberapa Objective-C
 
 
 
 
Perangkat lunak
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Saat mendaftarkan berbagai keterampilan saya, saya telah menyiapkan sebuah wadah baru yang mendefinisikan skema ItemList. Tidak ada jenis keahlian atau pengalaman apa pun untuk dicantumkan di bawah Seseorang, jadi ini adalah alternatif yang aman. Nilai di sini adalah bahwa Google dapat memahami masing-masing itemListElement terkait satu sama lain. Dalam hal ini kami memiliki daftar bahasa dan perangkat lunak yang saya tahu cara kerjanya.

 
 
artikel Terbaru
 
  10 Metode Fallback Yang Berguna Untuk CSS Dan Javascript • Diterbitkan dalam Juli 2012
 
  Menulis ulang URL Di WordPress: Kiat Dan Plugin • Diterbitkan dalam Juli 2012
 
  Optimasi JPEG Untuk Web - Panduan Utama • Diterbitkan dalam Juli 2012
 
  9 Trik Merancang Newsletter HTML Sempurna • Diterbitkan dalam Mei 2012
 
  Panduan Untuk Pengujian A / B Dengan Pengoptimal Situs Web Google • Diterbitkan dalam Maret 2012
 
 

Contoh bagus lainnya adalah daftar artikel yang ditemukan di bagian paling bawah. Ada pengaturan skema untuk artikel dan posting blog, semua yang berhubungan dengan konten yang ditemukan online. Saya telah menunjukkan URL artikel dan tanggal publikasi yang lebih dari cukup info untuk crawler mesin pencari ini.

Perlu diingat bahwa microdata adalah tentang memformat konten yang akan diatur oleh komputer. Resume satu halaman ini adalah contoh sempurna untuk mendefinisikan ciri-ciri orang tertentu. Ini tidak akan berguna di setiap situs web, tetapi ini adalah metodologi yang menarik untuk dipahami.

Gaya CSS Relatif

Di bagian terakhir ini, mari kita lihat bagaimana menata seluruh halaman web ini. Menuju bagian atas stylesheet kami, saya mendefinisikan beberapa reset awal dan properti elemen dasar. Ini termasuk header, daftar item, dan efek hover tautan jangkar.

* margin: 0; bantalan: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); ukuran font: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; warna: # 454545; ukuran font: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; warna: # 484848; ukuran font: 2.5em; margin-bottom: 10px; teks-dekorasi: garis bawah;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; warna: # 777; font-weight: normal; ukuran font: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; warna: # 656565; font-weight: bold; ukuran font: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; warna: # 565656; ukuran font: 1.8em; garis-tinggi: 1.4em; margin-bottom: 15px; padding-kiri: 35px;  small font-family: "Balthazar", serif; warna: # 656565; ukuran font: 1.6em; display: blok; margin-bottom: 6px;  ul display: block; daftar-gaya: tidak ada;  ul li padding-left: 45px; daftar-gaya-jenis: tidak ada; vertical-align: top; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px tanpa-ulangi; margin-bottom: 5px; font-family: "Balthazar", serif; warna: # 666; ukuran font: 1.6em; garis-tinggi: 2.3em;  img border: 0; max-width: 100%;  a color: # 5582d6; teks-dekorasi: tidak ada;  a: hover text-decoration: underline;  

Tidak ada yang terlalu menarik kecuali untuk beberapa tumpukan font khusus. Saya juga meraih ikon peluru unik alih-alih menggunakan default “cakram”. Anda dapat mencoba mencari melalui direktori seperti Icon Finder ketika mencoba menemukan desain yang serupa.

/ ** @ tata letak inti grup ** / #w margin: 0px 50px; padding: 20px 40px; padding-top: 35px; latar belakang: #fff; lebar minimum: 260px; lebar maks: 900px; batas-bawah-kanan-jari-jari: 8px; batas-bawah-kiri-jari-jari: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header width: 100%;  / ** @kelompok pengaturan pribadi ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; batas-jari-jari: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); warna latar: #fff; perbatasan: 1px solid #ccc; padding: 5px;  

Hanya ada beberapa area blok penting pada halaman yang membutuhkan perhatian. Tentu saja pembungkus div diatur dengan margin dan bantalan tambahan. Lebar maks juga dibatasi pada 900px karena setiap ukuran yang lebih besar terasa seperti halaman memiliki spasi terlalu banyak. Saya juga menggunakan sudut bulat di bagian bawah halaman untuk efek yang lebih halus pada mata.

Desain responsif

Mungkin aspek terpenting dari resume online ini adalah fungsi responsif. Saya memiliki lima pengaturan breakpoint yang berbeda untuk mencapai berbagai efek ketika mengubah ukuran jendela browser.

@media hanya layar dan (max-width: 740px) h1 ukuran font: 4.5em;  h3 ukuran font: 2.2em;  h2 display: block; perataan teks: tengah;  #info float: none; display: blok; perataan teks: tengah;  #photo float: none; display: blok; perataan teks: tengah;  #w padding: 20px 15px;  p padding: 0;  

Inisial 740px ada di sekitar tempat gambar foto akan berbenturan dengan teks tajuk kami. Alih-alih membiarkan foto drop-down ke sisi kanan, kami menghapus kedua elemen dan menempatkan seluruh tata letak. Saya juga meningkatkan ukuran teks header untuk memberikan dampak yang lebih solid.

Ketika jendela semakin kecil saya telah menghapus beberapa padding tambahan dari pembungkus div dan paragraf. Masalah berikutnya yang kita hadapi setelah header adalah dari daftar skill UL. Saya memecah pendekatan dua kolom dan bukannya memiliki item daftar mengambang di sebelah satu sama lain.

@media hanya layar dan (max-width: 570px) ul li display: inline-block; padding-left: 15px; lebar: 140px; background-position: -5px 0px; margin-right: 6px; tinggi garis: 1.7em;  # skill-left, skill-right margin-bottom: 15px;  

Ini juga membutuhkan reposisi banyak properti teks default. Kita harus memperbarui tinggi baris dan memposisikan ulang ikon peluru setiap item daftar. Saya telah menetapkan lebar tetap sehingga kisi-kisi tampak lebih teratur hingga breakpoint berikutnya.

Pengodean untuk Smartphone

Tiga pertanyaan media terakhir kecil namun sangat penting. Saat Anda beralih antara mode lansekap dan potret, iPhone akan mengubah ukuran browser seluler apa pun. Ini juga terjadi pada sebagian besar perangkat Android dan ponsel Windows Mobile.

@media hanya layar dan (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  Layar hanya media @ dan (max-width: 320px) #w margin: 0 10px;  / ** iPhone saja ** / @media layar dan (max-device-width: 480px) ul li width: 150px;  

Ketika pertama kali memukul 480px atau lebih kecil kami menghapus beberapa padding lagi dari pembungkus dan juga kembali ukuran item daftar. Kemudian pada 320px saya telah menghapus beberapa ruang margin di luar dokumen. Anda masih dapat melihat latar belakang bertekstur, tetapi itu tidak terlalu penting pada viewport vertikal yang ramping.

Terakhir saya menggunakan lebar maks perangkat untuk menargetkan perangkat iPhone itu sendiri, atau yaitu layar ponsel lainnya dengan lebar maksimum 480px. Dalam hal ini saya ingin memperbarui item daftar sedikit lebih lebar sehingga mereka mengisi seluruh layar. Ini hanya akan memengaruhi daftar skill dalam tampilan lanskap karena potret terlalu kurus untuk melihat adanya perbedaan.

• Demo
• Unduh Kode Sumber

Pikiran terakhir

Bekerja melalui Internet sering membutuhkan setidaknya beberapa jenis portofolio online. Ketika Anda dapat menautkan ke satu halaman resume dengan semua detail Anda diatur bersama itu menunjukkan bahwa Anda serius. Pengusaha serius dan klien potensial akan jatuh cinta pada tampilan karismatik profesionalisme dalam desain web.

Saya harap Anda dapat mengambil beberapa poin penting dari tutorial ini. Freelancer di lokasi mana pun di seluruh dunia dapat memasarkan diri mereka hanya dengan sedikit upaya teknis. Silakan mengunduh kode sumber demo saya di atas, dan bagikan pendapat Anda tentang artikel ini di area komentar kami.