Getting media queries to work in older browsers

The possibility that you may want media queries to work in older browsers does exist. We normally think of media queries as only being used to create responsive designs, which implies modern browsers on devices like iPhone or iPad. However, there is a JavaScript you can use if you need to support older browsers for other reasons.

There is native support for media queries in Firefox 3.5+, Opera 7+, Safari 3+ and Chrome. For browsers older than that, you can use css3mediaqueries.js, available free from Google.

If you are a Dreamweaver user, or have used my e-book “How to Create a Responsive Web Site Using Dreamweaver CS 5.5,” be aware that this script does not work with @import stylesheets. See Media Queries 101 for some tips on how to use methods other than @import rules for media query styles.

Move the Web Forward

Yesterday on Blue Beanie Day, Stephanie Sullivan Rewis announced a new web project on the blog at web standards project. Her post was called Beyond the Blue Beanie.

Today I’m happy to announce a new project, put together by a group of very passionate web folks, that can enable your entry into the process of moving the web forward—no matter what skill level you’re currently at—Move the Web Forward.

The purpose of the new Move the Web Forward site is to help people give back to the web community. Here’s their objective:

Whether you’re a talented web developer, web-slinging since the days of tables and font tags, or you’re a hobbyist hacker, there are a number ways for you to give back. Below, we list some of the ways that anyone can contribute back to the web platform.

Our goal is to make it easy for anyone to get started contributing to the platform, whether that’s learning more about how it works, teaching others, or writing specs. The web has grown due to people like you, and we want to make it even easier for people like you to give back.

There are a multitude of ideas there for how you can level up, dig deeper, or contribute as a guru. No matter what your level of expertise, it’s possible to get involved.

See Also: Smashing Magazine’s The Smashing Guide to Moving the Web Forward.

Supporting Web Standards Today?

Virginia in a blue beanieIt’s Blue Beanie Day, the day on which we all show our support for web standards by wearing a blue beanie.

Jeffrey Zeldman started this event several years ago. It’s been successful in getting all sorts of people to add blue beanies to their various avatars and standing up for web standards on a particular day each year.

It needs to be an every day event to support web standards. For many people it is. Those people are keeping up with the standards, writing web pages that show that they understand what it’s all about, and – for educators – showing others the way to create web sites using web standards. Really committed web standards people are working with browsers, following browser updates, and contributing to the writing of new specs and new browser engines.

Check out the Web Standards Project and Web Standards Sherpas for information about how you can make a contribution to web standards all year long. There’s a new project in the works (I’ll supply the URL when it’s available) that is meant to answer the question “I’ve got my blue beanie on. Now what? What can I do besides wear a toque?” That will help you find ways to learn, participate, and contribute.

 

SXSW Image Gallery

As I mentioned, I want to give the new WordPress Image Gallery a try. I gathered up some photos from the 2011 SXSW Interactive Conference to use as an experiment.

The results? Easy to set up, easy to edit, easy to add titles and alt text. I don’t like that the thumbnails open in a separate window and that the Back button has to be used to return to the gallery. Putting only two thumbnails in each row would make the images large enough that users wouldn’t be so prone to click for a larger view, but still, that’s a drawback.

Guest Post: 7 Things Everyone in Your Organization Should Know

This weekend, I attended the Online News Association Conference in Boston. It was a great gathering of multimedia developers and those concerned with all things digital – quite a fantastic event. I had the opportunity to participate on a panel called “If I Were in Charge, I’d…” Proposals for the panel were solicited before the conference, and mine was one of six selected. The presentation is below, but I wanted to provide a few more details, beyond the eight minutes I had to present. And I wanted to see if there was any feedback or critique. Rob Quigley live blogged the entire session, if you’d like to see the other topics and presenters.

Are you in charge? Maybe you’re an editor or a general manager of a newsroom, or perhaps you’re a dean or director of a university organization. Maybe you lead a media company that specializes in PR or Advertising. Do you consider yourself in charge of a digital media organization? And, does everyone in your organization know that they work in a digital media organization?

Does everyone in your organization know what an API is and why that’s important? Do they know what SEO means and what value it brings the organization? Are they familiar with the type of CMS your organization uses and how it works? And do they know some basic concepts like HTML or how to embed a video or widget onto another Web page?

