Responsive Web Design - Website Architecture

1y ago
15 Views
2 Downloads
3.12 MB
49 Pages
Last View : 14d ago
Last Download : 2m ago
Upload by : Averie Goad
Transcription

Responsive Web DesignDesign for web content

Overview A short history of web design for media“One Web” and “Mobile First”Adding flexibility to your layoutFlexible images?Media ut”How to design websites now

History and languageIn order to fully understand the concept and principles ofresponsive web design, we need to understand the context fromwhich it emerged.A short historical overview will help, along with a description of anumber of other concepts that form a logical progressiontowards RWD.Remember, responsive design is just 11 years old and for the first20 or so years of the Web, other methods of page layout designwere employed.

The evolution of web layoutsHTML4, Tables and FramesYears ago (mid 1990’s) it was commonpractice to let content flow to the margins ofthe browser window. Most screens weren’thigh resolution, so lines of text rarelyexceeded a comfortable length The Mosaic browser with free-flowing content

The evolution of web layoutsLater (late 1990’s), as interface designbecame more complex (navigation columns!),tables or frames were used to divide andarrange the components of a page. Tableswere used because there wasn’t muchalternative and they were simple to code. InMarch 1996, Netscape Navigator introducedframes, a system where different pageelements could be marked up using differentHTML files. This seemed like a good idea atthe time. Frames were included as part of theHTML 3.0 specification by W3C.Netscape Navigator with content framesHTML Frames are obsolete

Table-based layout html head title WEB PAGE TITLE GOES HERE /title /head body style "margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;" table width "100%" style "height: 100%;" cellpadding "10" cellspacing "0" border "0" tr td colspan "2" style "height: 100px;" bgcolor "#777d6a" h1 Website Logo /h1 /td /tr tr td width "20%" valign "top" bgcolor "#999f8e" a href "#" Menu link /a br . a href "#" Menu link /a /td td width "80%" valign "top" bgcolor "#d2d8c7" h2 Page heading /h2 Here's a two column . br br The second table row . /td /tr /table /body /html HTML Table Layouts by Robert Darrell (2004)For your amusement only, a typicaltable-based layout. Notice that allstyling is done in the markup – there’sno CSS (because it didn’t exist at thetime). However, this layout is “flexible”,note the percentage values for width.

XHTML: the new craze!XHTML and CSSIn January 2000, XHTML became a W3C recommendation. Although CSS 1.0 wasrecommended back in December 1996, the first browser to fully support it (IE5 forMac) wasn’t released until March 2000, by which time, CSS2 had beenrecommended. So it wasn’t until the early 21st Century that all the tools were inplace to enable webpage layouts to be implemented in the way we do now.Through the 2000’s, computer monitors changedfrom CRTs to LCDs, became bigger, changedaspect ratio, and delivered higher resolutions.Whereas in the past, browsers (and thereforewebsites) had been viewed full-screen, theywere now viewed in resized windows.

The fixed/flexible debateUser choice or designer control?A debate about how website layouts should be constructed followed. Some (mainly graphicdesigners) said that the designer should be in control of the layout because they knew whatlooked/worked best and that layouts should be fixed width. Others took a more “user-centred”approach and argued that the user should be able to choose what width they wanted thewebpage to be and that layouts should be flexible (fluid or elastic). See The Dao of Web Design.A hybrid fluid/fixed layout became a common solution for many websitesFixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? Smashing Magazine (2009)

Complexity and divitisHow many nested divs!?Although the philosophical debate was won by those who advocated flexible design and userchoice, it soon became clear that the available tools (XHTML and CSS) were just not up to the jobof creating simple, flexible designs in all the many combinations of columns required. In fact, the3-column liquid layout became known as the “holy-grail” layout, because a good, simple solutionwas so difficult to achieve. During this same period, we saw the rise of the blog, with itsdistinctive multi-column layout. Many designers took a pragmatic view and resorted to fixedwidth designs, making sure that they worked with most desktop/laptop monitors.The Perfect 3 Column Liquid Layout (Percentage widths) by Matthew James Taylor

