The Current State of RWD

Kezz Bracey cites Ethan Marcotte’s now famous article: A List Apart and draws attention to the “different way of thinking” that Marcotte interjects.  Bracey not only agrees, but believes that the different way of thinking, once adapted, will enable us to continue expanding with the changing web itself. He goes so far as to define RWD as “an approach to creating websites that can respond to all known web browsing devices, with content delivery and UI interaction optimized to the greatest degree possible for all visitors.”

If the current state of the web truly depends on how we are viewing it, the question we might want to ask ourselves is, are we viewing the web and web design differently than we did, say even 2 or 3 years ago? Certainly anyone taking this class would have to agree that, almost without exception, as we have all been immersed in learning about the frameworks, tools, techniques and substantial contributions that have been and are being made in the areas of accessibility, usability, UI, and on and on, that we didn’t know it all and better yet, that it’s expanding all around us.

By definition then, we are most certainly “adapting.” And if you doubt that, please just read the posts in our discussion on gestures! How fun, how interesting, and how essential and well-placed are these gestures for our smartphone and mobile device experience.

Katie Warner’s post from http://www.lukw.com/ff/entry.asp?1071

Indeed, our Professor has guided us down the rapids of inquiry without throwing us off the raft, inviting us to research, collaborate, and interact with our discoveries. From fluid images, to grids, and media queries  to frameworks, we have been exploring the box outside of the box each of us came in with.

Just how far has Responsive Web Development come? Emerging Technologies presented us with a view from 2013 that speaks to “Promise and Limitations” and in their post, cautions those that are taking “the big leap” that “Viewing a web page designed using responsive UI on the Samsung Galaxy S4 and the 24-inch monitor will show exactly the same page view despite the difference in screen size. This is because the current state of responsive UI design takes into consideration screen resolution but not screen size or pixel density” [emphasis mine] …. but this state didn’t remain for long, and certainly does not exist anymore! (I was actually glad they left this post up as it gives an interesting perspective.)

And w3Schools weighs in with the confidence of a co-creator declaring that “Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:”

Taken from w3schools example image.

 

And without realizing it, in attempting to address the topic (the current state of RWD), I found the contrast with where we’ve been captured a better image of not only how far we’ve come, but the initiatives and frameworks being introduced almost daily even hourly as the true testament to where we are going.

This is also more social commentary than i had intended, so i apologize, but confess that i had such a good laugh at this May, 2015, very candid post from a designer/developer SitePoint member about being brought into the RWD world as he posts, ” the responsive design is usability crap; — big colorful buttons (intended for 5-year old kids?) taking over the entire screen, much too large font sizes to read normally, flat stupid looking icons, normal text menus being replaced by menu icons with fast food names” and that more and more all sites are looking alike.

Well, we know for a fact that we have moved on, if our emphasis on UI/UX has taught us anything, we have addressed each one of the charges that DaMarkov makes, and as a community we have done it both creatively and intuitively bringing a whole new world to the mobile and the desktop.  

Viva la Responsive Web!  

Wonder where we go from here?

 

 

PS i have to say that the DaMarkov blog struck quite a chord with readers and the discussion went on literally for months!

Bracey, Kezz. The State of Responsive Web Design,1 Jan 2015. Retrieved 22 Apr 2016, from EnvatoTuts+: http://webdesign.tutsplus.com/articles/the-state-of-responsive-web-design–cms-22878

DaMarkov. Responsive design has totally ruined desktop web experience (rant) , May 2015. Retrieved April 22, 2016, from SitePoint Forums: https://www.sitepoint.com/community/t/responsive-design-has-totally-ruined-desktop-web-experience-rant/189922.

Responsive Web Design (RWD): Promise and Limitations, August 5, 2013. Retrieved April 22, 2016, from Emerging Technologies Group: https://multimedia.telos.com/blog/responsive-web-design-rwd-promise-and-limitations/.

Bootstrap, front-end development

What is Bootstrap, you ask?

