In a multitude of ways, the process and strategizing of web design is similar to an architectural process. Responsive design is a set of different methods and ideas. Creative and intuitive decisions must be made by process of elimination, refinements, and the building up or down of a page when creating a web design. The world of web design is now geared toward pleasing and designing for many high profile devices and browsers today. The devices can range anywhere from Iphones to games, which is growing exceptionally. With growth comes the adaptation of the designs needed. The reasoning for that, is for a companies illustration to be as updated as possible to its viewers. Can we keep up with the high demands of this growing rate?
When designing a web site, it must be as legible and compliant as possible to navigate through for a viewer. Regardless of ones Internet exploring and researching skills, ones abilities should not be tested when a simple search or learning experience is in the works. Media queries, which is an inspirational strategy for designing a website are used to improve the layout of a responsive web design through the style sheet. For example, a style sheet is used in the iPhones layout design. The media queries are helpful for resolution, widths etc. Media queries allow you to become familiarized with the data regarding a sites uses and it’s serves in the CSS style sheet. If you were to apply a media queries with a specific width or style to a phone for instance it would look like this….
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none;
}
Some larger resolution amounts vary from 320px to 1200px, which are used in media queries.
example of resolution differences
(GNV and Partners is a successful example of a fluid grid layout and design)
example of fluid grid in the works
Responsive web design is the approach of screen size, resolution, orientation and environment the user is in and the behavior they exemplify when viewing the design. Accommodating the user from their computer to iPad for example is essential to their experience and preferences.
Also when designing a website a fluid grid design is necessary as well to properly layout a web design. Flexible images are also a key component to keep the design interesting and easy to design. A responsive web design is when you can make the browser thinner and wider and the layout adjusts itself accordingly and still fits comfortably within each other even on a phone screen.
Also, screen sizes and resolutions are crucial, especially with the various sizes of screens a designer has to work with today (iPhone screen, iPad screen, computer screen). Fluid grids are essential in the design process and with the various screen sizes “liquid layouts” are used to help work with the high number of screen resolutions. A fluid grid is used to design in terms of quantities, which allows all the elements on any size screen resize in relation to one another.
Over all, when designing a successful responsive website questions need to be asked in the process… “What are the key breakpoints? What do major templates look like at each breakpoint? What do the header and footer look like? What content appears on the homepage, various section fronts, and article page? What’s the overall look and feel? (TITO BOTTITTA)
CSS Positioning
There are five different property values starting with the default static, which is when elements are rendered in order. The second value is absolute. Absolute is when the element is positioned from the positioned element before it otherwise known as its ancestor element. Third is the fixed value that is when the element is positioned in relation to the browser window. Next comes relative and that is when an element is positioned relative to it normal or original position in the document. For instance if you add 10 pixels to the right of the element (right:10) it adds 10 pixels to the elements right position. Lastly is inherit which name kind of speaks for itself, the value of the position in inherited from the other element otherwise known as the “parent element”.
When positioning elements in your html (Hypertext Markup Language) position: static specifies the type of positioning technique used. This method allows you to place an element somewhere else in the design where it would normally not be placed.
(I.e.)
#div-1 {
position: static;
}
Positioning the element with the “relative value” can help position an element in the document with top, right, bottom and left values. For instance, you can navigate an element by adding pixel amount to the top (top: 15px) or adding to left (left: 30px) which would then move the element from its original placement to a direct one of the designers choice. It is also possible to use a negative value.
(I.e.)
#div-2 {
position: relative;
right: 25px;
left: -30px;
}
Position Absolute is when you can place it in an exaction location when completely removing it from the document then re-navigating it somewhere else. When removing an element from the document it can then reposition the other elements in neighboring div’s.
(I.e.)
#div-1a {
position: absolute;
top:0;
right:0;
width: 100px;
}
Since relative positioning is placing an element in a specific position in the document when setting it so any other elements within that positioned div would then become relative to that div. For instance, if the “div id” holds 3 div’s within it such as div a, b and c those 3 div’s would change position relative to the values of the parent div, div-1.
alexlytle 