Design for Web ContentMEDIA TYPES AND THE MOBILE WEB

Stylesheets for Media TypesYou want a different style for printers?Media Types have been part of the CSS toolkit since CSS2. There area number of different media types, including: all, screen, andprint. Most well-designed websites will at least have a printstylesheet that removes navigation links etc. link rel "stylesheet" media "screen" href "/style/default.css" / link rel "stylesheet" media "print" href "/style/print.css " / CSS @media types by MDN

The Mobile WebYou want to view websites on your phone!?Although the Handheld media type could be used to serve a different stylesheet to handhelddevices, few designers bothered because most mobile browsers weren’t particularly capable (thehandheld media type is now deprecated). As browsers improved, developers decided to simplyscale the default stylesheet because most sites didn’t have a handheld stylesheet. Manydesigners then decided it would be a good idea to provide an alternate mobile version of theirwebsites – the mobile web was born.bbc.co.uk/bbc.co.uk/mobile/

One WebW3C Mobile Web Best PracticesOne Web means making, as far as is reasonable, the same information and servicesavailable to users irrespective of the device they are using. However, it does not meanthat exactly the same information is available in exactly the same representation acrossall devices.Opera said.One Web is the full, complete web that people access every day from their computers,their mobile devices, their home appliances, in their homes, offices and on the go —anytime, anywhere. With fundamentals, like web standards, and technical innovationssupporting widespread accessibility, people are able to access the same familiar webcontent seamlessly on any device.The “One Web” debate is now over. Does it mean exactly the same content/services for all devices/contexts ordoes it mean modified versions? What is agreed is that it doesn’t mean one website for mobile users and anotherfor desktop users.Mobile Web Best Practices 1.0 – W3C (2008)

Responsive Web DesignFlexible, Adaptive, Responsive – what does it all mean?Flexible web design means that a webpage can easily be viewed full-screen or in aresized browser window on a desktop monitor with widths being defined aspercentages. Adaptive design means that a webpage can sense the screen width andconfigure itself accordingly, using fixed breakpoints*. Responsive design combines these2 ideas, using flexibility between break points and providing a good user experience,irrespective of device/screen.Responsive Web Design - .net Magazine* Other views exist.

Mobile FirstMobile is the true web experience?Some designers are now starting to wonder whether the desktop web is really thericher experience. After all, a mobile phone can provide your geographic location, has acompass and accelerometer. Desktops can’t do that. Maybe the mobile web experienceis the richer of the two with many more possibilities for interaction and real-timeinformation gathering. Maybe websites should be designed for mobile devices first andthen gracefully degrade for desktop devices? Whatever you think, it is now the norm todesign for mobile first and then progressively enhance/degrade for desktop.Aren’t Apps better?Of course, there is still another (different) debate goingon about whether content is better served to mobiledevices using an app or a webpage. In the future, theremay be little difference if apps are built using HTML5.What is Mobile First design? - Medium

It’s an exciting time to be aweb designer! but, fortunately, most of thesedebates have now been had and weare entering a period where wepretty much know what we’re doing.

Design for Web ContentRESPONSIVE WEB DESIGN

Making webpages responsiveEthan Marcotte – it’s all his fault.In May 2010, Ethan Marcotte wrote an article for A List Apart entitledResponsive Web Design.

What are the ingredients?Standing on the shoulders of giants.Marcotte was building on ideas first proposed in John Allsopp’s seminal article The Daoof Web Design (also for A List Apart), published in April 2000. In it, Allsopp says:The control which designers know in the print medium, and often desire in the webmedium, is simply a function of the limitation of the printed page. We should embracethe fact that the web doesn’t have the same constraints, and design for this flexibility.But first, we must “accept the ebb and flow of things.”In his article, Marcotte says that he believes that now is the time to put these ideas intopractice and it is all made possible using CSS3 media queries, but that’s not the onlyingerdient. Marcotte identifies 3 Responsive Web Design by Katrien De Graeve