Sounds western doesn’t it? And the location given by one of the Bootstrap creators was San Francisco, when he signed up for Twitter back in September of 2011, and i don’t think you can get much further west than California, so maybe there was a little western influence in the naming. [4]

Speaking of Twitter, Bootstrap was created in mid-2010 and was known as Twitter Blueprint. The backstory on how it becomes open-source is best shared in their own words, “Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.”[5]

The goals of the two original developers Mark Otto and Jacob Thornton was to create a framework for consistency of design most especially for the user interface, as, up until then, their  use of libraries had “led to inconsistencies and a high maintenance burden.” [1]

Front end / Back end

So we might ask, front end – back end, what are we talking about? Let’s clarify so the significance of this is clear. In the language of the web, we have communication via the internet between clients and servers. These clients are not customers but rather the recipients of the information provided by the servers.

What has moved us into web 2.0 and with the addition of mobile devices into the so-called responsive web is the ability of having the clients (client side browser) to process information for the user rather than the user having to wait on the server to process and provide the information.

According to Mike Jewett in his blog about frontend and backend development, “Languages, frameworks, methodologies may differ, but there are two aspects of web development that will be common for all jobs: frontend and backend.” [4] So, we are addressing the front end processing for the web, which at one time was the exclusive domain of the designer. This has now changed considerably with the advent of the framework known as Bootstrap.

Frameworks

Once again SitePoint brings clarity to what could be a bit of geek-speak by explaining the changes and importance of front-end development and helps position the role of designers for the responsive web 2.0: “Responsive web design is not so hard to implement but it can be a little bit tricky to make it all work on all targeted devices. Frameworks make this job easier. They allow you to create responsive, standard-compliant websites with minimum effort while at the same time keeping everything simple and consistent. Frameworks give you a lot of benefits such as speed and simplicity, consistency across different devices . . .” [2]

Let’s have a little fun …

For those not certain what responsive design actually means, SitePoint references a site to allow you to experiment and see for yourself: “You can see just how responsive web design works at the Media Queries gallery site.” [3]  Please check it out and you can see quickly the tremendous impact of responsive web design.

And according to SitePoint, “Bootstrap is definitely the most popular and widely used framework, nowadays. It’s a beautiful, intuitive and powerful web design kit for creating cross browser, consistent and good looking interfaces. It offers many of the popular UI components with a plain-yet-elegant style, a grid system and JavaScript plugins for common scenarios.”[3]

Bootstrap is written in the language of the web

Bootstrap is written in HTML, CSS, LESS, Sass and JavaScript. It is browser based client side scripting using HTML and CSS-based design templates.[2] Bootstrap also makes use of the *GitHub repository: https://github.com/twbs/bootstrap.

*More on GitHub which, according to How-To-Geeks, is the go to place for developers: http://www.howtogeek.com/180167/htg-explains-what-is-github-and-what-do-geeks-use-it-for/

If we want to know about the forward-looking team at Bootstrap, “Originally released on Friday, August 19, 2011, we’ve since had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.” [1]
The keywords here, in this author’s opinion, are by default.

They are preparing for Web 3.0 and so are we …

 

Back to Top

References:

1. Bootstrap. About, n.d. Retrieved February 23, 2016, from https://getbootstrap.com/about/#team.
2. Bootstrap. Twitter, n.d. Retrieved February 23, 2016, from Twitter: https://twitter.com/getbootstrap.
3. Gerchev, Ivaylo. Top 10 Front-End Development Frameworks, June 16, 2013. Retrieved February 23, 2016 from SitePoint: http://www.sitepoint.com/top-10-front-end-development-frameworks/
4. Jewett, Mike. A Comparison of Frontend and Backend Web Development,  January 19, 2015. Retrieved February 23, 2016, from Bloc: https://blog.bloc.io/frontend-vs-backend-web-development/.
5. Wikipedia. Bootstrap (front-end framework), n.d. Retrieved February 23, 2016 from Wikipedia: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework).