SlideShare a Scribd company logo
1 of 63
The Future
                                BYU Website Project




Slide notes will appear here.
Redesign byu.edu
              • Markup, style, and scripting
                     have been updated




We’ve brought things up to current technical standards, such as...
HTML5
CSS3
and jQuery, but...
Redesign byu.edu
               • Markup, style, and scripting
                     have been updated
               • Layout is still hovering somewhere
                     around 2007




Our layout approach still reflects the thinking of 4 or 5 years ago.
Here’s why. Back in 2007, we decided that “most” browsers were 1024x768. Our layouts didn’t support anything else.
Here’s what’s happened
                            since 2007




I’ve got a lot of screenshots in the following slides. I’ve left the browser chrome in so that the URL serves as the attribution.
A mobile browser that wasn’t terrible. (Thank you, Steve)
Your TV became a browser.
Another mobile browser that didn’t stink. (Now everybody can have one-- even people who don’t want an iPhone :)
Tablet computers finally took off. (Again, props to Steve)
Google’s in the TV business.
Amazon’s in the browser business.
There are even cars with web browsers in them.
What this means for us:




                                           What this means for us:
Clearly 1024x768 is a thing of the past:
Browsers are bigger




Browsers are bigger
and smaller than ever.




and smaller than ever.
Connections are faster




Connections are faster
and slower than ever.




and slower than ever.
Browsers are more capable




Browsers are more capable
and more rudimentary than ever.




and more rudimentary than ever.
Bringing the design to 2011




So how do we get current on our design?
Designing for the future
             Bringing the design to 2011




We don’t. We need to think further ahead than that.
FAIL




This is not the future. (Horizontal scrolling. Ugh.)
FAIL




Please, don’t let this be the future either. (Pinch-and-zoom viewing. Double ugh. Viewing a site through a keyhole is not a good experience!)
Mobile First &
Responsive Web Design
        FTW
Mobile First
               • Essentials only
               • Speed, speed, speed
               • Bene t everyone (not just mobile users)



Always, ALWAYS design for mobile first. Even if you’re never planning to have a mobile site. Really. Here’s why: 1) It forces you to figure out
the absolutely most important parts of the site, and 2) it forces you to figure out ways to make your site really, really fast. If that’s not a win
for everyone, I don’t know what is.
Example: Facebook started out as a desktop site. The guy who designed the first mobile FB app started working on it and realized that it
could actually be better than the desktop site. Why? because you get rid of all the stuff you didn’t care about and focus in on what really
matters: posting your own status and looking at everybody else’s status (and a few other things).
beta.byu.edu/m/




Here’s a test I did, trying to see how tiny I could get BYU’s site and still deliver all of the important content on the home page. The page got
down under 50K, and loads in a blink whether you’re plugged in to ethernet or on a super-slow phone network. It loads one small stylesheet,
one small javascript file, and one image (aside from the HTML).
Responsive Web Design
              • Don’t force size, adapt to it
              • Happy browsing for everyone




So once you’ve started with mobile, you expand from there. Make your design adapt to WHATEVER size a user’s screen may be.
Here’s a sweet example: http://bostonglobe.com
Design




Here’s how I’ve approached the visual design
Mobile first, of course.
vs.




Previous thinking was that you designed a desktop site AND a mobile site. You used browser sniffing or some other (questionable) technique,
and redirected mobile users to their own little space on the web. (Hey! get out of my desktop space, you little mobile browser! Not cool.)
The better way to approach it is to figure out how the mobile should TRANSFORM into the desktop view (and back again). What are the
evolutionary steps to get from one to the other?
There’s a lot of stuff here that got left out or hidden in the mobile version. Where does it all go? And when should it reappear?
Here’s step one (after the basic mobile). 320px wide. It covers iPhone, Android and other smartphone browsers that are actually worth using.
This is portrait orientation. HOWEVER, don’t think of this as an isolated size. This layout should be liquid (as in, resizable) for sizes that are
close: say 300 to 450px wide. (But that will depend on what makes sense for your specific layout.)
This is still the 320px layout. Here’s what we did with the two menus from the desktop version. In order that we can focus on CONTENT, and
not just show a screen full of navigation (really, nobody wants that), we folded all of the nav up into the two tabs. That brings up an
important point: this layout is assuming javascript capability. If there’s no js, it looks like the very first mobile layout. More on that later.
Here’s what happens around 480px. That’s another good width to look at, because it’s the width of smartphones in landscape orientation.
But again, you should think of it more as a range. As things start needing a little adjustment in the smaller layout, jump to the next one.
480px is just a good view to think about as you figure out where that range falls.
600px. A good snapshot between the 480px view and the 768px view.
And here’s another way we’re handling the menu based on the 600px screen width.
768px wide. All of the menus are visible, and the bottom content is 2 columns.
1024px
We’ve found that 18% of our users have browser windows above 1500px wide. So it makes sense to consider those too. (1280px might be a
view to consider, or even bigger.)
Techniques




