## JKTP Vol 3 No (3) Agustus (2020): 292-302
JKTP Jurnal Kajian Teknologi Pendidikan
DOI:10.17977/um038v3i32020p292
http://journal2.um.ac.id/index.php/jktp/index

## PENGEMBANGAN MEDIA WEBSITE E-LEARNING

## BERBASIS MODEL RESPONSIVE WEB DESIGN UNTUK SISWA SMA
Raden Dimas Yusuf Septian Putra, Susilaningsih, Zainul Abidin
Jurusan Teknologi Pendidikan, Fakultas Ilmu Pendidikan, Universitas Negeri Malang Jl. Semarang 5 Malang 65145-0341-575700
dimazp805@gmail.com

## Abstrak
Pemanfaatan teknologi internet telah merambah ke dunia pendidikan. Siswa era  kini  mampu  mengakses website melalui  perangkat  seluler  mereka kapanpun dan dimanapun. Desain e-learning website yang baik memberikan dampak  yang  signifikan  bagi  pengalaman  belajar  siswa.  Penelitian  ini menggunakan metode penelitian dan pengembangan. Tujuan penelitian ini adalah menghasilkan media website e-learning berbasis model responsive web design untuk siswa kelas X IPS di SMAN 4 Pasuruan. Konten materi yang digunakan dalam mengembangkan website e-learning ini adalah mata pelajaran  Geografi  materi  atmosfer  dan  cuaca  iklim.  Media  ini dikembangkan menggunakan model web based instructional design milik Davidson-Shiver,  Rasmussen  &  Lowenthal. Media  website e-learning ini dinyatakan valid apabila digunakan dalam proses pembelajaran. Rata-rata kevalidan  dari  ahli  materi  sebesar  3,35  dan  rata-rata  kevalidan  dari  ahli media sebesar 3,57.

## Abstract
Utilization of internet technology has penetrated to the world of education. Today's students can access the e-learning website through their cell phones anytime, anywhere. Good e-learning web design has a significant impact on student learning experiences. In this study using research and development methods. The  purpose  of this study  is to produce e-learning website media based on responsive web design models for students of class X IPS at SMAN 4 Pasuruan. The material content used in developing this e-learning website is the subject of Geography, atmospheric and climate weather material. This media was developed using the Davidson-Shiver and Rasmussen web-based learning design model. This e-learning website media is declared valid if it is used in the learning process. The average validity of material expert was 3.35 and the average validity of media expert was 3.57.

## Article History
Received:16-04-2020
Accepted: 30-05-2020
Published: 17-08-2020

## Keywords
Pengembangan Media
Web, E-Learning, Responsive Web Design