If I were in charge, I’d be making sure everyone associated with the organization – every reporter, columnist, copy editor, photographer, videographer, every faculty member, every associate – I’d even go as far as saying that every person who answers the phone – knows these things and more. This is not the template for a two-hour workshop. This is not a quick fix or a tweak. This is a tectonic shift in the ways that people envision what it is they are expected to know and do and the kind of organization for which they work.

I propose 7 Things Everyone in a Digital Media Organization Should Know:

1. Everyone would know the history and background of the Web.

Why? Because it’s fun to study the history of something. And, it provides a foundation for understanding the future. By learning about the role of the ARPAnet (and later Tim Berners-Lee in Switzerland), the people involved and the culture surrounding the development of the Internet, we begin to see what makes this environment different. We can learn about the origins of hacker and open source culture and why this presents an alternative and a complement to commercialization. Oh, and we’d know that Al Gore didn’t invent the Internet, and that he never actually said he did.

2. Everyone would understand the key terms of digital media.

We must speak the same language in order to collaborate and have a shared understanding. You can’t have the tech folks spewing jargon while the rest of the organization stands around the sidelines and rolls their eyes. We’re not talking about buzzwords and marketing posturing, but things that everyone needs to know, like what an Application Programming Interface (API) is and why you might use one, why your organization should have them and who benefits from them. When we talk about the “cloud,” what do we mean and how is that different than where we’ve been hosting things all along? What is Search Engine Optimization and how does that compare to Social Media Optimization? What do we mean when we use the phrase “data visualization” and what are these platforms (frameworks) of Ruby on Rails and Django? People may not actually perform these functions or use these platforms, but they should have a clue about what they are and what they do.

3. Everyone would know how Google makes money.

Why? Because Google makes a lot of money. And I bet most of your organization has never paid anything to Google to use their multitude of services. Google has a $170B market cap, one of the most successful companies in history. They made the majority of their $29B in revenue in 2010 with advertising – those little ads you see on the sides and the sponsored links on the top of your Google search. But it’s the power of their search algorithm and their ability to provide products to us that are useful and that integrate with our lives, that allows them to continue to learn more and more about us. Knowledge is power, right?

4. Everyone would be able to explain why social media is important.

No, Twitter’s not about what you ate for breakfast. And Facebook’s not just a place to upload photos of your kid’s birthday party. A modern media organization understands that interaction is the key. The technologies known as Web 2.0 drive interaction with the audience that was unheard of in prior eras. They make media a conversation, and those conversations have value. People are gaining an expectation of participation because of their participation on social networks, and they will begin to find media irrelevant that don’t give them something to do, don’t provide a user experience. Get ready for new social platforms to be introduced over time. Google, who is the king of search, is now trying to develop social competencies with Google+. Location-based platforms, reviewer sites, online games… new things are coming out every minute. But you can’t expect people to understand them if they don’t use them. People should be encouraged to try new things. And they should be comfortable with the idea of using social media to develop their own brand or to support that of the organizations with which they work.

5. Everyone would understand how data can tell a story.

That doesn’t mean that everyone will know how to program a data visualization. But everyone should understand that a data visualization is an important element of storytelling, just like text, photos, video, other graphics. The benefit is the interaction, the ways that you develop to integrate the user into the story. There are a million ways to do this, and we are just starting to see brilliant examples of this type of work by organizations like the New York Times, the Guardian, the LA Times, the Texas Tribune, the Associated Press, the Chicago Tribune, ProPublica and more. The example I used in my presentation is the Rent vs. Buy interactive that the New York Times did several years ago, but is still updated on their site. You can read a story about whether or not you should rent or buy a house, but how does that really help someone make their own decision, with their own variables? Everyone needs to understand the power of this type of information and comprehend their role in creating it. How would they propose such a project? Who will they work with? What tools can they use and what resources are out there? This doesn’t mean someone needs to tell them or train them. They need to be focused enough on the importance of it that they are seeking out this information on their own and figuring out ways to integrate it into their own workflow. That’s how the people who are doing this kind of work learned it… by figuring it out themselves.

6. Everyone would know a little HTML (and some CSS for that matter).

Why? Because it’s the language of the Web. If you don’t know the language, you can’t understand the platform. You need to know HTML to maximize your ability to customize the things you do in blog or content management systems. And it is the foundation for more advanced coding, like CSS, Javascript, JQuery and on and on. For the most part, code snippets are available in libraries, so what most people are doing when they work in code is tweaking and customizing, rather than cranking it out from scratch. It’s not that everyone should become a programmer, but it wouldn’t hurt to know a bit about how it all works. Knowing a little html can go a long way in being able to read and tweak code (like reading a foreign language versus writing or speaking it). And, it’s not hard. It’s a markup language, using tags to give meaning to text. It fits in perfectly with a communicator’s skill set. And it’s fun to learn.