And now we get to the technical stuff. It’s really cool.
Techniques
               • Media queries
               • Flexible grids and uid images
               • Progressive enhancement
               • Poly lls & fallbacks


Here’s what’s driving it all. Additionally, some well-planned javascript can help a lot as you adapt your layouts to various sizes.
Media Queries

        <link rel=”stylesheet”
              media=”all and (min-width:320px)”
              href=”responsive.css” />




If you insert this into your HTML, the stylesheet will only load if the screen width is wider than 320px. Additionally, if a browser (say, on a cell
phone) doesn’t understand media queries, it won’t load the stylesheet. This is important, because it means that even browsers from the age
of dinosaurs (here’s looking at you, Netscape 4) will get the content and a basic stylesheet they can understand, but no more.
Here’s how it looks in the wild. I’m loading handheld.css in the normal way, and adding the bulk of my styles only if the browser understands
media queries (and is therefore modern enough to understand my CSS3) AND is wider than 320px. Other browsers don’t bother with it.
Media Queries

      @media screen and (min-width:480px){
            body {width:90%; margin:0 auto;}
      }




INSIDE my stylesheet, it looks like this.
I can add as many breakpoints as needed, and the styles will only be applied if the browser meets those criteria (in this case, width). If I put
the smaller widths first and move up, I only have to define the CHANGES, which can keep your stylesheets still pretty small. This one is under
20K, minified.
Flexible Grids
               • Liquid layout
               • Percentages de ne widths
               • Proportion-perfect, not pixel-
                      perfect




The flexible grid is pretty easy to set up.
Just substitute percentages for pixels. I’ve left a gutter here that’s a little bit squishy to account for the different ways browsers handle
rounding of pixels and whatnot.
Fluid Images


                                   img {max-width:100%}




This one’s pretty easy too. If you apply this style to your images, they’ll scale down as their container scales down, but they won’t scale up
above their full size. Pretty nice.
Here’s what it looks like. (This is a great article, by the way.) I’ve also experimented with loading a small image initially (mobile first) and then
using js to replace it with a larger one as needed.
Progressive Enhancement
               • Start with the basics: no-frills
                     HTML and CSS2; no Javascript
               • Enhance for capable browsers




Here’s where the mobile first starts. Only serve up the very basics at first, and add stuff in later for more capable browsers.
Modernizr should be loaded for pretty much any site. It’s awesome. This is the one small javascript I load for mobile that will allow you to
detect a browser’s features and help some less-than-capable browsers (I’m looking right at you, IE) get up to speed.
Modernizr.load();




One of the most useful features is the script loader. It allows me to only load my javascript if I’m on a js-enabled browser (Nice!), AND even to
conditionally load scripts based on a browser’s capabilities. Shown here is a simple declaration that will load these two scripts in parallel
(faster) if the browser understands javascript BUT execute them in order. (w00t!)
Poly lls & Fallbacks
                • Conditional css classes
                • Conditional .js and .css loading




Here’s some of the other stuff Modernizr lets you do, to account for browsers that don’t handle things quite right.
body.no-js nav
     {
        // Fallback css goes here
     }


     body.no-cssgradients > header
     {
        // Fallback css for gradient header
     }