## PENDAHULUAN
Seiring dengan perkembangan waktu, penyebaran informasi melalui internet merupakan cara yang terbilang efektif dan efisien. Penggunaan internet telah merambah ke dunia pendidikan. Contoh penggunaan internet di bidang pendidikan adalah akses pada e-learning website . E-learning merupakan jenis sistem belajar mengajar jarak jauh yang memungkinkan penyampaian bahan ajar secara cepat dan tepat melalui media internet kepada siswa (Songko & Wahyono, 2014). Di dalam e-learning terdapat berbagai  fasilitas  yang  dapat  membantu  guru  untuk  memberikan  materi,  mengelola  tugas,  dan memberikan tes online (Songko & Wahyono, 2014). Hal ini membuat e-learning menjadi salah satu cara yang efektif dan efisien dalam mendukung kegiatan belajar mengajar di era kini.
Pemanfaatan akses e-learning telah dapat digunakan di semua jenis perangkat seperti komputer (desktop/laptop), tablet , perangkat seluler pintar, netbooks dan berbagai perangkat komputasi lainnya (Hussain, 2015). Dari berbagai perangkat tersebut, tantangan pengembang website adalah menyajikan e-learning website yang  otomatis  mampu  merespon  preferensi  pengguna  pada  ukuran  tata  letak perangkat atau relosusi layar perangkat (Putra, 2017). Penyesuaian tersebut dapat berupa pada ukuran font,  ukuran  gambar  dan  komponen  lainnya  tanpa  harus  melakukan horizontal  scrolling termasuk kemampuan scripting -nya (Novianty, 2017).
Salah satu solusi yang dapat diterapkan dalam mengembangkan e-learning website yang adaptif adalah responsive  web  design .  Nama  dari “Responsive  Web  Design” sendiri  ditemukan  oleh  Ethan Marcotte yang dikenal sebagai pengembang dan desainer web pada tahun 2010 (Harb, Kapellari, Luong, &  Spot,  2011).  Sejak  tahun  2013, responsive  web  design sering  digunakan  karena  semakin  banyak pengelola website ingin  menawarkan  pengalaman  yang  menyenangkan  bagi  pengguna,  saat  mereka menggunakan  berbagai  perangkat  internet  dalam  mengakses website tersebut  (Giurgiu  &  Gligorea, 2017).
Responsive web design adalah sekumpulan teknik yang digunakan untuk mengembangkan satu website tunggal  yang  menyesuaikan  dirinya  pada  perangkat  yang  berbeda  dan  mampu  membentuk kembali tergantung pada berbagai ukuran layar, resolusi dan orientasi dari perangkat terbesar seperti televisi pintar untuk menjadi yang terkecil seperti perangkat seluler pintar (Zeng, Gao, & Wu, 2014). Nama lain dari responsive web design adalah adaptive web design yang mengacu pada kemampuannya beradaptasi dengan tampilan perangkat yang berbeda (Bader & Hammouri, 2016).
Sebelumnya,  pengguna  merasakan  ketidaknyamanan  ketika  mengakses  halaman website melalui  perangkat  seluler  (Ridhoni,  2018).  Berawal  dari  itulah,  konsep responsive  web  design lahir dengan  tujuan  untuk  memastikan  informasi website yang  akan  disampaikan  berjalan  dengan  baik terlepas dari perangkat apa yang digunakan (Hidayat, Utomo, & Djohan, 2016). Selain memberikan kenyamanan kepada pengguna, responsive web design juga membagikan informasi secara utuh. Adanya teknologi ini maka masalah-masalah seperti, tulisan-tulisan di halaman web terlalu kecil karena di- zoom - in,  tautan  sulit  di- klik karena  terlalu  kecil  menjadi  tidak  terjadi  lagi  (Shandi,  2017).  Dengan  desain website semacam ini, pengguna mendapatkan konten yang sama dan pengalaman yang serupa ketika mengakses website di berbagai perangkat (Casalánguida & Durán, 2015).
Ada tiga fitur teknis yang dimiliki oleh responsive web design (Baturayak & Birtaneb, 2013): (i) media queries dan screen resolutions , yaitu pengembang harus menggunakan HTML dan CSS3 yang berbeda  berdasarkan  fitur  perangkat,  sehingga  tampilan  konten website disesuaikan  dengan  resolusi layar; (ii) fluid grid layouts , yaitu persentasi proporsi semua elemen pada website mampu berubah secara sempurna ( fluid ) berbasis grid , seperti ketika website -nya berubah ketika diskalakan ke resolusi yang sangat rendah; (iii) flexible images dan media , yaitu website secara otomatis dapat mengubah tata letak halaman, mengubah ukuran gambar atau memotongnya secara proporsional.
Responsive web design yang baik terdiri atas beberapa prinsip yang harus diperhatikan (Beaird, & George, 2014) di antaranya adalah layout dan composition , color , texture , typography , dan imagery .
294 JKTP Jurnal Kajian Teknologi Pendidikan Vol.3, No.3, Agustus 2020, Hal. 292-302
Tampilan web yang  menarik  bertujuan  agar  pengguna  akan  merasa  senang  dengan website yang memasukkan  unsur  desain  tersebut  ke  dalam  konten,  sehingga  informasi  di  dalamnya  dapat tersampaikan  (Kuswanto,  2017).  Menurut  Beaird  &  George  (2014)  terdapat  dua  sudut  pandang pengguna dalam menentukan baik atau buruk sebuah website yaitu: (i) sudut pandang kegunaan, yang berfokus pada fungsi dan penyajian informasi yang efektif dan efisien; dan (ii) sudut pandang estetika, meliputi presentasi, animasi, dan grafis yang bagus.
Menurut Almeida & Monteiro (2017), pembuatan responsive web design meliputi kegiatan: (i) menyesuaikan  tata  letak  halaman  dengan  resolusi  perangkat;  (ii)  mengubah  ukuran  gambar  secara otomatis agar sesuai layar, dan menyembunyikan elemen yang tidak perlu ditampilkan diperangkat layar kecil; (iii) menyesuaikan ukuran tombol dan tautan dimana tempat mouse pointer digantikan menjadi jari pengguna pada antarmuka layar sentuh; (iv) menggunakan fitur cerdas pada perangkat seluler seperti geo-lokasi, dan kemudahan mengubah orientasi tampilan konten mode lanskap atau potret.
Permasalahan  yang  terjadi  di  SMAN  4  Pasuruan,  yaitu  penggunaan  metode  pembelajaran tradisional dimana bahan ajar disampaikan melalui lisan dan non lisan masih menjadi kegiatan yang umum  terjadi.  Pemanfaatan  komputer  dan  alat  multimedia  lainnya  sudah  jarang  digunakan  dalam kegiatan pembelajaran sejak  mata pelajaran TIK dihapus. Kurangnya interaksi guru dan murid yang harus saling tatap muka, sehingga menyebabkan murid kesulitan memahami mata pelajaran, terutama mata pelajaran yang mengutamakan kognitif yang terstruktur yaitu mata pelajaran Geografi pada sub bab materi atmosfer dan cuaca/iklim, serta proses belajar mengajar yang dibatasi oleh waktu untuk setiap pertemuan  antara  guru  dan  murid.  Dengan  kondisi  yang  ada  seperti  itu,  maka  SMAN  4  Pasuruan membutuhkan sebuah media yang mampu mendukung proses belajar mengajar di luar jam kelas, serta melatih siswa untuk lebih mandiri dengan metode pembelajaran yang efektif dan efisien.
Penelitian yang berkaitan dengan pengembangan dan pemanfaatan e-learning website dilakukan oleh Ariantoro, Pamuji & Solikin (2019) yaitu menghasilkan modul digital pada STIK Bina Husada berbasis web  responsive untuk  menunjang  dalam  proses  belajar  mengajar,  yang  dilengkapi  dengan deskripsi, capaian mata kuliah, pokok bahasan dan referensi. Penelitian lain dari Songko & Wahyono (2014)  adalah  merancang  aplikasi  pembelajaran  berbasis responsive  web  design pada  Universitas Tadulako yang digunakan dalam membantu proses belajar mengajar ketika dosen tidak dapat mengajar di dalam kelas.
Selanjutnya penelitian dari Hidayat, Utomo & Djohan (2016) yang mengembangkan rancangan web yang responsif dalam perancangan sistem modul online adaptif, menunjukkan hasil fungsionalitas sistem dapat berjalan dengan baik di berbagai perangkat dan 90% efektif membantu pembelajaran siswa. Ramadhan  (2019)  dalam  penelitiannya  menghasilkan  media  pembelajaran responsive website kimia dengan  menggunakan  metode  4-D  (Four-D)  dengan  hasil  keseluruhan  mendapatkan  penilaian berkategori  sangat  baik  dari  ahli  media,  guru  kimia,  dan  siswa  kelas  XII  MIPA,  serta  penilaian berkategori baik dari ahli materi.
Melakukan  kegiatan  belajar  mengajar  dengan  menerapkan responsive  web  design memungkinkan siswa mendapatkan pengalaman mengakses e-learning website yang tampak modern untuk  mencapai  pengalaman  pengguna  yang  optimal.  Hal  ini  mampu  membantu  siswa  dalam meningkatkan  pemahaman  terhadap  materi  yang  diberikan.  Merancang  kurikulum  yang  terintegrasi dengan responsive web design dapat menjadi tantangan yang berarti ketika menargetkan siswa dengan latar  belakang  komputasi  yang  beragam  (Jin,  2017). Penelitian  ini  bertujuan  untuk  mengembangkan media e - learning website model responsive  web  design untuk  meningkatkan  pembelajaran  siswa menjadi lebih baik.

