It has been three weeks of development so far on responsive web design, and it seems like progress on our group site is currently on hold. Oh sure, we've been able to implement responsive elements such as fluid grids and media specific style-sheets using media queries, but our site does not really look all that great right now. Instead of wasting time adding all sorts of responsive web elements, only to have the overall design remain a lasting issue, it seems prudent to take a step back and look at the big picture. As web design incorporates many "cool" technologies and features, it primarily hinges on having a good overall design. The design aspect of the site is what keeps the feeling of cohesion and purpose. Without a good design, or a good design plan, changing elements individually or even rearranging existing elements will not bring a site closer to a cohesive and appealing appearance.
In that light, our team has been focusing on brainstorming ideas for overall site designs and styles that would lend themselves easily to a responsive format. We want a design that doesn't "jump around" or look tacky when transitioning between viewing sizes, but which also looks engaging and purposeful. We also wanted to bring more of a relevant theme to the energy aspect of the makahiki framework. This is supposed to be a site that is related to power and energy, and something that is fun and engaging. So when you think of energy, there are two ways to go stylistically. We can either go towards the conservation aspect and have a very organic feel with lots of trees and foliage, or we can lean towards a more industrial/technical design, which is what we did. We decided that having a "Tron" feel might be the better design on two fronts. It is a very simplistic design, which incorporates a combination of black backgrounds with "lit-up" color panels and lines which give us the feeling that there is energy coursing through the site. Right now it is still in brainstorming mode, but such a design would be much easier to adapt to a grid layout than something that has a more organic feel.
Our group is still in discussion phase on how it will ultimately be implemented, but I would like the site to also have a game user interface "feel" to the navigation elements. In this, I'd like to see page links and links to widget pop-ups all collected into a control/navigation bar at the bottom of each page. We all agreed that this navigation bar should be "stuck" to the bottom so that as someone scrolls down a page it will remain in the same place on the screen so that users can always access it. We also looked at having a "menu button" for mobile devices which would cause a navigation menu to pop up on screen and allow you to jump to different sections of the site. This menu would therefore be "hidden" from view until called by the menu button, so that we don't lose valuable screen real estate on mobile phone devices.
We've made a lot of progress conceptually, but we haven't started implementation of these ideas just yet. Right now, we still need to flesh-out the ideas a bit more and have an overall consensus in the group before we move forward. Site design is a really interesting and fun process, and I'm excited to see these designs take shape!
Friday, January 27, 2012
Friday, January 20, 2012
First Crack at Responsive Web Design
I currently have a mix of elation and frustration. I recently joined a team of developers to redesign pages of a website with responsive web design. First things first, we set up our project site here at Google Project Hosting. Before you go and checkout the repository, you should know that we haven't officially started the project yet. All we have uploaded to the repository is a test page and corresponding files needed to render it locally. Once we get things finalized conceptually, we'll be removing that repository and replacing it with the entire site.
Okay, so after we got our test page uploaded we got to work on changing the design from a standard 960px resolution to one that would be responsive not only to resizing of the browser, but also to specific size of mobile media devices. Initially, we were at a bit of a loss in deciphering all the HTML and CSS code. Mainly, we had to read through and understand how the divs, or HTML body divisions, were set up. In addition, we were looking through the CSS files to see how the page styles were organized. This took a little while, but then we started to gain an understanding of the elements on the page and how they were controlled via the CSS files. The Firebug add-on for Mozilla Firefox was extremely useful and made the whole process proceed quickly and with ease.
Initially, we started by looking at tips for fluid grid design. One of the underlying techniques is to change widths of containers and elements from pixels to percentages. This had pretty amazing effects, as it allowed objects to "float" around the page and reorganize themselves to fit within the browser after its size was reduced. Unfortunately, the results were not perfect. For instance the navigation bar stayed at the same height and overlapped with other elements. That's when we decided to remove specific object heights. Instead, we decided to provide the needed spacing between objects on the page by adding margins to the top and/or bottom as needed.
After making these changes, the site behaved better, but it was still not very attractive at certain browser sizes. That's when we decided to do specific media queries which would load separate style-sheets based on browser size. We decided not to query for specific media types, although that is another valid option. At the moment, we've decided against querying specific mobile devices because we wanted the page to also adapt when people want to re-size their browser to look at other things.
We started by adding one other CSS file to override the current style-sheet when it detected a browser size that is approximate to that of a mobile phone. We quickly learned that it was easy to implement media queries, as you simply need to create specific style-sheets for each device's approximate browsing width. After that, you simply link to those style-sheets in your HTML file. You can either do the media query in the HTML file, and load a corresponding CSS file, or you can link to a CSS file that has media queries as internal elements and corresponding style coding for each element. At the time of writing this blog, I have recently discovered that one of my team members had uploaded a media-query CSS file that had attributes for several of these approximate browsing widths.
While a media-querying CSS file is sufficient to make small changes to page elements based on detected browser sizes, I believe we still need to implement separate style-sheets for each mobile device approximation. The reason I feel this way goes back to basic coding practices. Just as we do not want to have one method that contains hundreds or thousands of lines of "spaghetti code", it is much easier to maintain separate files of shorter length. That way, when maintaining or adjusting styles for specific devices we can simply go to the corresponding file, rather than having to browse many lines of code to get to a particular media query's style overrides. Furthermore, we may want to have completely different interface designs based on the size of the browser, and separate style-sheets would facilitate that better.
Overall, the project started out very well, and we are poised to move on to the next portion of the project, which would be to modify the entire site and not just one page.
At this point you may be wondering where my frustrations manifested. Well, certain elements of the page seemed to disappear, mainly some of the small navigation bar images. Also, I ran into a few problems with getting subversion mime-types to work from our project site. My goal was to be able to see the HTML page render itself straight from the repository, but it doesn't. While you can easily browse the HTML code, the page doesn't render properly when to you try to view it. There are still some issues to work out, but we've made a lot of great progress. I'm looking forward to our next step in the project!
Okay, so after we got our test page uploaded we got to work on changing the design from a standard 960px resolution to one that would be responsive not only to resizing of the browser, but also to specific size of mobile media devices. Initially, we were at a bit of a loss in deciphering all the HTML and CSS code. Mainly, we had to read through and understand how the divs, or HTML body divisions, were set up. In addition, we were looking through the CSS files to see how the page styles were organized. This took a little while, but then we started to gain an understanding of the elements on the page and how they were controlled via the CSS files. The Firebug add-on for Mozilla Firefox was extremely useful and made the whole process proceed quickly and with ease.
Initially, we started by looking at tips for fluid grid design. One of the underlying techniques is to change widths of containers and elements from pixels to percentages. This had pretty amazing effects, as it allowed objects to "float" around the page and reorganize themselves to fit within the browser after its size was reduced. Unfortunately, the results were not perfect. For instance the navigation bar stayed at the same height and overlapped with other elements. That's when we decided to remove specific object heights. Instead, we decided to provide the needed spacing between objects on the page by adding margins to the top and/or bottom as needed.
After making these changes, the site behaved better, but it was still not very attractive at certain browser sizes. That's when we decided to do specific media queries which would load separate style-sheets based on browser size. We decided not to query for specific media types, although that is another valid option. At the moment, we've decided against querying specific mobile devices because we wanted the page to also adapt when people want to re-size their browser to look at other things.
We started by adding one other CSS file to override the current style-sheet when it detected a browser size that is approximate to that of a mobile phone. We quickly learned that it was easy to implement media queries, as you simply need to create specific style-sheets for each device's approximate browsing width. After that, you simply link to those style-sheets in your HTML file. You can either do the media query in the HTML file, and load a corresponding CSS file, or you can link to a CSS file that has media queries as internal elements and corresponding style coding for each element. At the time of writing this blog, I have recently discovered that one of my team members had uploaded a media-query CSS file that had attributes for several of these approximate browsing widths.
While a media-querying CSS file is sufficient to make small changes to page elements based on detected browser sizes, I believe we still need to implement separate style-sheets for each mobile device approximation. The reason I feel this way goes back to basic coding practices. Just as we do not want to have one method that contains hundreds or thousands of lines of "spaghetti code", it is much easier to maintain separate files of shorter length. That way, when maintaining or adjusting styles for specific devices we can simply go to the corresponding file, rather than having to browse many lines of code to get to a particular media query's style overrides. Furthermore, we may want to have completely different interface designs based on the size of the browser, and separate style-sheets would facilitate that better.
Overall, the project started out very well, and we are poised to move on to the next portion of the project, which would be to modify the entire site and not just one page.
At this point you may be wondering where my frustrations manifested. Well, certain elements of the page seemed to disappear, mainly some of the small navigation bar images. Also, I ran into a few problems with getting subversion mime-types to work from our project site. My goal was to be able to see the HTML page render itself straight from the repository, but it doesn't. While you can easily browse the HTML code, the page doesn't render properly when to you try to view it. There are still some issues to work out, but we've made a lot of great progress. I'm looking forward to our next step in the project!
Friday, January 13, 2012
Responsive Web Design is the Future
When we think about how trends in technology have changed over the last few years, we usually think about mobile devices and mobile app development. More and more, we see people using Androids, iPhone, tablets, etc. Everyone knows that you can browse the web conveniently on any of these devices, so what does that mean for web based application development? It means that the future of application development is in web-based applications. Where iOS and Android developers that develop mobile apps for each device have to write code that is native to those operating systems, web-based application developers can make one product that can be used on every device! This means you can create an application that is usable on your desktop, laptop, or any device that can browse the web.
The trick to all of this is in creating responsive websites that cleanly adjust depending on the size of the browser. So when you look at the page on a desktop computer with a massive monitor, you'll perhaps see the most expanded content with multiple columns of text, images, or large movie objects. The same site viewed on a mobile device would see fewer, narrower columns, and smaller versions of the same movies or images. This is made possible by using HTML5, CSS3, and responsive designs.
HTML5 is the latest version of HTML, which is the language used to structure and present content on the web. It marks the end of an era as HTML5 allows for the use of complex media elements without the need for additional plugins like Adobe's Flash or perhaps Microsoft's Silverlight. Most new mobile devices are compatible with HTML5, which is great news because HTML5 contains markup for application programming interfaces (or APIs). This makes it easier to develop web-based applications as you no longer need to deal with stand-alone APIs.
CSS3 is the third level of Cascading Style Sheet languages and allows for the formatting and presentation of information in HTML. It allows for cross-browser compatibility as well as new features like animations and transitions. As the web evolves quickly, it became apparent that large CSS specifications were unwieldy and so CSS3 is divided into modules that can be changed and updated independently of each other. You can also do media queries which allows you to detect what kind of device is being used and allow you to adjust the style to work with those constraints in mind.
With clever use of the above technologies, and designing with responsiveness in mind, you can have cross-platform and cross-browser applications that can be used by anyone! That means you have access to the largest market-share possible, which also means more people will be using your product and hopefully making you more money.
Below are some links that I've found while doing research on this topic, may they be of great use to everyone who is interested.
HTML5:
http://www.w3schools.com/html5/html5_intro.asp
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
http://www.alistapart.com/articles/previewofhtml5/
http://www.thehtml5tutorials.com/
CSS3:
http://www.w3schools.com/cssref/default.asp
http://www.designyourway.net/blog/resources/top-100-useful-and-detailed-css3-tutorials-and-techniques/
http://blog.templatemonster.com/2011/04/08/20-css3-tutorials/
http://css3generator.com/
Responsive Web Design:
http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
http://www.elated.com/articles/responsive-web-design-demystified/
http://www.catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design
The trick to all of this is in creating responsive websites that cleanly adjust depending on the size of the browser. So when you look at the page on a desktop computer with a massive monitor, you'll perhaps see the most expanded content with multiple columns of text, images, or large movie objects. The same site viewed on a mobile device would see fewer, narrower columns, and smaller versions of the same movies or images. This is made possible by using HTML5, CSS3, and responsive designs.
HTML5 is the latest version of HTML, which is the language used to structure and present content on the web. It marks the end of an era as HTML5 allows for the use of complex media elements without the need for additional plugins like Adobe's Flash or perhaps Microsoft's Silverlight. Most new mobile devices are compatible with HTML5, which is great news because HTML5 contains markup for application programming interfaces (or APIs). This makes it easier to develop web-based applications as you no longer need to deal with stand-alone APIs.
CSS3 is the third level of Cascading Style Sheet languages and allows for the formatting and presentation of information in HTML. It allows for cross-browser compatibility as well as new features like animations and transitions. As the web evolves quickly, it became apparent that large CSS specifications were unwieldy and so CSS3 is divided into modules that can be changed and updated independently of each other. You can also do media queries which allows you to detect what kind of device is being used and allow you to adjust the style to work with those constraints in mind.
With clever use of the above technologies, and designing with responsiveness in mind, you can have cross-platform and cross-browser applications that can be used by anyone! That means you have access to the largest market-share possible, which also means more people will be using your product and hopefully making you more money.
Below are some links that I've found while doing research on this topic, may they be of great use to everyone who is interested.
HTML5:
http://www.w3schools.com/html5/html5_intro.asp
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
http://www.alistapart.com/articles/previewofhtml5/
http://www.thehtml5tutorials.com/
CSS3:
http://www.w3schools.com/cssref/default.asp
http://www.designyourway.net/blog/resources/top-100-useful-and-detailed-css3-tutorials-and-techniques/
http://blog.templatemonster.com/2011/04/08/20-css3-tutorials/
http://css3generator.com/
Responsive Web Design:
http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
http://www.elated.com/articles/responsive-web-design-demystified/
http://www.catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design
Subscribe to:
Posts (Atom)