123A flexible grid-based layout thatuses relative sizing.Flexible images and media, throughdynamic resizing or CSS.Media queries and media querylisteners.

Flexible Gridstarget context resultWhen using percentages to specify the relative size of elements on a webpage, the percentage is always relative to the parent element, or in thiscase, the context. The context is always 1 (full-size), so if the result youare after is a column with a width of 192px set within a containingelement with a width of 960px, the formula gives us:192 960 0.2 (or 20%)However, in most cases, our result isn’t a nice round number. Let’sconsider a more realistic scenario.1

A Typical Fixed Width Blog640px320px#content {margin: 36px auto;width: 960px;}main {float: left;width: 460px;}aside {float: right;width: 320px;}When working with grids, the number of pixels in eachcolumn can be calculated and the fixed-width bloglayout above could be described with the fixed pixelvalues given in the CSS on the right.1

Pixels to Percentages66.6666666%33.3333333%#content {margin: 36px auto;width: 90%;}main {float: left;width: 66.6666666%;}aside {float: right;width: 33.3333333%;}Although the calculated percentage values look a bit ungainly,they work perfectly well – don’t be tempted to round thenumbers up or down. Now, when the browser window isresized, the columns will also resize proportionally.1

CSS Grid Layout2fr1fr#content {width: 90%;display: grid;grid-template-columns: 2fr 1fr;margin: 36px auto;}CSS Grid Layout was specifically designed to avoid all thispercentage madness by introducing the more sensiblefraction units. Now, a 2:1 ratio is easily expressed.1

Flexible ImagesYou want to display images smaller than they really are?To some extent, this technique goes against the grain. In order to conservebandwidth, images should only be displayed at their actual size. However,responsive design requires that we resize images to maintain the integrity of ourlayouts. figure img src "robot.jpg" alt "A robot" / figcaption Lo, the robot walks /figcaption /figure The markup, above will be used to describe our image and acaption. Note that there are no width or height attributes on theimage element (because we don’t need them).This markup uses the HTML5 figure and figcaption elements.2

Flexible ImagesThe CSSIn order to create a “fluid” image, we must apply the fluid bit (the percentage) tothe container. We must then use the max-width property with a value of 100%for the image so that it remains inside its container and is scaled with it as thecontainer gets larger or smaller.figure {width: 33.3333333%;}img {max-width: 100%;}Of course, things are never quite that simple – older browsersmay cause problems. See Fluid Images for more information.Fluid Images by Ethan Marcotte2

Media QueriesThe magic ingredientCSS3 media queries are the magic ingredient that make responsive web design possible.A media query is a bit like a conditional statement. If the condition is true, somethingchanges, if not, nothing changes. In the case of webpage layouts, we can make thecondition the width of the screen in pixels and then apply a rule to change the defaultlayout if it is true. For example, we could say, if the screen is less than 700px wide, thehorizontal navigation bar should be displayed vertically in a column. In such an example,700px would be the “breakpoint” where the design changes.@media screen and (min-width: 1024px){body {font-size: 120%;}}Using media queries by MDN Web DocsThis media query says: if the media is ascreen and if that screen is 1024px wide ormore, set the font-size to 120%. Elsewherein our stylesheet there may be a rule thatsays font-size: 100% as a default value.Meaning that if the screen width is lessthan 1024px, text will display at 100%.3

Up or Down?min-width or max-width?Notice that in the previous example, we used min-width to control what happens whenthe screen gets wider than a certain number of pixels. However, we can also test forwhen the screen gets smaller by using max-width. For those scaling up from a MobileFirst perspective, things will change when the min-width breakpoint is found, whereas ifyou are scaling down from a desktop design, you will want to test using max-width.Mobile first would suggest a preference for min-width.Which breakpoints should I use?Well that depends.Different devices will have set screen sizes (iPhone, iPad, Laptop, Desktop see ChrisCoyier’s Media Queries for Standard Devices), you could target those devices but whathappens when they change and resolutions increase (as they inevitably will)? Somedesigners believe that media queries should be content-focused rather than devicespecific. This debate is largely won – breakpoints should be set for content, not devices.Responsive Design: Why You’re Doing It Wrong by Joshua Johnson3