## METODE
Model  pengembangan  yang  digunakan  dalam  penelitian  ini  adalah  model web  based instructional design milik Davidson-Shiver, Rasmussen, & Lowenthal (2006). Metode ini memberikan
Putra – Pengembangan Media Website... 295 pendekatan dalam pengembangan website yang cukup kompleks namun tetap sistematis dan sekuensial. Terdapat lima tahapan pengembangan, yaitu: (i) analysis stage ; (ii) evaluation planning , (iii) concurrent design ;  (iv) full  implementation ;  (v) summative  evaluation .  Namun  dalam  penelitian  ini  hanya diterapkan sampai tahap ketiga dan terbatas pada pengembangan materi atmosfer dan cuaca/iklim mata pelajaran Geografi kelas X SMA. Pada tahap pengujian hanya dilakukan oleh ahli materi dan ahli media.
Gambar 1. Model web based instructional design milik Davidson-Shiver, Rasmussen & Lowenthal (2006)

## Analysis Stage
Pada  tahap  ini  terdapat  dua  analisis  yaitu:  (i) Problem  Analysis dan;  (ii) Instructional Component Analysis . Tujuan dari tahap problem analysis adalah menyelidiki masalah pembelajaran dan memberikan solusi. Kegiatan yang dilakukan adalah wawancara bersama guru dan kepala sekolah, serta observasi ke kelas X IPS 4 terkait pembelajaran. Lalu tujuan dari tahap instructional component analysis adalah menemukan peran dari setiap komponen pembelajaran di dalam proses pembelajaran. Kegiatan yang  dilakukan  dalam  proses  ini  antara  lain:  (i)  analisis  tujuan  pembelajaran;  (ii)  analisis  konteks pembelajaran; (iii) analisis pebelajar atau siswa; dan (iv) analisis konten pembelajaran.

## Evaluation Planning
Evaluasi sangat dibutuhkan untuk menilai bagaimana kualitas dan peningkatan kegunaan dari teknologi baru dari sisi pengguna (Wijaya, 2018). Penelitian ini hanya melakukan evaluasi pada ahli materi  dan  ahli  media,  yang  disebut  uji  validasi.  Instrumen  evaluasi  formatif  dibentuk  sebagai pembenahan umum pada saat proses pengembangan media pembelajaran dilaksanakan. Instrumen yang digunakan berupa angket jawaban tertutup dengan skala likert empat kategori jawaban. Ada dua macam instrumen  yang  digunakan  yaitu  instrumen  untuk  ahli  materi  dan  instrumen  untuk  ahli  media. Perancangan aspek instrumen ahli materi meliputi: (i) kesesuaian materi dengan kurikulum, sebanyak 3 item  soal;  (ii)  keterkaitan  materi  dengan  kehidupan,  sebanyak  4  item  soal;  (iii)  kesesuaian  materi terhadap media, sebanyak  6 item soal; dan (iv) penyajian materi, sebanyak 4 item soal. Selanjutnya perancangan aspek instrumen ahli media meliputi: (i) kemudahan pengoperasian, sebanyak 7 item soal; (ii) kemenarikan media, sebanyak 7 item soal; (iii) kelengkapan, sebanyak 7 item soal; (iv) kualitas, sebanyak 3 item soal; (v) kesesuaian, sebanyak 2 item soal.

## 296 JKTP Jurnal Kajian Teknologi Pendidikan Vol.3, No.3, Agustus 2020, Hal. 292-302