7. Everyone would understand the elements of a digital-, and increasingly mobile-, first strategy.

Until this happens, your organization will still be mired in legacy culture. People need to understand how it changes the processes of the newsroom, how their roles change, and most importantly, how it affects the experience of the user. Breaking a story on Twitter is the new “scoop.” The analysis and conversations that happen after is what a news organization does now. Sure, you still produce a paper or newscast, but that’s only a part of what you do. It’s what you share all day long and what others share of the work that you are doing that establishes your brand and your value. You have to re-prioritize that to your organization.

So, as I said above, this isn’t about developing a 2-hour workshop and then going back to the way things have always been. We’re not a weekend behind and then we’re all caught up. Digital media has been developing for the better part of two decades, and it’s time everyone who works in media realizes they work for a digital media organization. We can’t solve the pressing problems of the field with just a few who are in-the-know. We need everyone to be working toward the same goals, gaining knowledge and contributing to the solutions. This will require constant, ongoing and consistent messaging in the following areas:

  • Leadership must evangelize from the top – it’s not enough to have the tech people at the grass roots take responsibility for training the whole organization. Leadership must communicate that it is everyone’s responsibility to keep up-to-date and learn. It must be a consistent part of all messaging, all meetings, the mission and goals of the organization.
  • Foster a meetup culture – how can they learn? Well, for one, they can start attending any of the multitude of professional meetups that are probably already happening in their area. These resources exist. There are regular presentations on relevant topics, and you don’t even have to organize them. Just make sure your organization knows that it is an expectation that people participate. And, people should gain a level of comfort in going to groups where they don’t feel like they have a command of the material. Don’t be afraid to be the stupidest person in the room. In fact, that’s preferable. That’s when you learn. And, like a lot of this stuff, it’s fun. You meet people, who may be able to help you professionally, or guess what..? You just might end up with a few new friends. Personally, I view my professional network for its power in assisting my students, but I really enjoy meeting people and learning about these topics, and have made some wonderful contacts in the process. Don’t attend a meetup that you dread or hate. Find one that interests you. They’re out there.
  • Encourage innovation through exploration – It should be expected that people try new things when they are released. Get on Google+, try Foursquare and Gowalla, sign up for Storify… Guess what? They’re free. Yes, they take time. But if that’s what your job is, then you are using that time wisely. Having a little knowledge about a new platform and some perspective can be quite beneficial when trying to weigh options and quickly make decisions about the usage and relevance of platforms. And you don’t want to ignore new technologies to the point that you suddenly have “unexpected” time on your hands, do you?
  • Read tech/media publications – This should be a given. We expect people to keep up with news, be on top of things, know their beats, keep up with trends. Well, this is our business now, so shouldn’t we expect people to keep up with it? Know about the key players, tech mergers, new media projects, startups. There are numerous publications, but Wired, Fast Company and a multitude of blogs, like Mashable, 10,000 Words and TechCrunch, are a good start.

I have had success in sharing these concepts with students. My feeling is that they gain an enthusiasm for the future of media by having it presented in this manner. These are opportunities, not annoyances. There are challenges, but everyone needs to be on board so they can be overcome. If I were in charge, I’d find a way to make everyone excited about the future of media.

Are you in charge? What do you think about these points? Does everyone in your organization know these things? Maybe you’re not “in charge.” I’m not either. This was just a hypothetical exercise. But what do you think your organization should do to integrate these concepts, if you think they are valid at all? Let me know if you have any additional items or if you just think I’m full of it. I’ll be interested in any discussion generated.

Some resources I have used:

The Internet: Behind the Web – it’s an old video, and is probably only available on VHS (I have since dubbed it DVD), but it’s a great way to learn about the history of the ARPANet, Internet and Web. It has some abridged content from the longer series Nerds 2.0.1

Download: The True Story of the Internet – this is a great series that covers Browsers, Search, E-Commerce and Social Networking. It brings everything up to date after the above video.

Hacks/Hackers Glossary – a great set of terms and definitions developed by the main Hacks/Hackers organization. Their a meetup group, probably a chapter in your area, that brings journalists and programmers together.

Lynda.com – this is a software and programming training library. It costs money, but on a month-by-month basis, it’s cheaper than purchasing a book to learn a particular language or platform.