Modernizr can add classes to your html body that tell you what capabilities it has. For example, the top declaration contains styles that will fill
in if the browser doesn’t have js turned on. The bottom is a fallback for a browser that doesn’t like gradients. These can live happily in your
css and only be deployed as needed.
Here’s what the production-ready build screen looks like for Modernizr. You can choose the tests to run based on the features you need to
test for, as well as include an HTML5 shim, the yepnope script loader (Modernizr.load; with more documentation at yepnopejs.com), media
query fallback for IE, and so on. It lets you use partially-supported features RIGHT NOW, by allowing you to gracefully fall back if the browser
isn’t quite mature enough to handle your awesomeness.
if(!Modernizr.canvas)
     {
        // Fallback scripting goes here
     }


     Modernizr.load(
     {
       test: Modernizr.canvas,
       nope: [‘canvasfill.js’, ‘canvasfill.css’]
     });




Here’s some javascript that allows you to test for a specific feature and perform some actions (top) or load external fallback scripts (and
styles too!) (bottom)
Essential Reading
          • Multi-device Web Design: An Evolution
                 Luke Wroblewski, 31 Oct 2011
                http://bit.ly/sKU95o

          • Mobile First
                 Luke Wroblewski
                http://www.abookapart.com/

          • Responsive Web Design
                 Ethan Marcotte
                http://www.abookapart.com/

And here’s where you go for further reading. No doubt you still have some questions; these are the creme-de-la-creme of the sources. Enjoy.

More Related Content

Similar to The future of BYU web design

Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap Creative
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: StylingMatthew Gerrior
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your websiteMahmoud Farrag
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 
Html5 presentation slides
Html5 presentation slidesHtml5 presentation slides
Html5 presentation slideswebwizart
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 

Similar to The future of BYU web design (20)

Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book Sample
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 
Enhance Enhance
Enhance EnhanceEnhance Enhance
Enhance Enhance
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Html5 presentation slides
Html5 presentation slidesHtml5 presentation slides
Html5 presentation slides
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 

Recently uploaded

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...amitlee9823
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...nirzagarg
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funneljen_giacalone
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyNitya salvi
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationZenSeloveres
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...nirzagarg
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja Nehwal
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneLukeKholes
 

Recently uploaded (20)

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
 