## Concurrent Design Stage
Tahap ini adalah desain pengembangan dan evaluasi media serta materi yang dikembangkan. Tahap concurrent design menggabungkan proses desain, pengembangan, dan evaluasi. Ada empat tahap kegiatan yang dilakukan, diantaranya: (i) preplanning activities ; (ii) design process ; (iii) development process ;  dan  (iv) initial  implementation . Preplanning  activities berisi  kegiatan  menyusun  jadwal perancangan,  analisis  permasalahan  dan  komponen  pembelajaran,  perancangan  media,  pelaksanaan pengembangan  media,  penyusunan  materi  dalam  media  yang  dikembangkan. Design  process berisi tentang  mengembangkan web dengan  mendesain  kebutuhan  di  dalamnya  yaitu  media,  materi,  dan metode  pembelajaran. Development  process adalah  proses  pengembangan  media  web  menggunakan software Adobe After Effects, Adobe Flash Professional dan platform Wix.com. Initial implementation dilakukan dengan uji validasi untuk mengukur tingkat kelayakan web .
Uji validasi dilakukan oleh ahli materi dan ahli media. Hasil dari uji validasi tersebut diperoleh dua  jenis  data,  yaitu  data  kuantitatif  dan  data  kualitatif.  Data  kuantitatif  berasal  dari  hasil  angket, sedangkan  data  kualitatif  berasal  dari  tanggapan  dan  saran.  Adapun  perumusan  skor  berasal  dari perhitungan rata-rata hasil yang diperoleh. Data kualitatif diperoleh dari tanggapan dan saran dari ahli media dan ahli materi yang digunakan sebagai bahan untuk melakukan revisi.
Tabel 1. Kategori Tingkat Kevalidan Rata-rata Kategori 3 ≤ Rata-rata hasil yang diperoleh  < 4 Sangat Valid 2 ≤ Rata-rata hasil yang diperoleh  < 3 Valid 1 ≤ Rata-rata hasil yang diperoleh  < 2 Kurang Valid 0 ≤ Rata-rata hasil yang diperoleh  < 1 Tidak Valid
(diadaptasi dari Amri & Syuhendri, 2015)
Tabel 2. Interpretasi Kategori Penilaian Penilaian Interpretasi Sangat Valid Ahli materi dan ahli media menyatakan bahwa media sangat baik diterapkan dalam proses pembelajaran. Valid Ahli materi dan ahli media menyatakan bahwa media baik diterapkan dalam proses pembelajaran. Kurang Valid Ahli materi dan ahli media menyatakan bahwa media kurang baik diterapkan dalam proses pembelajaran. Tidak Valid Ahli materi dan ahli media menyatakan bahwa media tidak baik diterapkan dalam proses pembelajaran. (diadaptasi dari Prasetyo, 2016)

## HASIL
E-learning website berbasis responsive web design yang dikembangkan berisi materi, tugas, kuis, pengantar guru virtual, tautan untuk mengunduh e-book Geografi. Adapun fitur pada materi berisi animasi dan simulasi pembelajaran. Website yang dikembangkan memiliki tampilan antarmuka yang berbeda apabila diakses pada desktop/laptop dan pada perangkat seluler.
Gambar 2. Tampilan antarmuka web pada desktop/laptop
Gambar 3. Tampilan antarmuka web pada perangkat seluler
Data Validasi Ahli Materi

## Gambar 4. Grafik hasil validasi ahli materi
Gambar 4 menunjukkan hasil yang diperoleh dari validasi ahli materi dengan hasil penilaian: (i)  rata-rata  3,67  untuk  aspek  kesesuaian  materi  dengan  kurikulum;  (ii)  rata-rata  3,25  untuk  aspek keterkaitan materi dengan kehidupan; (iii) rata-rata 3,17 untuk aspek kesesuaian materi terhadap media; dan (iv) rata-rata 3,5 untuk aspek penyajian materi. Jumlah item soal pada angket yang diisi oleh ahli materi sebanyak 17 item. Hasil keseluruhan dari ahli materi diperoleh nilai rata-rata sebesar 3,35 dari total skor  rata-rata ideal 4,00.  Hal ini  dapat dinyatakan  bahwa  penggunaan  materi dalam e-learning website berbasis responsive web design adalah sangat valid dan sangat layak digunakan. Adapun saran yang diberikan ahli materi adalah memperbaiki gambar yang kurang jelas.

## Data Validasi Ahli Media
Sementara  itu,  gambar  5 menunjukkan  hasil  yang  diperoleh  dari  validasi  ahli media  dengan hasil  penilaian: (i)  rata-rata  3,0 untuk  aspek kemudahan  pengoperasian ;  (ii)  rata-rata 3,71 untuk  aspek kemenarikan  media ;  (iii)  rata-rata  3,86  untuk  aspek  kelengkapan;  dan  (iv)  rata-rata  3,67  untuk  aspek kualitas; (v) rata-rata 4,0 untuk aspek kesesuaian . Jumlah item soal pada angket yang diisi oleh ahli media sebanyak 26 item. Hasil keseluruhan dari ahli media diperoleh nilai rata-rata 3,57 dari total skor rata- rata  ideal  4,00.  Hal  ini  dapat  disimpulkan  bahwa  pengembangan  media  sebagai e-learning  website berbasis responsive web design adalah sangat valid dan sangat layak digunakan. Adapun saran yang diberikan ahli media adalah pada home perlu mencantumkan siapa target pengguna produk media.
3,67 3,25 3,17 3,50 4,00 4,00
4,00 4,00 0,00 1,00 2,00 3,00 4,00 5,00 Kesesuaian dengan kurikulum
Keterkaitan dengan kehidupan
Kesesuaian terhadap media Penyajian materi
R ata -r ata Aspek