South By Southwest – You should attend conferences. ONA is fantastic. Another one that I love is the South By Southwest Interactive Festival. It’s huge and broad, but nothing has influenced my approach to teaching media than my regular attendance, year after year, at this event. And, like a lot of these recommendations, it’s fun. Trust me on this one. Plan to attend SXSW in March.

Guest Post by Cindy Royal. This post was originally published at Cindy’s Take on Tech.

This bugs me about Chrome

I’ve switched from Firefox to Chrome. Firefox kept getting slower and slower, often unresponsive, and I flat gave up on it. Chrome is faster, but a couple of things bug me.

  1. I like to open links in a new tab. I like it that way because I want to see what it was about while leaving the original page open. As soon as I check out whatever it was, I often close the new tab and go back to the original article. Here’s the problem: I want the new tab to become active when I click on the link. I cannot find a way to make that happen in Chrome.
  2. There’s no page title displayed at the top of the browser. I often want to see that title up there at the very top of my screen while I’m doing something lower on the screen, like creating a tweet in Seesmic, and want to type the exact title as part of the tweet. I can’t find a way to make page titles viewable either.
Do you know if either of these things are doable in Chrome?

Not Stanford Binet but Browser Choice: Updated

It turns out that this story was a hoax. Mashable and BBC News have both confirmed it.

Sorry to have fallen for the story along with everyone else. But, I have to say, hoax or no hoax, if it shamed even one person into upgrading from IE 6 to a newer browser . . .

The headline on Mashable was IE Users Have Lower IQ Than Users of Other Web Browsers [STUDY]. According to Mashable, it was actually a pretty big study: 101,326 people divided into groups according to which browser they use. That was correlated with the average IQ of the users.

It turns out that all those Internet Explorer for Dummies books weren’t just part of the Dummies series. Yep. All the extra smart people are using Opera. And the longer you stick with IE, the comparatively dumber you get. Or, as the study concludes, “individuals on the lower side of the IQ scale tend to resist a change/upgrade of their browsers.”

Here’s a chart of the data collected in the study.

IQ by browser

 

The press release from Canadian company AptiQuant who did the study suggests,

Internet Explorer has traditionally been considered a pain in the back for web developers. Any IT company involved in web development will acknowledge the fact that millions of man hours are wasted each year to make otherwise perfectly functional websites work in Internet Explorer, because of its lack of compatibility with web standards. The continuous use of older versions of IE by millions of people around the world has often haunted web developers. This trend not only makes their job tougher, but has also pulled back innovation by at least a decade. But with the results of this study, IT companies worldwide will start to take a new look on the time and money they spend on supporting older browsers.

The study, titled “Intelligence Quotient (IQ) and Browser Usage” is available as a downloadable PDF document.

Now for the fun. Reactions!

A lot of people were quick to step up and say they’d been using Opera (or Chrome) for a long time. I’m going to ignore them. Let’s get some other reactions.

 

Oh, so many jokes here. > Study: IE users have lower IQ: http://on.mash.to/pNEwdD (@mashable) #browsers #web #w2pFri Jul 29 16:47:58 via Seesmic

 

 

Hate to laugh, but I am! 😉 / RT @mashable: IE Users Have Lower IQ Than Users of Other Web Browsers [STUDY] – http://44d.co/fupmFri Jul 29 14:01:45 via HootSuite

 

 

A recent study confirms what we’ve known for ages: IE6 users are stupid 😛 http://t.co/Sd9uVYE Also, @Opera users are the smartest (!)Fri Jul 29 17:05:44 via Twitter for Mac

 

 

Now there is proof: IE Users Have Lower IQ Than Users of Other Web Browsers http://t.co/tWhWfhSFri Jul 29 17:07:26 via web

 

 

i wasnt going to share this, as to not to offend any IE users, but i realized they are prob. too stupid to read it anyway http://j.mp/qGmwc8Fri Jul 29 15:03:41 via TweetDeck

 

 

 

Like Elaine, I was ROFLMAO when I first read this. For someone like me who makes web sites, IE has been the archenemy for a long time. AptiQuant didn’t make the study to amuse us, however. They were looking for information to help convince corporate decision makers who support older versions of Internet Explorer that it was a bad business decision and that they should move their companies on to something more modern. Kudos to AptiQuant if that is the effect of the study.

What was your reaction? Give us your best IE joke.

Cross posted at BlogHer.