tech support 8

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Thursday, 13 October 2011

More Samples of Responsive Web Design ≠ Print

Posted on 09:15 by Unknown



When the guy who coined the term "Responsive Web Design," has written a book about it, and is well regarded throughout the industry is asked to name his 20 favorite responsive sites, you should expect top-notch examples of sites that use CSS to respond to nearly any medium.




Except that isn't the case. Given that I wrote a piece for evolt.org about a week before his interview, I think I am within my rights to call attention to how these sites are not responsive insofar as they do not adapt to the printed page — a capability that has existed for years prior to the CSS media queries we are swooning over for responsive web design.




I am taking the first five sites listed in the article (which he says are not in any particular order, but I don't want to be accused of cherry picking and I don't have time to do all twenty) and presenting the printed versions of each as black and white PDF files (I figure not everyone has a color printer, unlike the assumption I clearly made in the evolt.org article). Some might suggest that if I want to make it in this industry* I should not attack someone so prominent, but I want to be clear this isn't an attack on Ethan Marcotte, this is a recurring oversight by nearly everyone purporting to make sites that are responsive.



Sample Sites



Elliot Jay Stocks




Screen shot of PDF file.




I wouldn't print the home page, but I might print the About page to include in my presentation to a boss or client about potential vendors. The navigation and content on the right could go away, and better margins can clean this up.



Ampersand Conference




Screen shot of PDF file.




Having attended my share of conferences, and knowing internet access is spotty and my battery can run dry quickly, I always print a schedule to carry with me. Boy would that be a mistake with this site. Of the six pages, only two have the schedule, and those could easily fit on one page. The white-on-white doesn't help much, either.



New Adventures in Web Design 2012




Screen shot of PDF file.




Another conference site, this time Mr. Marcotte sings the praise of the conference schedule. Owing to my need to print, I cannot agree with his praise. Three pages of sponsor logos, nearly a page of branding and navigation, and the remaining for the speakers? Couldn't the necessary bits all fit on one page?



SimpleBits




Screen shot of PDF file.




I've met Dan Cederholm and presented at a conference with him (not the same presentation) in Toronto a few years back. He's a good egg and so it hurts a little to list his site, but his About page, while full of valuable content, just doesn't seem to adapt to print. I know he uses bullet lists for a lot of content, we all do, but at least remove the bullets from the pictures.



Made By Hand




Screen shot of PDF file.




Printing the home page would be unfair — it's a site about a video, and so there is a video. Instead I visited the About page to learn about the project, which spends nearly as much space talking about the site's typefaces as it does the project, but makes no effort to adjust margins, hide navigation, remove the form, or otherwise adapt to the printed page.



How to Be Better Than This




Make print styles.




Now go read my original article at evolt.org: Print Styles Forgotten by Responsive Web Developers








* I should probably qualify that I have made it in this industry (despite my attempt at humor above). I am a co-founder of evolt.org, created the evolt.org browser archive, have co-written four web development books and edited another, am referenced in other books, am cited in best practices references and college courses, and have been running a business for 13+ years. I also make sure all the sites we build get print styles because it's just daft not to.

Read More
Posted in accessibility, browser, css, design, mobile, print, rant, standards, usability, UX | No comments

Tuesday, 11 October 2011

Detecting Mobile Devices — Don't Bother

Posted on 20:27 by Unknown


Image of mobile phone showing this site.Since I started working on the web (and was slowly coaxed to the world of Netscape from Mosaic and HotJava), clients have asked me to find ways to adjust how a page behaves based on what browser the end user has. Before campaigns like the Web Standards Project (WaSP) took hold and slowly convinced web developers, and by extension clients, that the right approach is to build for standards first, web developers struggled with everything from clunky JavaScript user agent sniffers to server-side components like the browscap.ini file for IIS. These all took time to maintain and were never 100% effective.