Mobile First: default layoutFor narrow viewport widths, the layout obeys the default CSS rules. No mediaquery is needed for this (mobile) view.Image width is set to 100% and they fill the entire width of the content column.

Mobile First: breakpoint 1As the viewport gets wider, there comes a point wherethe images get too big and it would make more sense forthe layout to change and display two images across thewidth of the content column. We decide this shouldhappen when the viewport gets to 700px, so we add anappropriate media query that changes the width andmargin of the images. We also introduce floats.Media queries are used to change only those CSSproperties that need to be changed.

Mobile First: breakpoint 2Eventually, even two images look too big, sowe add another breakpoint that switches thelayout to four images wide. We decide thisshould happen for viewport widths of 1200pxor greater and we add another media queryto deal with this situation. Again, we changeonly the width and margin. All the otherdefault declarations remain unchanged, andthis media query will inherit the changesmade at 700px (e.g. floats) because we areusing min-width.

Mobile First: Grid layoutCSS Grid was designed to be used for responsive layouts, soit’s no surprise that the same responsive solution asimplemented with floats on the previous slides, requiresless CSS when using Grid. In this case, we don’t even needto worry about the image sizes.

BreakpointsHow do we decide where the breakpoints should be?Breakpoints are where the design changes as the viewport gets larger (or smaller) butshould the design change for common viewport sizes (e.g. phone, tablet and desktop)or should it only change when appropriate for the content?“While it’s tempting to choose breakpoints early inthe design process, perhaps based on the dimensionsof popular devices we know we need to support, thetruth is that we shouldn’t choose breakpoints at all.Instead, we should find them, using our content as aguide.”Scott Jehl – “Responsible Responsive Design”Some commentators have a more straightforward way of expressing this principle

“Start with the small screen first, thenexpand until it looks like shit. TIME FOR ABREAKPOINT!”Stephen Hay

Dealing with IEIE 8 and lower do not understand media queriesIf (as we should) we take a “mobile first” approach to RWD, older browsers that do notunderstand media queries will see only the “core experience” designed for mobile andnot the progressively enhanced desktop version of our designs (this may be OK). Toovercome this problem, we can use a conditional comment to provide a fallback CSS filefor versions of IE before version 9 except mobile versions. !--[if (lt IE 9) & (!IEMobile)] link rel "stylesheet" href "ie.css" media "all" ![endif]--

Scaling on mobile devicesMobile device browsers assume that there is no responsive designBy default, mobile devices will scale all websites so that they fit on the device screenrather than obeying the media queries you have added to the CSS. We have to tellmobile devices to display a webpage with a scale of 1 in order for them to render ourresponsive designs as we intended them to be seen. We do this by adding a viewportmeta tag to the head of our webpage. meta name "viewport" content "width device-width, initial-scale 1"

Media Queries in ActionMedia Queries – example websites

Learning RWDStep 1Read Responsive Web Design by Ethan Marcotte.Just read it through, page by page, don't try anyof it, just read and absorb the ideas.Step 2Read and work through Implementing ResponsiveDesign by Tim Kadlec. This will give you a practicalunderstanding of the ideas.

Content-outOK, so now we look at the content first?The “content-out” or “typography-first” approaches to web design are, in some ways, areaction against the over-reliance that some designers place on grid systems and othernon-content specific approaches to webpage layout. The approach is logical because itfocusses on the formation of blocks of content rather than the page. Inadaptive/responsive pages, the page layout may change but blocks of content generallyremain intact. It makes sense therefore to design content blocks first and then decidehow they will be arranged at different page widths.The typography-out approach in the world of browser-based web design by Elliot Jay Stocks

Web design – how?I thought I knew how to design a website – now I’m not sureMoodboards, grids, wireframes, photoshop comps and now moving content blocks andresponsive pages – how the heck are we supposed to design a website, there don’tappear to be any fixed points anymore? This is a mess. Should we be designing in thebrowser now?

