FARKLI EKRAN ÇÖZÜNÜRLÜKLERİ İÇİN ESNEK WEB ARAYÜZ YAPILARI TASARLANMASI

Yıl 2016, Cilt: 6 Sayı: 1, 10 - 24, 31.05.2016

Veli Özcan Budak Murat Gezer

Öz

Web’in hızlı gelişimi ve sahip
olduğu esnek yapısı, bu platform üzerinde çeşitli uygulamaların ortaya
çıkmasına sebep olmaktadır. Bilgiye hızlı erişmek için en çok tercih edilen
seçeneklerden biri olan web siteleri bu uygulamalardan sadece biridir. Web siteleri
üzerindeki resim, video, yazı, vb. her türlü içerik, görsel açıdan, uygulama
içinde bulunan sayfaların arayüz yapıları sayesinde organize edilmektedir.
Web’e erişimi bulunan cihazların boyutları düşünüldüğünde, web sayfalarında
farklı çözünürlüklere yönelik ayrı tasarımlar geliştirmenin zaman ve emek
açısından büyük bir iş yükü oluşturduğu açıktır. Bu sorun, farklı cihaz
çözünürlüklerine özel arayüz yapılarının aynı anda pratik bir şekilde
tasarlanmasıyla aşılabilir. Bu amaç doğrultusunda bu çalışmada, farklı cihazlar
için arayüz yapılarını aynı anda tek ekran üzerinden oluşturabilen ve organize
edebilen bir prototip geliştirilmiştir. Bu sayede, kodlama bilgisine ihtiyaç
duymadan kolay kontrol edilebilir bir arayüz yapısı tasarlama olanağı
sunulmuştur. Diğer taraftan prototipin web uygulama geliştiricilerin kendi
sistemlerinde kullanabilecekleri bir araç olabileceğine de inanılmaktadır.

Anahtar Kelimeler

Esnek web tasarımı, Çözünürlük, Bootstrap, PHP, MySQL

DESIGNING RESPONSIVE WEB INTERFACE STRUCTURES FOR DIFFERENT SCREEN RESOLUTIONS

Öz

Rapid growth of Web and it’s
flexible structure cause that the various applications come out on this
platform. Websites which is one of the most preferred options to reach
information rapidly is just one of these applications. Every sort of content
such as picture, video and article etc. on websites are organized through the
interface structures of the pages in these applications visually. When
considering of the size of devices which have Web access, it is obvious that
developing different designs for different resolutions creates a huge workload
in terms of time and effort. This problem can be overcome practically by
creating interface structures at the same time for different device
resolutions. In accordance with this purpose in this study, a prototype has
been developed which can create and organize the interface structures at the
same time for different devices on a single screen. Thus, a posibility of
designing interface structure is provided which can be controlled easily
without any requirement coding knowledge. On the other hand, it is believed
that the prototype will be a tool which web application developers will be able
to use in their systems.

Anahtar Kelimeler

Responsive Web Design, Resolution, Bootstrap, PHP, MySQL

Kaynakça

• Ahmadi, H., ve Kong, J. (2012). User-centric adaptation of Web information for small screens. Journal of Visual Languages & Computing, 23(1), 13–28.
• Bootstrap. (2015). The world's most popular mobile-first and responsive front-end framework. http://getbootstrap.com/ adresinden 3 Eylül 2015 tarihinde alınmıştır.
• Fisch, M. (2012). Mobile-friendly sites turn visitors into customers. http://googlemobileads.blogspot.com.tr/2012/09/mobile-friendly-sites-turn-visitors.html adresinden 20 Kasım 2015 tarihinde alınmıştır.
• Google. (2016). Kırklareli Üniversitesi Google Analitik Raporları. Kırklareli: Kırklareli Üniversitesi.
• Imperavi. (2016). Kube CSS Framework. https://imperavi.com/kube/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
• Internet World Stats. (2015). Internet Usage and World Population Statistics. http://www.internetworldstats.com/stats.htm adresinden 15 Aralık 2015 tarihinde alınmıştır.
• Layoutit. (2016). Bootstrap Interface Builder. http://www.layoutit.com/ adresinden 29 Nisan 2016 tarihinde alınmıştır
• Marcotte, E. (2010). Responsive Web Design. http://alistapart.com/article/responsive-web-design adresinden 17 Aralık 2015 tarihinde alınmıştır.
• O'Reilly, T. (2005). Web 2.0: Compact Definition?. http://radar.oreilly.com/2005/10/web-20-compact-definition.html adresinden 12 Aralık 2015 tarihinde alınmıştır.
• Sharkie, C., ve Fisher, A. (2013). Jump Start Responsive Web Design. Australia: SitePoint Ltd.
• Shoelace. (2016). Visual Bootstrap 3 Grid Builder. http://shoelace.io/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
• Skeleton. (2016). Skeleton: Responsive CSS Boilerplate: http://getskeleton.com/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
• Smart Insights. (2015). Mobile Internet Trends. http://www.smartinsights.com/internet-marketing-statistics/insights-from-kpcb-us-and-global-internet-trends-2015-report/attachment/mobile-internet-trends-mary-meeker-2015-1/ adresinden 6 Kasım 2015 tarihinde alınmıştır.
• Switzer Creative. (2015). Solve your mobile woes with responsive web design. http://switzercreative.com/responsive-web-design-solve-mobile-woes/ adresinden 14 Ocak 2016 tarihinde alınmıştır.
• TUİK. (2015). Hanelerde Bilişim Teknolojileri Bulunma Oranı. Türkiye İstatistik Kurumu.
• TUİK. (2015). Hanelerde Bilişim Teknolojileri Kullanımı. Türkiye İstatistik Kurumu.
• Twitter. (2016). Twitter Q4 and Fiscal Year 2015 Shareholder Letter. San Francisco: Twitter .
• Veen, J. (2000). The Art & Science of Web Design. San Francisco: New Riders.
• W3Schools. (2015). Screen Resolution Statistics. http://www.w3schools.com/browsers/browsers_display.asp adresinden 2 Ocak 2016 tarinide alınmıştır.
• Yaml. (2016). YAML CSS Framework. http://www.yaml.de/ adresinden 29 Nisan 2016 tarihinde alınmıştır.