I am thrilled we've gotten to the point in the web where progressive enhancement is in vogue, finally falling in line with our own practices of the last decade or so. With the advent of mobile devices and plunging screen resolutions, we have support in the form of CSS media queries to adapt a single page to multiple devices, now referred to as responsive web design. Yes, we are still struggling with the best practices and design differences (such as forgetting print styles), but the overall concept is solid. No longer must you code a text-only page, a mobile page, a printable page, and a regular page (or the templates for each if you are using a web content management system). You can build one page and let it handle all those scenarios.




Except sometimes you find yourself in a situation where you have been asked to develop a different experience for a mobile user that lies outside the ideal of responsive sites. That different experience can be as simple as sending a user to a different page on the site if he or she is surfing on a mobile device. All those years of progress are swept away in one moment and we are back to struggling with user agents. I'd like to provide a little context on why such a simple-sounding request can be such an effort to implement.



Techniques?




If we fall back to user agent sniffing (reading the browser's User Agent as it reports to the server), then we have an uphill battle. Just finding a comprehensive list is an effort. One site lists hundreds of user agent strings, and there is even a SourceForge project dedicated to staying on top of them all. When you consider how many different phones and browsers there are, and how often new ones come out (such as Amazon Silk), your clients need to understand that this approach is doomed to failure without ongoing updates (and fees).




If all you do is follow Google's advice on its Webmaster Central Blog to simply look for the word "mobile" in the string, you'll fail immediately — user agents on Android devices do not need to conform (and often don't) to what Google says you will find. Opera doesn't include "mobile" in its user agent (Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1109081720; U; en) Presto/2.8.149 Version/11.10), and the browser Dolphin doesn't even include its name in the user agent string (Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; PC36100 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 ).




You can take the inverse approach and instead detect for desktop browsers. It's smart and simple as far as user agent sniffing goes, but still falls prey to the same problem of the constantly changing landscape of browsers. Given that the next version of Windows is intended to quickly switch its interface back and forth between desktop and mobile (keyboard and touch), unless the user agent for all the browsers installed on that device change as the user changes the device orientation, that technique is also doomed.




Serving different content based on screen resolution gets you around the user agent sniffing, but isn't any more effective. With tablets approaching desktop screen resolution, and smartphone resolution approaching tablet resolution, there is no clear method for determining what kind of device a user has. An iPhone 4S held horizontally has 960 pixels of resolution and the Dell Streak tablet has 800 pixels (to clarify, the smaller device has more pixels, which is contrary to what most might expect). If you want a tablet to have a different experience than a phone, then serving it based on screen resolution won't do it. As it is, the resolution of many tablets matches that of my netbook (1,024 x 600), which is definitely not the same type of device (it has a keyboard, for example).



What To Do?




Try to solve the objective earlier in the overall process — generate a different URL for mobile, embed it in different QR codes, look into feature detection, look at using CSS media queries to display or hide alternate content, and so on. Every case may require a different solution, but falling back to methods that were never reliable certainly isn't the right default approach.



Update: November 13, 2013




I'm just going to leave this link here for you to read at your leisure: Internet Explorer 11’s Many User-Agent Strings

Read More
Posted in browser, css, design, mobile, standards | No comments

Tuesday, 4 October 2011

Print Styles Forgotten by Responsive Web Developers (at evolt.org)

Posted on 09:02 by Unknown



Image of a printed web page with a QR code.




As web browsing technology continues to change at a rapid pace, budgets to update web sites for these changes often don't match that same pace. Responsive web design has become the de facto answer to preemptively adapt sites to this constant shift, typically relying on CSS3 media queries to do the bulk of the work. CSS3 media queries allow web browsers to choose stylesheets, and as a result, layouts, that fit the display resolution of the current device.




Web developers and designers brag about their ability to craft designs that work across platforms, some even integrating transitions that only they can see when they change their window sizes. Sites have sprung up to catalog these achievements and article after article expounds the benefits and wrong-mindedness of any other approach. I tend to agree.




I am surprised, however, at the utter disregard for a media format that has existed before the web — the printed page.



Read the full article at evolt.org




The rest of this article was just published at evolt.org. Go read Print Styles Forgotten by Responsive Web Developers and post your comments or thoughts, which you can also do below.

Read More
Posted in accessibility, browser, css, design, mobile, print, rant, standards, usability, UX | No comments

Wednesday, 28 September 2011

Amazon Silk, Yet Another Web Browser

Posted on 20:05 by Unknown



Amazon Silk logo.




Amazon's long-awaited tablet/e-reader was formally announced today, and the conversations about whether or not it will compete the iPad are underway. I don't much care about that. I am far more interested in the web browser that it includes.




Amazon Silk is a new web browser, built on Webkit, and that is really the news of interest here. Add to that Amazon's super-proxy approach to help users get content more quickly and efficiently and you've now got a new pile of potential chaos as a web developer. It's far too early to tell how this will shake out, but in a client meeting today I already had to address it, so I think it warrants a little context for the current state of browsers so we can consider potential developer impact.




Amazon posted a video on its brand new blog to provide an overview of Silk (with an obligatory Geocities reference):






The 400+ comments raise some questions that tend toward a common theme — in the absence of a technical explanation, when can we get our hands on an emulator? Granted, there are plenty of comments about privacy, security, and some wild speculation, but the theme is clear.




As a web developer, I can tell you that we all feel overburdened with the assault of browsers we have out there already. We can champion the ideal of targeting the specs, not the browser, but when the clients call to complain about a rendering difference, not even a problem, on another browser it can get pretty draining. As Silk comes to market we'll need to account for it, its hardware configurations, and its coming release versions (within reason, of course).




For some context about the burden we already have, yesterday Google Chrome developer Paul Irish wrote that, only taking into consideration Internet Explorer for desktop, we're already on track to need to support 76 versions of just Internet Explorer (including version 8) through 2020. There are some broad assumptions in his article regarding how people will use the IE document modes, but the potential is still there. Add to that the new release schedule of many browsers (Firefox has gone from version 5 to 7 in ~90 days), and then pile on the browsers available for mobile devices, and we're already at well beyond the number of variations of browsers that we had to support even in the heyday of the browser wars.




But Silk isn't just a web browser — it's got a super-charged proxy server that will compress images, compile JavaScript into its own machine-readable format, and batch files into a singular, smaller download. While this is nothing new (Opera Mini has done this for some time on mobile devices), Amazon's implementation raises the hairs on the back of my neck when I think about all the years I've had to troubleshoot web applications because proxy servers are caching files, munging JavaScript, brutalizing images, and generally gutting the real-time features that the web had been moving toward more and more. I don't know if this will happen with Amazon Silk, but given my experience with Opera, proxy servers, and users in general, I am filled with apprehension.



Related




Opera responded to the Amazon Silk announcement with its own explanation of how its own "cloud-compression" technology works:




Picture of web pages being process by HAL 9000 and delivered to Borat.




  • Amazon’s Silk Web Browser Adds New Twist to Old Idea at ars technica.

  • Amazon Launches Silk Web Browser for Tablets at Mashable.

  • Amazon Silk browser spins a faster mobile web, courtesy of cloud servers (video) at Engadget.

  • Opera: Amazon's Silk Browser is Flattering, But Five Years Late at PCMag.

  • Amazon's Silk Browser May Not Be Smooth When It Comes to Privacy at PCWorld.

  • Amazon's Silk browser one-ups Opera's approach to the Web at InfoWorld.

  • The Implications of Amazon's Silk Web Browser at ReadWriteWeb

Read More
Posted in browser, Chrome, Firefox, html, internet, Internet Explorer, mobile, Opera, standards, touch | No comments

Monday, 5 September 2011

Web Accessibility Sorta-Infographic

Posted on 12:00 by Unknown



WebAIM is a non-profit organization within the Center for Persons with Disabilities at Utah State University. It has a reputation (perhaps only in my head?) or providing resources both to the disabled and to organizations enlightened enough to want to support the disabled (or selfish enough to recognize they will be disabled as they age).




WebAIM makes the point that accessibility should be considered early in a web site's development, all the way back at the design phase (something lost on the Adobe Muse development team). WebAIM made a graphic, with accompanying text alternative, for its post Web Accessibility for Designers. It's not easy for me to be critical of an organization that does work for good (apparently not hard for me, either) but its latest infographic is nothing more than a pretty checklist (see the checklist below the graphic, but read the original post for more detail).




Infographic, abbreviated text immediately following.



Web Accessibility for Designers




  • Plan Heading Structure Early

  • Consider Reading Order

  • Provide Good Contrast

  • Use True Text Whenever Possible

  • Watch the Use of CAPS

  • Use Adequate Font Size

  • Remember Line Length

  • Make Sure Links are Recognizable

  • Design Link Focus Indicators

  • Design a "Skip to Main Content" Link

  • Ensure Link Text Makes Sense on Its Own

  • Use Animation, Video, and Audio Carefully

  • Don't Rely on Color Alone

  • Design Accessible Form Controls




Read More
Posted in accessibility, infographic, usability | No comments

Sunday, 4 September 2011

Social Media Spam Sorta-Infographic

Posted on 12:00 by Unknown



Today's sorta-infographic contains four pie charts, one of which is supposed to show a range, and the other three are ostensibly based on 12 hour clocks. Despite it's clip-art-style graphics, it does provide some pretty interesting factoids and comes with accompanying text to explain the graphics and provide more details. You can read the commentary, and comments, at the original post: Debut Impermium Index Reveals Surprising Trends in Social Web Spam Attacks.




Some of the trends Impermium outlines:




  • Online ID signup fraud.

  • "Sleeper cells" of social web abuse are a ticking time-bomb.

  • Social media exploitation techniques are evolving fast.

  • Uggs was the #1 most exploited brand.

  • Porn got stripped.

  • Mom & Pop are spammers.




Much of this isn't news to many, but it is validating to those of us who wonder if what we are experiencing is in line with current trends. I suggest reading the comments to see some of Impermium's responses to criticism — ok, really just read the comments for the criticism.




Infographic, see original article for text.


Read More
Posted in infographic, privacy, social media | No comments

Saturday, 3 September 2011

Patent Wars Sorta-Infographic

Posted on 12:00 by Unknown



I'm giving in to the cool hip trend of infographics that has been popping up like pinkeye across blogging and tech sites lately. These infographics are typically nothing more than data points (sometimes just narrative) strewn about with mathematically suspect charts or somewhat-related design elements. But they seem to draw traffic, even when there isn't even data to graph (Browsers as Wrestlers "Infographic"). So I am using my lack of shame to power through this long weekend with three posts of three infographics from other sites.




In today's installment I am posting an infographic that has some (imprecise) charts and a couple process maps outlining the current state of patents called Patent Wars: A New Age of Competition. You can find the original image at Business Insurance Quotes site, where it has no accompanying explanation or background.




Image of patent wars, no accompanying text available.
Image of patent wars, no accompanying text available.



Related




  • Frivolous Patents on the Web

  • WebM, H.264 Debate Still Going

  • More Frivolous Patents

  • A Patent Trolling Primer

  • Are Patents Killing HTML5 Video?


Read More
Posted in Apple, Google, infographic, Microsoft, patents | No comments
Newer Posts Older Posts Home
Subscribe to: Posts (Atom)

Popular Posts

  • New Google Analytics Features
    In the article " Google Analytics Now More Powerful, Flexible and Intelligent " from last Tuesday (yes, I know I'm behind on t...
  • HTML5 Finally Gets... a Logo?
    Start Rant With all the debate about elements , attributes , semantic meaning and who really owns HTML5 , it's thrilling to see that t...
  • Speaking at WordCamp Buffalo 2013
    This Saturday I will be speaking at Buffalo's second WordCamp . Last year was a great day-long event filled with many good speakers (not...
  • Speaking: Accessible Web Apps & Standards
    I will be speaking twice in September, both of them sponsored by Infotech Niagara. If you're in the Buffalo area, these are great opport...
  • Copying Content Styled with Text-Transform
    Using the CSS property text-transform to automatically shift copy to uppercase has been popular for a while now, but a combination of a rec...
  • Current CSS3, HTML5 Support
    The Tool Last week saw the launch of FindMeByIp.com , a very handy web site that displays a user's current IP address (along with a geog...
  • Come See Me: October 6
    I will be one of the panelists at the Business First Power Breakfast: Online Networks , this coming Tuesday, October 6, 2009 at 7:30am at S...
  • Accessibility Bookmarklets and Tools
    Testing accessibility on your web projects can be a tricky task if you have no firsthand experience with visual, audible, physical or even c...
  • Brightkite Yields to Foursquare, Gowalla, Etc.
    Brighkite has made an announcement today that affects me and a handful of other people (not counting all the people on Facebook whose timel...
  • W3C and WHATWG Provide HTML5 Updates
    W3C The W3C is pretty good about posting news when new HTML/CSS-related documents undergo updates, status changes, or generally move forward...

Categories

  • accessibility
  • Adobe
  • analytics
  • Apple
  • apps
  • ARIA
  • Bing
  • Blink
  • Brightkite
  • browser
  • Buzz
  • Chrome
  • clients
  • css
  • design
  • Facebook
  • Firefox
  • Flash
  • fonts
  • food
  • Foursquare
  • g11n
  • geolocation
  • globalization
  • Google
  • Gowalla
  • html
  • i18n
  • ICANN
  • infographic
  • Instagram
  • internationalization
  • internet
  • Internet Explorer
  • JavaScript
  • JAWS
  • Klout
  • L10n
  • law
  • localization
  • Lynx
  • Mapquest
  • Microsoft
  • mobile
  • Netscape
  • ning
  • Opera
  • patents
  • picplz
  • Plus
  • print
  • privacy
  • project management
  • QR
  • rant
  • RSS
  • Safari
  • SCVNGR
  • search
  • SEM
  • SEO
  • social media
  • Sony
  • speaking
  • standards
  • SVG
  • touch
  • translation
  • Twitter
  • typefaces
  • usability
  • UX
  • Verizon
  • video
  • W3C
  • WAI
  • WCAG
  • WebKit
  • whatwg
  • Wired
  • WOFF
  • xhtml
  • Yahoo
  • YouTube

Blog Archive

  • ▼  2013 (39)
    • ▼  December (1)
      • Web Development Advent Calendars for 2013
    • ►  November (7)
    • ►  September (4)
    • ►  July (3)
    • ►  June (2)
    • ►  May (5)
    • ►  April (3)
    • ►  March (6)
    • ►  February (2)
    • ►  January (6)
  • ►  2012 (63)
    • ►  December (2)
    • ►  November (4)
    • ►  October (5)
    • ►  September (5)
    • ►  August (4)
    • ►  July (6)
    • ►  June (7)
    • ►  May (7)
    • ►  April (8)
    • ►  March (5)
    • ►  February (3)
    • ►  January (7)
  • ►  2011 (67)
    • ►  December (5)
    • ►  November (7)
    • ►  October (5)
    • ►  September (4)
    • ►  August (8)
    • ►  July (3)
    • ►  June (8)
    • ►  May (3)
    • ►  April (1)
    • ►  March (6)
    • ►  February (6)
    • ►  January (11)
  • ►  2010 (100)
    • ►  December (8)
    • ►  November (7)
    • ►  October (5)
    • ►  September (10)
    • ►  August (7)
    • ►  July (11)
    • ►  June (12)
    • ►  May (6)
    • ►  April (8)
    • ►  March (10)
    • ►  February (5)
    • ►  January (11)
  • ►  2009 (51)
    • ►  December (9)
    • ►  November (6)
    • ►  October (21)
    • ►  September (13)
    • ►  August (2)
  • ►  2003 (3)
    • ►  October (1)
    • ►  January (2)
  • ►  2002 (9)
    • ►  December (1)
    • ►  June (3)
    • ►  April (1)
    • ►  March (3)
    • ►  January (1)
  • ►  2001 (1)
    • ►  February (1)
  • ►  2000 (4)
    • ►  October (1)
    • ►  July (1)
    • ►  June (1)
    • ►  January (1)
  • ►  1999 (7)
    • ►  November (1)
    • ►  September (2)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
Powered by Blogger.

About Me

Unknown
View my complete profile