Fluid Grids- Using ems
http://alistapart.com/article/fluidgrids
This article was very useful because it went of the concepts of using ems in a grid layout. It also easily explain the target / context = result concept. This helped explain how using ems will perfectly proportion the target content to the viewpoint that is being viewed. It also explains that using a grid based system will help place your content/ text correctly throughout the webpage because everything is align to the grid. Grid based systems are important for context heavy webpages.
How to size text using ems
http://clagnut.com/blog/348/
This article helped explain more about em and how to calculate them based on the size of pixel that you are using. An important factor about this article is that it explains that pixels are okay for any other browser. But if you are using Internet Explorer then you must uses ems in order to create a responsive webpage. Internet Explorer isn't up to date like all the other browsers so it doesn't it read pixels the same. This article also talked about other elements that may use ems besides grids, images and text.
Px to Em Converter
http://clagnut.com/blog/348/
This website was basically a reference to do simple conversions from pixels to ems. This would save you time if you didn't want to go through the whole math portion. I would use this because math isn't my strong suit so if I got a number wrong it would mess up the whole thing.
Unstoppable Robot Ninja- Fluid Images
http://unstoppablerobotninja.com/entry/fluid-images
In this article the author basically trashed windows and internet explorer and how bad of a browser it is. He wants users to start using ems because browsers like these make it very hard to the user to make out the images and text because they get so small and fuzzy that you can barely read it. I was very confused by his code because it was nothing like I've seen before. I skimmed this section because I did not understand what he was trying to do in his CSS page.
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
In this article it goes over the different examples that you may see when it comes to multi-device layout patterns. The most effective way of creating fluid layouts is column based grids that will stack on top of one another to create a fluid page. Another way is called the column drop, the layout stays consistent but the breakpoints change. Personally, I think the off canvas layout gets confusing for users that may not know to switch screens by pressing one button and the layout shifter tends to move the content in strange ways. For example the sidebar will become the top navigation in the mobile view and this seems complicated and unorganized.
Responsive Patterns
http://bradfrost.github.io/this-is-responsive/patterns.html
In the last webpage I looked up was a bunch of different examples that could be used for responsive patterns. It ranges and describes all the different grids, layouts, navigation, images, text, etc. that you could think of. You can simply mimic this by going into to source code and viewing how they created this webpage.
Responsive Wireframe Sketch Sheet
White Space
.jpg)
.jpg)
Responsive Pattern
.jpg)
.jpg)
Experimental
.jpg)
No comments:
Post a Comment