## Hasil Uji Validasi dengan Ahli Materi
Rata-rata skor yang diperoleh
Rata-rata skor ideal
Gambar 5. Grafik hasil validasi ahli media

## PEMBAHASAN
Pada umumnya, mengakses halaman e-learning website melalui perangkat seluler akan tampak berbeda  secara  tampilan  dengan  mengakses  melalui  desktop/laptop.  Penyebabnya  adalah  ukuran resolusi layar kedua jenis perangkat tersebut berbeda. Banyak halaman website masih menerapkan fix- width design atau  belum  dapat  menyesuaikan  ukuran  layar perangkat  pengguna,  sehingga  pengguna harus  mengatur  ukuran  halaman website (Turan,  & Sahin,  2017).  Salah  satu  solusi untuk  mengatasi tampilan web khususnya e-learning website adalah Responsive web design . Pengembangan responsive web design saat ini telah mendapatkan dukungan dari berbagai pihak termasuk di bidang pendidikan untuk meningkatkan desain web pada perangkat seluler (Jin, 2017).
Penggunaan e-learning  website memungkinkan  penciptaan  lingkungan  belajar  berbasis teknologi yang mampu menyajikan materi dalam beragam format seperti teks, data, audio, video, dan animasi (Parumbuan, 2016). E-learning website berbasis responsive web design yang dikembangkan dalam penelitian ini berdasarkan permasalahan dalam proses pembelajaran yang terjadi pada kelas X SMAN 4 Pasuruan. Minimnya waktu dalam melakukan pembelajaran tatap muka di kelas, menyebabkan siswa  kesulitan  memahami  materi  Geografi  yang  menitikberatkan  pada  penguasaan  kognitif.  Siswa kurang  aktif  untuk  mengikuti pembelajaran  yang  hanya  menggunakan  buku  berisi  gambar  dan  teks. Selain itu, belum ada media e-learning yang dapat mengakomodasi kegiatan pembelajaran Geografi di sekolah tersebut.
Permasalahan yang ditemukan dalam penelitian Sofia (2016) tentang pemanfaatan e-learning , yaitu tidak banyak lembaga pendidikan memanfaatkan e-learning dengan efektif. Faktor penyebabnya yaitu  terletak  pada:  (i)  pembelajar  yang  tidak  menerapkan  kontrol  belajar;  (ii)  pebelajar  tidak  aktif terlibat dalam aktivitas pembelajaran, dan (iii) penyajian konten materi kurang menarik. Hal tersebut melandasi  pengembangan e-learning website  dalam  penelitian  ini  yaitu  selain  dapat  menyampaikan materi,  siswa  juga  dapat  berperan  aktif  dalam  menganalisis  dan  membagikan  kembali  materi pembelajaran  yang  diberikan.  Pengembangan  pembelajaran  berbentuk e-learning  website dilakukan untuk memudahkan pebelajar mencari, mengolah dan mengonstruksi pengetahuan yang berakibat pada tercapainya tujuan belajar dengan optimal (Risdiyanto, 2018).
Shishkovskaya,  Bakalo,  &  Grigoryev  (2015)  menjabarkan  karakteristik e-learning yaitu integritas,  fleksibilitas,  komunikasi  dengan  ruang  yang  tidak  terbatas,  dan  dapat  digunakan  secara asyncronus .  Pengembangan e-learning website ini  mengusung  metode  pembelajaran asyncronus learning . Asyncronus learning yaitu siswa mendapatkan keleluasaan dalam mengakses materi belajar kapanpun tanpa harus berinteraksi langsung dengan guru (Hasibuan & Meitro, 2014). Apabila siswa memiliki pertanyaan perihal materi yang sedang dipelajari, guru tetap dapat menjawab secara online pertanyaan yang diajukan segera setelah siswa mengajukan pertanyaan (Yusuf, 2018).
3,00 3,71 3,86 3,67 4,00 4,00 4,00 4,00 4,00 4,00
- 1,00 2,00 3,00 4,00 5,00 Kemudahan pengoperasian kemenarikan media Kelengkapan Kualitas Kesesuaian R ata -r ata Aspek