The future of BYU web design

  • 1. The Future BYU Website Project Slide notes will appear here.
  • 2. Redesign byu.edu • Markup, style, and scripting have been updated We’ve brought things up to current technical standards, such as...
  • 6. Redesign byu.edu • Markup, style, and scripting have been updated • Layout is still hovering somewhere around 2007 Our layout approach still reflects the thinking of 4 or 5 years ago.
  • 7. Here’s why. Back in 2007, we decided that “most” browsers were 1024x768. Our layouts didn’t support anything else.
  • 8. Here’s what’s happened since 2007 I’ve got a lot of screenshots in the following slides. I’ve left the browser chrome in so that the URL serves as the attribution.
  • 9. A mobile browser that wasn’t terrible. (Thank you, Steve)
  • 10. Your TV became a browser.
  • 11. Another mobile browser that didn’t stink. (Now everybody can have one-- even people who don’t want an iPhone :)
  • 12. Tablet computers finally took off. (Again, props to Steve)
  • 13. Google’s in the TV business.
  • 14. Amazon’s in the browser business.
  • 15. There are even cars with web browsers in them.
  • 16. What this means for us: What this means for us: Clearly 1024x768 is a thing of the past:
  • 18. and smaller than ever. and smaller than ever.
  • 20. and slower than ever. and slower than ever.
  • 21. Browsers are more capable Browsers are more capable
  • 22. and more rudimentary than ever. and more rudimentary than ever.
  • 23. Bringing the design to 2011 So how do we get current on our design?
  • 24. Designing for the future Bringing the design to 2011 We don’t. We need to think further ahead than that.
  • 25. FAIL This is not the future. (Horizontal scrolling. Ugh.)
  • 26. FAIL Please, don’t let this be the future either. (Pinch-and-zoom viewing. Double ugh. Viewing a site through a keyhole is not a good experience!)
  • 27. Mobile First & Responsive Web Design FTW
  • 28. Mobile First • Essentials only • Speed, speed, speed • Bene t everyone (not just mobile users) Always, ALWAYS design for mobile first. Even if you’re never planning to have a mobile site. Really. Here’s why: 1) It forces you to figure out the absolutely most important parts of the site, and 2) it forces you to figure out ways to make your site really, really fast. If that’s not a win for everyone, I don’t know what is.
  • 29. Example: Facebook started out as a desktop site. The guy who designed the first mobile FB app started working on it and realized that it could actually be better than the desktop site. Why? because you get rid of all the stuff you didn’t care about and focus in on what really matters: posting your own status and looking at everybody else’s status (and a few other things).
  • 30. beta.byu.edu/m/ Here’s a test I did, trying to see how tiny I could get BYU’s site and still deliver all of the important content on the home page. The page got down under 50K, and loads in a blink whether you’re plugged in to ethernet or on a super-slow phone network. It loads one small stylesheet, one small javascript file, and one image (aside from the HTML).
  • 31. Responsive Web Design • Don’t force size, adapt to it • Happy browsing for everyone So once you’ve started with mobile, you expand from there. Make your design adapt to WHATEVER size a user’s screen may be.
  • 32. Here’s a sweet example: http://bostonglobe.com
  • 33. Design Here’s how I’ve approached the visual design
  • 34. Mobile first, of course.
  • 35. vs. Previous thinking was that you designed a desktop site AND a mobile site. You used browser sniffing or some other (questionable) technique, and redirected mobile users to their own little space on the web. (Hey! get out of my desktop space, you little mobile browser! Not cool.)
  • 36. The better way to approach it is to figure out how the mobile should TRANSFORM into the desktop view (and back again). What are the evolutionary steps to get from one to the other?
  • 37. There’s a lot of stuff here that got left out or hidden in the mobile version. Where does it all go? And when should it reappear?
  • 38. Here’s step one (after the basic mobile). 320px wide. It covers iPhone, Android and other smartphone browsers that are actually worth using. This is portrait orientation. HOWEVER, don’t think of this as an isolated size. This layout should be liquid (as in, resizable) for sizes that are close: say 300 to 450px wide. (But that will depend on what makes sense for your specific layout.)
  • 39. This is still the 320px layout. Here’s what we did with the two menus from the desktop version. In order that we can focus on CONTENT, and not just show a screen full of navigation (really, nobody wants that), we folded all of the nav up into the two tabs. That brings up an important point: this layout is assuming javascript capability. If there’s no js, it looks like the very first mobile layout. More on that later.
  • 40. Here’s what happens around 480px. That’s another good width to look at, because it’s the width of smartphones in landscape orientation. But again, you should think of it more as a range. As things start needing a little adjustment in the smaller layout, jump to the next one. 480px is just a good view to think about as you figure out where that range falls.
  • 41. 600px. A good snapshot between the 480px view and the 768px view.
  • 42. And here’s another way we’re handling the menu based on the 600px screen width.
  • 43. 768px wide. All of the menus are visible, and the bottom content is 2 columns.
  • 45. We’ve found that 18% of our users have browser windows above 1500px wide. So it makes sense to consider those too. (1280px might be a view to consider, or even bigger.)
  • 46. Techniques And now we get to the technical stuff. It’s really cool.
  • 47. Techniques • Media queries • Flexible grids and uid images • Progressive enhancement • Poly lls & fallbacks Here’s what’s driving it all. Additionally, some well-planned javascript can help a lot as you adapt your layouts to various sizes.
  • 48. Media Queries <link rel=”stylesheet” media=”all and (min-width:320px)” href=”responsive.css” /> If you insert this into your HTML, the stylesheet will only load if the screen width is wider than 320px. Additionally, if a browser (say, on a cell phone) doesn’t understand media queries, it won’t load the stylesheet. This is important, because it means that even browsers from the age of dinosaurs (here’s looking at you, Netscape 4) will get the content and a basic stylesheet they can understand, but no more.
  • 49. Here’s how it looks in the wild. I’m loading handheld.css in the normal way, and adding the bulk of my styles only if the browser understands media queries (and is therefore modern enough to understand my CSS3) AND is wider than 320px. Other browsers don’t bother with it.
  • 50. Media Queries @media screen and (min-width:480px){ body {width:90%; margin:0 auto;} } INSIDE my stylesheet, it looks like this.
  • 51. I can add as many breakpoints as needed, and the styles will only be applied if the browser meets those criteria (in this case, width). If I put the smaller widths first and move up, I only have to define the CHANGES, which can keep your stylesheets still pretty small. This one is under 20K, minified.
  • 52. Flexible Grids • Liquid layout • Percentages de ne widths • Proportion-perfect, not pixel- perfect The flexible grid is pretty easy to set up.
  • 53. Just substitute percentages for pixels. I’ve left a gutter here that’s a little bit squishy to account for the different ways browsers handle rounding of pixels and whatnot.
  • 54. Fluid Images img {max-width:100%} This one’s pretty easy too. If you apply this style to your images, they’ll scale down as their container scales down, but they won’t scale up above their full size. Pretty nice.
  • 55. Here’s what it looks like. (This is a great article, by the way.) I’ve also experimented with loading a small image initially (mobile first) and then using js to replace it with a larger one as needed.
  • 56. Progressive Enhancement • Start with the basics: no-frills HTML and CSS2; no Javascript • Enhance for capable browsers Here’s where the mobile first starts. Only serve up the very basics at first, and add stuff in later for more capable browsers.
  • 57. Modernizr should be loaded for pretty much any site. It’s awesome. This is the one small javascript I load for mobile that will allow you to detect a browser’s features and help some less-than-capable browsers (I’m looking right at you, IE) get up to speed.
  • 58. Modernizr.load(); One of the most useful features is the script loader. It allows me to only load my javascript if I’m on a js-enabled browser (Nice!), AND even to conditionally load scripts based on a browser’s capabilities. Shown here is a simple declaration that will load these two scripts in parallel (faster) if the browser understands javascript BUT execute them in order. (w00t!)
  • 59. Poly lls & Fallbacks • Conditional css classes • Conditional .js and .css loading Here’s some of the other stuff Modernizr lets you do, to account for browsers that don’t handle things quite right.
  • 60. body.no-js nav { // Fallback css goes here } body.no-cssgradients > header { // Fallback css for gradient header } Modernizr can add classes to your html body that tell you what capabilities it has. For example, the top declaration contains styles that will fill in if the browser doesn’t have js turned on. The bottom is a fallback for a browser that doesn’t like gradients. These can live happily in your css and only be deployed as needed.
  • 61. Here’s what the production-ready build screen looks like for Modernizr. You can choose the tests to run based on the features you need to test for, as well as include an HTML5 shim, the yepnope script loader (Modernizr.load; with more documentation at yepnopejs.com), media query fallback for IE, and so on. It lets you use partially-supported features RIGHT NOW, by allowing you to gracefully fall back if the browser isn’t quite mature enough to handle your awesomeness.
  • 62. if(!Modernizr.canvas) { // Fallback scripting goes here } Modernizr.load( { test: Modernizr.canvas, nope: [‘canvasfill.js’, ‘canvasfill.css’] }); Here’s some javascript that allows you to test for a specific feature and perform some actions (top) or load external fallback scripts (and styles too!) (bottom)
  • 63. Essential Reading • Multi-device Web Design: An Evolution Luke Wroblewski, 31 Oct 2011 http://bit.ly/sKU95o • Mobile First Luke Wroblewski http://www.abookapart.com/ • Responsive Web Design Ethan Marcotte http://www.abookapart.com/ And here’s where you go for further reading. No doubt you still have some questions; these are the creme-de-la-creme of the sources. Enjoy.

Editor's Notes

  1. \n
  2. We&amp;#x2019;ve brought things up to current technical standards, such as...\n
  3. HTML5\n
  4. CSS3\n
  5. and jQuery, but...\n
  6. Our layout approach still reflects the thinking of 4 or 5 years ago.\n
  7. Here&amp;#x2019;s why. Back in 2007, we decided that &amp;#x201C;most&amp;#x201D; browsers were 1024x768. And if they weren&amp;#x2019;t, they should be--our layouts didn&amp;#x2019;t support anything else.\n
  8. I&amp;#x2019;ve got a lot of screenshots in the following slides. I&amp;#x2019;ve left the browser chrome in so that attributions remain intact and so you can go there if you so desire.\n
  9. A mobile browser that wasn&amp;#x2019;t terrible. (Thank you, Steve)\n
  10. Your TV became a browser.\n
  11. Another mobile browser that didn&amp;#x2019;t stink. (Now everybody&amp;#x2019;s got one.)\n
  12. Tablet computers finally took off.\n
  13. Google&amp;#x2019;s in the TV business.\n
  14. Amazon&amp;#x2019;s in the browser business.\n
  15. There are even cars with web browsers in them.\n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. So how do we get current on our design?\n
  24. We don&amp;#x2019;t. We need to think further ahead than that.\n
  25. This is not the future.\n(Horizontal scrolling. Ugh.)\n
  26. Please, don&amp;#x2019;t let this be the future either.\n(Pinch-and-zoom viewing. Double ugh.)\n
  27. (For the Win!)\n
  28. When designing a site, ALWAYS design for mobile first. Even if you&amp;#x2019;re never planning to have a mobile site. Really. Here&amp;#x2019;s why: 1) It forces you to figure out the absolutely most important parts of the site and focus on those, and 2) it forces you to figure out ways to make your site really, really fast. If that&amp;#x2019;s not a win for everyone, I don&amp;#x2019;t know what is.\n
  29. Example: Facebook started out as a desktop site. The guy who designed the first mobile FB app started working on it and realized that it could actually be BETTER than the desktop site. Why? because you could lose all the stuff you didn&amp;#x2019;t care about and focus in on what really matters to you: posting your own status and looking at everybody else&amp;#x2019;s status. \n
  30. Here&amp;#x2019;s a test I did, trying to see how tiny I could get BYU&amp;#x2019;s site and still deliver all of the important content on the home page. The page got down under 50K, and loads in a blink whether you&amp;#x2019;re on ethernet or a super-slow phone network. It loads one small stylesheet, one small javascript file, and one image aside from the HTML.\n
  31. So once you&amp;#x2019;ve started with mobile, you expand from there. Make your design adapt to WHATEVER size a user&amp;#x2019;s screen may be.\n
  32. Here&amp;#x2019;s a sweet example: http://bostonglobe.com\n
  33. Here&amp;#x2019;s how I&amp;#x2019;ve approached the visual design\n
  34. Mobile first, of course.\n
  35. Previous thinking was that you designed a desktop site AND a mobile site. You used browser sniffing or some other (questionable) technique, and redirected mobile users to their own little space on the web. (Hey! get out of my desktop space, you little mobile browser!)\n
  36. BUT, the better way to approach it is to figure out how the mobile should TRANSFORM into the desktop view (and back again). What are the evolutionary steps to get from one to the other?\n
  37. There&amp;#x2019;s a lot of stuff here that got left out or hidden in the mobile version. Where does it all go? And when should it reappear?\n
  38. Here&amp;#x2019;s step one. 320px wide. It covers iPhone, Android and other(?) smartphone browsers that are actually worth using. This is portrait orientation. HOWEVER, don&amp;#x2019;t think of this as an isolated size. This layout should be liquid (as in, resizable) for sizes that are close as well, say 300 to 450px wide. (But that will depend on what makes sense for your specific layout)\n
  39. This is still the 320px layout. Here&amp;#x2019;s what we did with the two menus from the desktop version. In order that we can focus on CONTENT, and not just show a screen full of navigation (really, nobody wants that), we folded all of the nav up into the two tabs. That brings up an important point: this layout is assuming javascript capability. If there&amp;#x2019;s no js, it looks like the very first mobile layout. More on that later.\n
  40. Here&amp;#x2019;s what happens around 480px. That&amp;#x2019;s another good width to look at, because it&amp;#x2019;s the width of smartphones in landscape orientation. But again, you should think of it more as a range. As things start needing a little adjustment in the smaller layout, jump to the next one. 480px is just a good view to think about as you figure out where that range falls.\n
  41. 600px. A good snapshot between the 480px view and the 768px view.\n
  42. And here&amp;#x2019;s another way we&amp;#x2019;re handling the menu based on the 600px screen width.\n
  43. 768px wide\n
  44. 1024px.\n
  45. We&amp;#x2019;ve found that 18% of our users have browser windows above 1500px wide. So it makes sense to consider those too. (1280px might be a view to consider, or even bigger.)\n
  46. And now we get to the technical stuff. It&amp;#x2019;s really cool.\n
  47. Here&amp;#x2019;s what&amp;#x2019;s driving it all. Additionally, some well-planned javascript can help immensely as you adapt your layouts to various sizes.\n
  48. If you insert this into your HTML, the stylesheet will only load if the screen width is wider than 320px. Additionally, if a browser (say, on a cell phone) doesn&amp;#x2019;t understand media queries, it won&amp;#x2019;t load the stylesheet. This is important, because it means that even browsers from the age of dinosaurs (here&amp;#x2019;s looking at you, Netscape 4) will get the content and a basic stylesheet they can understand.\n
  49. Here&amp;#x2019;s how it looks in the wild. I&amp;#x2019;m loading handheld.css in the normal way, and adding the bulk of my styles only if the browser understands media queries (and is therefore modern enough to understand my CSS3) AND is wider than 320px. Other browsers don&amp;#x2019;t bother with it.\n
  50. INSIDE my stylesheet, it looks like this.\n
  51. I can add as many breakpoints as needed, and the styles will only be applied if the browser meets those criteria (in this case, width). If I put the smaller widths first and move up, I only have to define the CHANGES, which can keep your stylesheets still pretty small. This one is under 20K, minified.\n
  52. The flexible grid is pretty easy to set up. \n
  53. Simply substitute percentages for pixels. I&amp;#x2019;ve left a gutter here that&amp;#x2019;s a little bit squishy to account for the different ways browsers handle rounding of pixels and whatnot.\n
  54. This one&amp;#x2019;s pretty easy too. If you apply this style to your images, they&amp;#x2019;ll scale down as their container scales down, but they won&amp;#x2019;t scale up above their full size. Pretty nice.\n
  55. Here&amp;#x2019;s what it looks like. (This is a great article, by the way.) I&amp;#x2019;ve also experimented with loading a small image initially (mobile first) and then using js to replace it with a larger one as needed.\n
  56. Here&amp;#x2019;s where the mobile first starts. Only serve up the very basics at first, and add stuff in later for more capable browsers.\n
  57. Modernizr should be loaded for just about any site. It&amp;#x2019;s awesome. This is the one small javascript I load for mobile that will allow you to detect a browser&amp;#x2019;s features and even help some less than capable browsers (I&amp;#x2019;m looking right at you, IE) get up to speed.\n
  58. One of the most useful features is the script loader. It allows me to only load my javascript if I&amp;#x2019;m on a js-enabled browser (Nice!), AND even to conditionally load scripts based on a browser&amp;#x2019;s capabilities. This is a simple declaration that will load these two scripts in parallel (faster) BUT execute them in order. (w00t!)\n
  59. Here&amp;#x2019;s some of the other stuff Modernizr lets you do, to account for browsers that don&amp;#x2019;t handle things quite right.\n
  60. Modernizr can add classes to your html body that tell you what capabilities it has. For example, the top declaration contains styles that will fill in if the browser doesn&amp;#x2019;t have js turned on. The bottom is a fallback for a browser that doesn&amp;#x2019;t like gradients. These can live happily in your css and only be deployed as needed.\n
  61. Here&amp;#x2019;s what the production-ready build screen looks like for Modernizr. You can choose the tests to run based on the features you need to test for, as well as include an HTML5 shim, the yepnope script loader (Modernizr.load), media query fallback for IE, and so on. It lets you use partially-supported features RIGHT NOW, by allowing you to gracefully fall back if the browser isn&amp;#x2019;t quite mature enough to handle your awesomeness.\n
  62. Here&amp;#x2019;s some javascript that allows you to test for a specific feature and perform some actions (top) or load external fallback scripts (and styles too!) (bottom)\n
  63. And here&amp;#x2019;s where you go for further reading. No doubt you still have some questions; these are the creme-de-la-creme of the sources. Enjoy.\n