FluxThe only thing we can depend on is that the web design process will be different nextweek, next month and next yearAs designers, we need to experiment, find out what works best for us, share our ideaswith others and listen to what others have to say about their own approaches todesign.

As an industry, we are still learningJason Santa Maria – listen to what this man saysAt the New Adventures in Web Design 2013 conference, Jason Santa Maria gave a talkentitled The Nimble Process in which he made a number of connected statements thathint at an approach to design The Nimble Process by Jason Santa Maria (video from the Smashing conference 2013)

“Early in the design process,details are your enemy.”Jason Santa Maria – “The Nimble Process”

“When possible, start with text– the web is about content.”Jason Santa Maria – “The Nimble Process”

“Use the right tool at theright time – designers needto be flexible.”Jason Santa Maria – “The Nimble Process”

“There is no one single pathbut a pattern of possibilities;trial and error is good.”Jason Santa Maria – “The Nimble Process”

SummarySo, just run that by me again – how do I designwebsites?All you need in order to create competent webdesigns is a deep understanding of HTML andCSS, you must buy into the principles of OneWeb, Content Out, Mobile First and ResponsiveDesign and get to grips with the use of mediaqueries. Of course, there are many otherconsiderations; content strategy, informationarchitecture, search engine optimisation,accessibility and a little scripting in JavaScriptand PHP will help. Oh, and familiarity with one ormore content management systems is a goodidea

“I know it feels like there isan infinite amount of stuff tokeep up with every singleday, but you know what? It’sokay. It’s okay not to knoweverything.”Jeremy Keith – The Mobile Book (forward)

of the beginning

responsive web design, we need to understand the context from which it emerged. A short historical overview will help, along with a description of a number of other concepts that form a logical progression towards RWD. Remember, responsive design is just 11 years old and for the first 20 or so years of the Web, other methods of page layout design

Related Documents:

alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still a nascent area, respon-sive web design has received more attention. Patterns and principles of responsive web design have been studied [15, 16]. HTML5 and CSS3 are popular standards to implement responsive designs [9].

alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still a nascent area, respon-sive web design has received more attention. Patterns and principles of responsive web design have been studied [15, 16]. HTML5 and CSS3 are popular standards to implement responsive designs [9].

that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. If we’re willing to research the needs of our users, and apply those ingredients carefully, then responsive web design is a powerful approach indeed. Ethan Marcotte, “Responsive Web Design”

Responsive Web Design Ethan Marcottecoined the term responsive web design and . Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of screen sizes and devices.

1.1. Possible Solutions for Multi-channel Web Design 7 RESPONSIVE WEB DESIGN 7 2.1. Core Ingredients of RWD 8 2.2. Tools for RWD 9 DESIGNING A RESPONSIVE WEB SITE 9 3.1. The Business Case 10 3.2. The Design Approach 10 CREATING A RESPONSIVE SHAREPOINT SITE 14 4.1. Building a SharePoint Master Page 15 4.2. Making the Master Page Responsive 15 4.2.1.

Responsive Web Design. Responsive Web Design is a new technique to develop one single website which looks different for different screen sizes so that it is usable on every device. This survey as part of the course "Information Architecture and Web Usability" lectured by Ao.Univ.-Prof. Dr. Keith Andrews, presents the state-of-the-art .

Enterprises 2 i/l nail jigs tibia 4 2 36,000 720 M/s Mian Enterprises 3 recon nail jigs 4 2 36,000 720 M/s Surgiquips Non Responsive Non Responsive . kocher forceps large M/s Mian Enterprises 549.00 Responsive A.M Ortho Local Responsive M/s M.J Marketing & Services (SMC-Pvt) Ltd Non Responsive Non Responsive 26 allis forceps large

Keywords Responsive design, pattern, principles, mobile first, relative units . Contents 1 Introduction 1 2 Responsive Web Design 2 3 Principles and Patterns 8 3.1 Mobile First 8 3.2 Relative Unit and Media Query 13 . Although Responsive Web Design is widely known as a feasible solution, the process to