## Hasil Uji Validasi dengan Ahli Media
Rata-rata skor yang diperoleh
Rata-rata skor ideal
Pemecahan  masalah  dalam  pembelajaran  dengan  memilih  media  pembelajaran,  harus diintegrasikan dan dapat berinteraksi pada berbagai komponen sumber belajar yang terkait dan sesuai dengan karakteristik pebelajar yaitu siswa dengan pendekatan sistem yang dipilih (Abidin, 2017). Di samping  dapat  mempermudah  dalam  penyampaian  materi, e-learning website sebagai  media  yang dikembangkan harus menyesuaikan karakteristik sasaran yaitu siswa kelas X SMA yang masih remaja. Karakteristik  pengguna  tersebut  dapat  berupa  tingkat  perkembangan  psikologi,  gaya  belajar, kemampuan dasar, dan kebiasaan siswa (Sanjaya, 2012).
Analisis  terhadap  tingkat  perkembangan  psikologi  siswa  adalah  mereka  kesulitan  dalam memahami istilah asing atau terminologi pada buku dan dari penjelasan guru. Hal ini sesuai pada temuan penelitian milik Awang (2015) yaitu terlalu banyak istilah asing dalam  materi mengakibatkan siswa terkesan mau tidak mau harus menghafalkan materi. Analisis terhadap kemampuan dasar siswa yaitu siswa mampu mengoperasikan berbagai perangkat internet dan aktif menjelajah internet. Kemkominfo (2014) menyebutkan bahwa pengguna internet di Indonesia mencapai 82 juta dan 80 persen di antaranya adalah remaja berusia 15-19 tahun. Fakta tersebut menunjukkan bahwa remaja SMA sederajat memiliki kemampuan mengakses internet terutama melakukan pencarian informasi terkait tugas akademik.
Selanjutnya  itu  analisis  terhadap  gaya  belajar  siswa, yaitu  para  siswa  dengan  berbagai  gaya belajar menunjukkan ketertarikan yang sama terhadap simulasi animasi dan video pembelajaran. Hasil penelitian  dari  Puspitasari  (2016)  menyebutkan  bahwa  penggunaan  simulasi  animasi  dapat meningkatkan  hasil  belajar  dibandingkan  penggunaan  video  pembelajaran  dengan  dibuktikan  pada perolehan  t-hitung  sebesar  7,564  dengan  t-tabel  2,00.  Penerapan  media  simulasi  animasi  dan  video pembelajaran  dapat  meningkatkan  hasil  belajar  siswa  (Puspitasari,  2016).  Sementara  itu  analisis terhadap kebiasaan siswa terkait pada penggunaan internet, yaitu umumnya siswa menggunakan internet untuk mengakses informasi, hiburan, dan berinteraksi sosial. Berdasarkan temuan permasalahan pada penelitian A’yuni (2015) disebutkan bahwa kalangan remaja lebih banyak memanfaatkan internet untuk jejaring sosial, serta kurang menggali untuk dimanfaatkan semaksimal mungkin dalam meningkatkan kemampuan kognitif dan psikomotornya.

## Kajian Produk
Produk yang dihasilkan dalam penelitian ini adalah e-learning website berbasis responsive web design yang valid diterapkan dalam proses pembelajaran.  Dalam konteks pemilihan materi dalam e- learning  website berbasis responsive  web  design ,  ahli  materi  menilai  bahwa  penyajian  materi  telah sesuai  dengan  kurikulum  yang  berlaku,  materi  memiliki  keterkaitan  dengan  kehidupan  sehari-hari, sesuai apabila materi diterapkan dalam media web , memiliki kejelasan dalam hal penyajian materi.
Banyak  penelitian  yang  memuat  tentang  pemanfaatan e-learning website yang  dapat memberikan  dampak  pada  peningkatan  hasil  belajar  siswa.  Salah  satu  hasil  penelitian  tentang pengembangan web yaitu  oleh Kusumaningrum  (2016),  yang  menyimpulkan  bahwa  75% responden menyatakan bahwa sistem web tersebut dapat meningkatkan kualitas belajar.
Sementara itu ahli media menilai bahwa pada segi teknis, media web mudah dioperasikan dan kualitas elemen pendukung web baik. Pada segi desain, web dan pemilihan elemen yang mendukungnya tergolong  menarik.  Selanjutnya  pada  segi  pengguna,  web  yang  dikembangkan  telah  sesuai  untuk ditujukkan pada sasaran serta dapat mendukung dalam penyampaian informasi. Ini mengartikan bahwa web yang  dikembangkan  mampu  mengakomodasi  pembelajaran  pada  pengguna  yaitu  siswa.  Hal  ini sejalan  dengan  pernyataan  Melani  (2019)  dalam  penelitiannya  bahwa web responsive sangat menguntungkan  mahasiswa karena dapat diakses melalui perangkat seluler, sehingga mempermudah mahasiswa.

## Analisis SWOT
300 JKTP Jurnal Kajian Teknologi Pendidikan Vol.3, No.3, Agustus 2020, Hal. 292-302
Pemanfaatan e-learning website berbasis responsive web design dapat dilakukan secara mandiri oleh siswa dengan leluasa. Desain tampilan yang menarik baik pada antarmuka desktop/laptop maupun antarmuka perangkat seluler dapat mempermudah penguasaan materi atmosfer dan cuaca/iklim. Potensi pengembangan e-learning website berdasarkan analisis SWOT (Rangkuti, 1998) didapatkan dari hasil penilaian ahli materi dan ahli media. Adapun analisis SWOT adalah sebagai berikut:
Analisis strength yaitu mengamati kondisi kekuatan yang dimiliki oleh e-learning website yang dikembangkan di antaranya: (i) tidak banyak e-learning website yang menggunakan model responsive web design ; (ii) materi yang terdapat dalam e-learning website sesuai dengan kurikulum; (iii) materi disajikan  melalui  visual  yang  menarik;  (iv)  menggunakan  bahasa  komunikatif  untuk  memperlancar pemahaman siswa; (v) penggunaan teks, gambar, video, animasi, simulasi, komposisi warna sudah baik dan sesuai; (vi) terdapat guru virtual sehingga berbeda dengan media web pembelajaran lainnya; (vii) pengoperasian hanya melalui peramban tanpa aplikasi tambahan; dan (viii) tersedia kuis interaktif.
Sedangkan analisis weakness yaitu kondisi kelemahan yang dimiliki e-learning website yang dikembangkan diantaranya yaitu: (i) materi pada responsive web design belum memberikan contoh- contoh berkaitan dengan materi terapan; (ii) perlu adanya jaringan internet dalam mengakses; (iii) belum adanya akses login khusus untuk guest beberapa siswa; dan (iv) untuk materi simulasi perlu adanya plugin Flash Player pada peramban.
Sementara  itu,  analisis opportunity yaitu  mengamati  kondisi  peluang  yang  dimiliki  oleh e- learning  website yang  dikembangkan  sebagai  berikut:  (i)  melalui responsive  web  design sebagai subtitusi  dapat  memberikan  pengalaman  baru  dalam  pembelajaran;  (ii)  guru  dan  siswa  memiliki kemampuan  dasar  pengoperasian  desktop/laptop  dan perangkat  seluler;  (iii)  pemanfaatan responsive web  design dapat  dilakukan  saat  jam  pelajaran  maupun  di  luar  jam  pelajaran;  (iv)  pengalaman penggunaan lebih nyaman tanpa perlu memperbesar atau memperkecil ketika diakses pada perangkat seluler; dan (v) menyediakan tautan dan tombol yang besar dan ramah jari bagi pengguna perangkat seluler.
Adapun  analisis threats yaitu  mengamati  kondisi  ancaman  dari  kondisi  eksternal  yang merugikan  dari  segi  pemanfaatan e-learning antara  lain:  (i)  tidak  semua  guru  dan  siswa  memiliki komputer,  laptop  atau  perangkat  seluler;  (ii)  terkadang  guru  dan  siswa  bersikap  acuh  terhadap perkembangan  teknologi; dan  (iii)  terdapat  media  pembelajaran lain  yang  lebih  menarik  dan  mudah dalam penggunaannya.

