|
Looking back, when I first entered the realm of web design and development, everything was so simple. My toughest choice was whether to go with Flash or HTML and the difficulties of development ranged from needing to make sure your JavaScript worked in every browser to how to deal with Internet Explorer 6. A decade later, it’s a whole new ball game. A good majority of our principles are no longer viable when it comes to creating digital products in today’s environment. As professionals, we have an increasing responsibility to make sure our end users are being accommodated, regardless of what device they use to access our sites. With a new Apple products. Device hitting the market every 3 months, we’re knee deep in an ocean of dpi’s and screen resolutions, making testing on every one of them impossible. Enter responsive web design. Responsive web design is not necessarily a new phenomenon. Media queries have been around for a while, and so have smart phones. Admittedly, however, it took me a while to get on the bandwagon. I did things one way for so long, and was successful at it; I really didn’t see the need to change what I was doing. My first exposure to RWD was from a designer I was working with who marked up one of his designs to be fully responsive. I took one look and said, “There is no way I’m building the whole site like this, you’re insane!” Fast forward a few years, and now not only is every site I build responsive, but I firmly believe you MUST build 99% of websites and web apps this way. I wont go deep into the technology I use, but instead I’ll touch on the mindset and methodology that I’ve used to make this “trend” easier for me to master. Frameworks: A Love/Hate Relationship There’s a lot of talk about frameworks - good and bad. In my opinion, everyone should use a framework - at first. They are a great way to just “dive in” and get started building in a responsive manner. Without the need to know every technical detail of why your site is responsive, you can spend more effort learning the new mindset required to build sites this way. There are a lot of little things we’re used to doing that are now not really viable in a responsive environment, like using and abusing sidebars, carousels and flashy hero banners with big images. Learning how to use these features more responsibly is a key to building better sites. By using frameworks like Bootstrap or Foundation, you can spend less time developing and more time learning the consequences of feature choices. Once you’ve learned some of the caveats and difficulties in developing responsively, it’s time to ditch the frameworks. My CMS of choice for client work is Drupal, and for a while I used the Omega 3 theme as a base for my responsive builds. It was nice and got me started, but once I had my feet wet it became incredibly frustrating to use. Since it was “out of the box” and not something I had created, it increasingly fell short of what I needed it to do and made building sites actually harder in the end, rather than easier. We’ve since created our own agnostic front-end framework that can be applied to any CMS we might use, as well as our custom developed applications. It’s made all the difference in the world. Images Ah, images - or rather "Ughck. Images." - our long time friend on the web has suddenly turned on us and become our worst enemy and a responsive nightmare. Sure, you can use img {max-width: 100%; height: auto ;} but all that really does is solving the size of the image on screen. The problem is much, much deeper. As professionals, we have a responsibility to not only serve the best experience we Walletcan, but to not cost our end users money. This means not only resizing images, but serving appropriately sized images for the device the end user is using. If you’re on an iPhone, you don’t need my 1200x400 hero banner, and by serving that image, I’m not only giving you a slower experience, but I’m using a chunk of your monthly bandwidth that provides you absolutely nothing - in short I’m literally wasting your money. Unfortunately, the solution to this problem is not only a bit complicated, but it doesn’t natively exist! There’s no way to serve up different sized images based on device without some sort of JavaScript solution or paid dedicated image CDN; the browsers have yet to fully adopt a baked-in solution for this problem. There is a whole community on the w3.org site dedicated to solving our responsive image solution, and a few baby steps have been taken. In the meantime, I’ve turned to a polyfill solution, namely Picture Fill. It’s a little thick, but does what I need it to do to keep my overhead low and serve my users the correctly sized images. This is probably the largest issue as far as overhead is concerned in RWD, and I certainly agree with Dave Rupert’s sentiment - ughck, images. Planning The general agreement in the community isRWD doesn’t take THAT much more development time to pull off, which is true. Adding in some media queries and using a flexible grid system doesn’t add that much overhead to actual coding time. However, the amount of planning, thinking and strategizing required is easily double the amount of time that a non-responsive project would take. You have to consider every decision and feature and how it will impact your user's experience across mobile, tablet, laptops, desktops and everything in between. This is the most critical step to RWD in general, and the step in which our experience as web professionals matters the most. Anyone can download Bootstrap and have a responsive site up in a few hours, but to actually execute a well-thought out, conversion-driven application or site for a client takes real work and thought. We place the most emphasis on this step, and pride ourselves in well-thought out, user-experience driven solutions. If you’re reading this and you have yet to take the plunge into the world of responsive web design, I encourage you to do so, and to do so now. It is not simply a “trend” but the future of our industry, and will exist in one form or another until the internet is no more (so, forever). Drew joined Designzillas – An Orlando based Web Design Company in October 2012 after 5 years of freelancing. He is a developer who is passionate about providing the highest quality work he can. For more information, visit http://www.designzillas.com.
Related Articles -
orlando web design, web design orland, website design orlando, orlando website design,
|