## SIMPULAN
Perkembangan teknologi turut mempengaruhi perkembangan pada  tren desain website , salah satunya responsive web design . Hal ini juga memberikan kontribusi penting terhadap perkembangan e- learning website . Penelitian ini menghasilkan e-learning website berbasis responsive web design untuk siswa  kelas  X  di  SMAN  4  Pasuruan.  Materi  yang  dikembangkan  dalam e-learning  website adalah atmosfer dan cuaca/iklim pada mata pelajaran Geografi. Web ini dikembangkan guna membantu siswa dalam meningkatkan pemahaman terhadap materi tersebut. Hasil uji validasi oleh ahli materi dan ahli media menunjukkan bahwa e-learning website berbasis responsive web design termasuk dalam kategori sangat valid dan sangat layak untuk digunakan.

## DAFTAR RUJUKAN
A’yuni, Q. Q. (2015). Literasi digital remaja di kota Surabaya . Journal Unair. Abidin, Z. (2017). Penerapan Pemilihan Media Pembelajaran . Edcomtech Jurnal Kajian Teknologi Pendidikan, 1(1), 9-20.
Almeida, F., & Monteiro, J. (2017). The Role of Responsive Design in Web Development . Webology, 14(2).
Amri, I., & Syuhendri, K. W., (2015). P engembangan Media Pembelajaran E-Learning Berbasis Web Untuk Mata Kuliah Pendahuluan Fisika Inti . Jurnal Inovasi dan Pembelajaran Fisika, 2(1), 25-35.
Ariantoro, T. R., Pamuji, A., & Solikin, I. (2019). Aplikasi Modul Digital Berbasis Web Responsive pada STIK Bina Husada . Kumpulan Jurnal Ilmu Komputer (KLIK), 6(3), 304-316.
Awang, I. S. (2015). Kesulitan Belajar IPA Peserta Didik Sekolah Dasar . VOX EDUKASI: Jurnal Ilmiah Ilmu Pendidikan, 6(2), 108-122.
Bader, W. I., & Hammouri, A. I. (2016). Responsive Web Design Techniques . International Journal of Computer Applications, 975, 8887.
Baturayak, M. H., & Birtaneb, M. (2013). Responsive web design: a new type of design for web-based instructional content . Procedia-Social and Behavioral Sciences, 106, 2275-2279.
Beaird, J., & George, J. (2014). The Principles of Beautiful Web Design . SitePoint.
Casalánguida, H., & Durán, J. E. (2015,). User Interface Design for Responsive Web Applications. WEBIST, 104- 111.
Davidson-Shivers,  G.  V.,  Rasmussen,  K.  L.,  &  Lowenthal,  P.  R.  (2006). Web-based  Learning .  New  Jersey: Pearson Prentice Hall.
Giurgiu,  L.,  &  Gligorea,  I.  (2017). Responsive  Web  Design  Techniques .  In  International  conference KNOWLEDGE-BASED ORGANIZATION, 23(3), 37-42.
Harb, E., Kapellari, P., Luong, S., Spot, N. (2011). Responsive web design. Version of, 6 .
Hasibuan,  M.  S.,  &  Meitro.  (2014). Implementasi    Metode  Synchronous  Learning  Berbasis  LMS  Moodle . Proseding SEMBISTEK 2014 IBI Darmajaya, 728-739.
Hidayat, A., Utomo, V. G., & Djohan, H. A. (2016). Penerapan Responsive Web Design Dalam Perancangan Sistem Modul Online Adaptif . Jurnal Sistem Informasi, 12(1), 44-48.
Hussain, A., Mkpojiogu, E. O. C. (2015). The Effect of Responsive Web Design on The User Experience with Laptop and Smartphone Devices . Jurnal Teknologi (Sciences & Engineering), 77(4), 41-47.
Jin,  K.  H.  (2017). Teaching  Responsive  Web  Design  to  Novice  Learners .  In  Proceedings  of  the  18th  Annual Conference on Information Technology Education, 115-120.
Kemkominfo.  (2014). Kemkominfo:  Pengguna  Internet  di  Indonesia  Capai  82  Juta .  retrived  from https://kominfo.go.id/index.php/content/detail/3980/Kemkominfo%3A+Pengguna+Internet+di+Indonesia+ Capai+82+Juta/0/berita_satker
Kusumaningrum, R. (2016). Sistem Pembelajaran E-Learning Berbasis Web (Doctoral dissertation) Universitas Muhammadiyah Surakarta, Surakarta, Indonesia.
Kuswanto, H. (2017). Analisis Prinsip Layout and Composition pada Web Design Perusahaan PT. Bank Rakyat Indonesia, Tbk dan PT.  FIF Group berdasarkan Buku “The  Principle  of Beautifull Website Design (2nd Edition) By Jason Beaird . Jurnal Electronics, Informatics, and Vocational Education (ELINVO), 2(1), 1-7. Melani,  Y.  I.  (2019). Sistem  Pengaduan  Layanan  Akademik  Menggunakan  Responsive  Web  Design .  Jurnal Sisfokom (Sistem Informasi dan Komputer), 8(1), 39-45.
Novianty, C. (2017). Review Konsep Responsive  Design  dengan Framework  Materialize  pada Website . Jurnal Nasional Informatika dan Teknologi Jaringan, 2(1), 41-44.
Parumbuan, M. D. (2016). Pengembangan Bahan Ajar Berbasis Web untuk Matakuliah Desain Pesan . JINOTEP (Jurnal Inovasi dan Teknologi Pembelajaran), 1(4), 323-329.
Prasetyo, W. H. (2016). Pengembangan Media Pembelajaran Gambar Teknik untuk Siswa Kelas X di SMK Negeri 2 Wonosari . Jurnal Pendidikan Vokasional Teknik Mesin, 4(4), 253-260. Puspitasari,  R.  N.  (2016). Studi  Komparasi  Penggunaan  Media  Video  dan  Simulasi  Animasi  Terhadap  Hasil Belajar  Creambath  Siswa  Tata  Kecantikan  di  SMKN  3  Purworejo .  Dissertation,  Universitas  Negeri Semarang.
Putra, M. S. (2017). Perancangan Desain Website Digital Library Universitas Bina Darma dengan Menerapkan Responsive Web Desig n. Jurnal Informanika, 3(1), 29-33.
Ramadhan,  I.  A.  (2019). Pengembangan  Media  Pembelajaran  Kimia  dengan  Responsive  Website .  Journal  of Tropical Chemistry Research & Education (JTC-RE), 1 (2), 55-60
302 JKTP Jurnal Kajian Teknologi Pendidikan Vol.3, No.3, Agustus 2020, Hal. 292-302
Rangkuti, F. (1998). Analisis SWOT teknik membedah kasus bisnis . Gramedia Pustaka Utama.
Ridhoni, W. (2018). Rancang Bangun Website Responsif untuk Marketplace Online Berbasis Koperasi . PHASTI, 4(01), 25-35.
Risdiyanto, B. E. (2018). Pengembangan Media WebQuest Kewirausahaan Business Life Skills dan Analisis Swot . JKTP, 1(4), 315-320.
Sanjaya,  W. (2012). Media Komunikasi Pembelajaran . Jakarta: Kencana Prenadamedia Grup.
Shandi,  Y.  J.  (2017). Menentukan  Desain  Antarmuka  yang  Tepat untuk  Sebuah  Website  yang  Modern .  Media Informatika, 16(1), 41-46.
Shishkovskaya, J., Bakalo, D., & Grigoryev, A. (2015). EFL Teaching in the E-learning environment : updated Behavioral Sciences, 93, 677–683.
Sofia, D. A. (2016). Pengembangan Sistem Pembelajaran Berbantuan Web dengan Mengaplikasikan Strategi Self- Regulated Learning . JINOTEP (Jurnal Inovasi dan Teknologi Pembelajaran), 1(4), 292-296.
Songko,  J.  S.  K.,  &  Wahyono,  T.  W.  (2014). Perancangan  Aplikasi  Pembelajaran  Berbasis  Responsive  Web Desain Studi Kasus pada Universitas Tadulako . Universitas Kristen Satya Wacana, Salatiga, Indonesia Turan, B. O., & Sahin, K. (2017). Responsive web design and comparative analysis of development frameworks . The Turkish Online J. Des. Art Commun, 7(1), 110-121.
Wijaya, H. O. L. (2018 ). Implementasi Metode PIECES Pada Analisis Website Kantor Penanaman Modal Kota Lubuklinggau . Jurnal Sistem Informasi Musirawas (JUSIM), 3(1), 46.
Yusuf,  M.  F.  (2018). Pembelajaran  Model  Project-Based  Teaching  Practices  Berbantuan  Web  pada  Materi Perencanaan dan Pemutakhiran Jaringan . JINOTEP (Jurnal Inovasi Teknologi Pembelajaran), 5(1), 8-14. Zeng, Y., Gao, J., & Wu, C. (2014 ). Responsive web design and its use by an e-commerce website . In International Conference on Cross-Cultural Design, 509-519.