How To Write a Thesis Statement
What is a Thesis Statement?
Almost all of us—even if we don’t do it consciously—look early in an essay for a one- or two-sentence condensation of the argument or analysis that is to follow. We refer to that condensation as a thesis statement.
Why Should Your Essay Contain a Thesis Statement?
- to test your ideas by distilling them into a sentence or two
- to better organize and develop your argument
- to provide your reader with a “guide” to your argument
In general, your thesis statement will accomplish these goals if you think of the thesis as the answer to the question your paper explores.
How Can You Write a Good Thesis Statement?
Here are some helpful hints to get you started. You can either scroll down or select a link to a specific topic.
How to Generate a Thesis Statement if the Topic is Assigned
Almost all assignments, no matter how complicated, can be reduced to a single question. Your first step, then, is to distill the assignment into a specific question. For example, if your assignment is, “Write a report to the local school board explaining the potential benefits of using computers in a fourth-grade class,” turn the request into a question like, “What are the potential benefits of using computers in a fourth-grade class?” After you’ve chosen the question your essay will answer, compose one or two complete sentences answering that question.
Q: “What are the potential benefits of using computers in a fourth-grade class?”
A: “The potential benefits of using computers in a fourth-grade class are. ”
A: “Using computers in a fourth-grade class promises to improve. ”
The answer to the question is the thesis statement for the essay.
How to Generate a Thesis Statement if the Topic is not Assigned
Even if your assignment doesn’t ask a specific question, your thesis statement still needs to answer a question about the issue you’d like to explore. In this situation, your job is to figure out what question you’d like to write about.
A good thesis statement will usually include the following four attributes:
- take on a subject upon which reasonable people could disagree
- deal with a subject that can be adequately treated given the nature of the assignment
- express one main idea
- assert your conclusions about a subject
Let’s see how to generate a thesis statement for a social policy paper.
Brainstorm the topic .
Let’s say that your class focuses upon the problems posed by changes in the dietary habits of Americans. You find that you are interested in the amount of sugar Americans consume.
You start out with a thesis statement like this:
This fragment isn’t a thesis statement. Instead, it simply indicates a general subject. Furthermore, your reader doesn’t know what you want to say about sugar consumption.
Narrow the topic .
Your readings about the topic, however, have led you to the conclusion that elementary school children are consuming far more sugar than is healthy.
You change your thesis to look like this:
Reducing sugar consumption by elementary school children.
This fragment not only announces your subject, but it focuses on one segment of the population: elementary school children. Furthermore, it raises a subject upon which reasonable people could disagree, because while most people might agree that children consume more sugar than they used to, not everyone would agree on what should be done or who should do it. You should note that this fragment is not a thesis statement because your reader doesn’t know your conclusions on the topic.
Take a position on the topic.
After reflecting on the topic a little while longer, you decide that what you really want to say about this topic is that something should be done to reduce the amount of sugar these children consume.
You revise your thesis statement to look like this:
More attention should be paid to the food and beverage choices available to elementary school children.
This statement asserts your position, but the terms more attention and food and beverage choices are vague.
Use specific language .
You decide to explain what you mean about food and beverage choices. so you write:
Experts estimate that half of elementary school children consume nine times the recommended daily allowance of sugar.
This statement is specific, but it isn’t a thesis. It merely reports a statistic instead of making an assertion.
Make an assertion based on clearly stated support.
You finally revise your thesis statement one more time to look like this:
Because half of all American elementary school children consume nine times the recommended daily allowance of sugar, schools should be required to replace the beverages in soda machines with healthy alternatives.
Notice how the thesis answers the question, “What should be done to reduce sugar consumption by children, and who should do it?” When you started thinking about the paper, you may not have had a specific question in mind, but as you became more involved in the topic, your ideas became more specific. Your thesis changed to reflect your new insights.
How to Tell a Strong Thesis Statement from a Weak One
1. A strong thesis statement takes some sort of stand.
Remember that your thesis needs to show your conclusions about a subject. For example, if you are writing a paper for a class on fitness, you might be asked to choose a popular weight-loss product to evaluate. Here are two thesis statements:
There are some negative and positive aspects to the Banana Herb Tea Supplement.
This is a weak thesis statement. First, it fails to take a stand. Second, the phrase negative and positive aspects is vague.
Because Banana Herb Tea Supplement promotes rapid weight loss that results in the loss of muscle and lean body mass, it poses a potential danger to customers.
This is a strong thesis because it takes a stand, and because it’s specific.
2. A strong thesis statement justifies discussion.
Your thesis should indicate the point of the discussion. If your assignment is to write a paper on kinship systems, using your own family as an example, you might come up with either of these two thesis statements:
My family is an extended family.
This is a weak thesis because it merely states an observation. Your reader won’t be able to tell the point of the statement, and will probably stop reading.
While most American families would view consanguineal marriage as a threat to the nuclear family structure, many Iranian families, like my own, believe that these marriages help reinforce kinship ties in an extended family.
This is a strong thesis because it shows how your experience contradicts a widely-accepted view. A good strategy for creating a strong thesis is to show that the topic is controversial. Readers will be interested in reading the rest of the essay to see how you support your point.
3. A strong thesis statement expresses one main idea.
Readers need to be able to see that your paper has one main point. If your thesis statement expresses more than one idea, then you might confuse your readers about the subject of your paper. For example:
Companies need to exploit the marketing potential of the Internet, and Web pages can provide both advertising and customer support.
This is a weak thesis statement because the reader can’t decide whether the paper is about marketing on the Internet or Web pages. To revise the thesis, the relationship between the two ideas needs to become more clear. One way to revise the thesis would be to write:
Because the Internet is filled with tremendous marketing potential, companies should exploit this potential by using Web pages that offer both advertising and customer support.
This is a strong thesis because it shows that the two ideas are related. Hint: a great many clear and engaging thesis statements contain words like because. since. so. although. unless. and however .
4. A strong thesis statement is specific.
A thesis statement should show exactly what your paper will be about, and will help you keep your paper to a manageable topic. For example, if you’re writing a seven-to-ten page paper on hunger, you might say:
World hunger has many causes and effects.
This is a weak thesis statement for two major reasons. First, world hunger can’t be discussed thoroughly in seven to ten pages. Second, many causes and effects is vague. You should be able to identify specific causes and effects. A revised thesis might look like this:
Hunger persists in Glandelinia because jobs are scarce and farming in the infertile soil is rarely profitable.
This is a strong thesis statement because it narrows the subject to a more specific and manageable topic, and it also identifies the specific causes for the existence of hunger.
Produced by Writing Tutorial Services, Indiana University, Bloomington, IN
Writing Tutorial Services
Center for Innovative Teaching and Learning
Wells Library Learning Commons, 1320 E. Tenth St. Bloomington, IN 47405
Phone: (812) 855-6738
Thesis 2: The missing design and template manager for WordPress
The easiest way to manage (and tweak)
your WordPress designsвЂ¦
If you want a beautiful web design that you can customize from the comfort of your WordPress dashboard, Thesis Skins are the answer you’ve been looking for.
With built-in tools like a patent-pending color scheme picker and golden ratio typography controls, Thesis Skins are designed to make your website more effective while letting your creativity shine.
The Classic Responsive Skin will make your site look great on any device.
See all of our Skins in action on our demo site!
Every copy of Thesis comes with the Classic Responsive Skin, which has been meticulously optimized for performance, search engines, mobile devices, and people just like you.
That’s rightвЂ”after installing Thesis, you’ll have a responsive website that works seamlessly on mobile devices everywhere. And we’re just getting started…Read on!
Total WordPress template control (no code required!)
There’s a dirty little secret other theme companies don’t want you to know:
With the traditional WordPress theme and child theme architecture, the only way to edit templates is to get your hands messy with code.
Any template WordPress can understand can be created and customized using [Thesis’] new streamilined drag and drop interface…This is all possible without writing a single line of PHP or HTML.
And if you want to add a custom template? Forget itвЂ”you better be very comfortable with WordPress, an FTP client, a text editor, and of course, code.
If that strikes you as overkill or if you find that intimidating, you’re not alone.
Basically, if you want to add or change anything outside of the default state of other WordPress themes or child themes, you’re going to need to code…or else hire someone to code for you.
But it doesn’t have to be like this! Here’s the deal:
The traditional WordPress theme and child theme architecture is both limited and outdated. In order to have total template control without messing with code, you need a new architecture.
Thesis 2 is that architecture.
Thesis blasts through the limitations of the old WordPress template system and brings you total template control with our patent-pending visual template editor .
The Thesis Skin Editor gives you visual, point-and-click control over your templates.
This means that no matter which Skin you use, you can control all of your templatesвЂ”and everything on themвЂ”with Thesis’ visual template editor.
Thesis 2.1 is fun! The idea of placing elements wherever I want in templates is too easy.
You don’t have to hire a developer, and betterвЂ”you don’t have to wait another minute to make that change to your website. With Thesis, you can pop open the template editor and BOOMвЂ”you can make it happen right now .
(And hey, if you’re a hardcore developer like me and still want to add your own code, you can do that, too. In fact, with the Thesis API, you can do just about anything.)
Smart design controls = better customizations
Let’s face it: No matter which WordPress theme you use, sooner or later, you’re going to want to customize your design for your specific needs.
See how easy it is to edit and customize your Skin!
click to watch video ↑
Plenty of themes offer design options (a trend Thesis started in 2008), but they don’t offer any smart direction when it comes to those options.
For example, if you’ve ever used a color picker before, you might have felt disappointed by the haphazard nature of selecting a single color out of millions of possibilities.
IвЂ™ll continue to send my customers your way, because I believe in what youвЂ™re doing and why you do it.
And what about typography? If you’ve ever messed with font options before, you may have noticed that you can’t change any single aspect of typography and hope that your design will improve.
This is because even a small typographical tweak may necessitate adjustments to many aspects of your design!
And this matters, too, because your visitors are subconsciously aware of the orderвЂ”or dis orderвЂ”your typography is communicating to them.
When your goal is running a beautiful, successful website, every pixel matters вЂ”and poorly-implemented design options simply aren’t going to cut it.
Easily customize your design with Thesis’ patent-pending color scheme picker.
That’s why Thesis 2 is chock-full of smart design options that go the extra mile to ensure that every change you make is a good one.
Our new, patent-pending color scheme picker gives you infinite customization ability in an easy, point-and-click interface. With Thesis, you can create mathematically-precise color schemes in seconds .
Let Thesis creator Chris Pearson take you on a tour of the Skin design options.
click to watch video ↑
And if you change your font or font size, Thesis will adjust your entire layout to ensure maximum readability and comfort for your site’s visitors. (You read that rightвЂ”Thesis is now tuning typography for individual FONTS! No other software on the planet can do this. )
The bottom line? Thesis 2 is like your own personal designerвЂ”an innovative new system that helps turn your customization dreams into a pixel-perfect reality.
Custom templates tailored to your WordPress installation
With other themes, “custom” is marketing speak for “you’re gonna need code for this.”
Thesis, however, respects the meaning of the word “custom” and thoughtfully scans your WordPress installation to incorporate anything you might have added to it.
Thesis automatically creates templates based on your WordPress settings. You can also create custom templates on the fly…without code!
If Thesis detects custom post types or custom taxonomies. it will create special templates for each of these items in your Skin (and it doesn’t matter which Skin you’re using!).
No matter what kind of site you’re running on WordPress, Thesis will adapt to your environment and give you a code-free way to control it.
I love the template support for custom post types. That’s been a great help for a complex site I am working on.
Also, if you want to create your own custom templates on the fly, you can do it from the comfort of the visual template editorвЂ”no FTP clients, text editors, or other technical things required.
(Seriously, after using Thesis for a little while, you’ll be amazed that we ever used complicated tools like that for something so simple!)
Boxes are like apps for your Thesis website
Let’s say you want an email signup form in your sidebar. Or maybe you want some social sharing widgets below your headline. Or maybe you want “popular posts” in your sidebar.
Before Thesis 2, the ONLY way you could get the functionality you want, where you want, was either by hiring a developer, installing yet another potentially inefficient plugin, orвЂ”heaven forbidвЂ”code it yourself.
Drop new functionality into your web designвЂ”no code necessary
Now you can find a Thesis Box that has the functionality you want, and simply drag and drop it into your template in the patent-pending visual template editor …
вЂ¦and YOU’RE SET.
With Thesis, you can easily add any kind of functionality to your site.
What’s even better is this: You can make Thesis Boxes show up exactly where you wantвЂ”and configure themвЂ” without ever editing a file or seeing a line of code.
(It’s not that we think code is bad; we just think you’ll agree that the visual template editor offers a more efficient, better-organized way to do the stuff you need to do with your website!)
Want a Box on your category template? No problem.
Want a Box on JUST your home page? Drop it right where you want it.
Spent 48 hours with Thesis 2.1. The verdict? “It’ll speed up the development by ten folds.” You’ve nailed it, Chris.
This stuff used to require ugly, conditional code. Now it’s only a couple of clicks away.
The bottom line? Thesis Boxes give you the functionality you wantвЂ”completely integrated with WordPressвЂ”precisely where you want it.
Boxes will help you “power up” your Thesis website
Want to connect your AWeber email newsletter account to Thesis? There’s a Box for that.
If you want to do something that Thesis doesn’t do by default, there’s a good chance we’ve built a Box for it.
I love Thesis. It flat out works.
And if we haven’t built a Box for it, there’s an even better chance that somebody else already has (because Boxes are easy to build, and the Thesis community loves ’em!).
Here’s a sample of Boxes that are currently available for free to Thesis Professional license holders:
- AWeber вЂ” drop customizable Aweber forms in your templates
- MailChimp вЂ” drop customizable MailChimp forms in your templates
- Twitter вЂ” Tweet button and Twitter card functionality
- Facebook Like вЂ” full open graph capabilities
- Google +1 вЂ” Google +1 button
- LinkedIn Share вЂ” share button
- Pinterest Pin It! вЂ” Pin It! button
- Thesis Developer Tools вЂ” unleash advanced Thesis functionality
Here’s why Thesis 2 is the perfect theme for ranking higher in search engines
Do you want your WordPress blog to rank higher in search engines? A silly question, I knowвЂ¦ Who doesn’t?
In order to give your site the best opportunity to rank well, you need to focus on both performance and optimization .
Thanks to its remarkably efficient new architecture, Thesis 2 offers performance capabilities that no other theme can match. Not only does Thesis 2 serve streamlined, search engine optimized HTML5, but it also minimizes HTTP requests, regardless of the Skin you’re using!
(That’s geek-speak for “your site loads faster because it uses fewer resources.” Search engines LOVE this kind of thing.)
I look forward to building some incredible websites for local Santa Barbara business owners with Thesis 2.1.
And with “one click easy” tools for additional optimization, Thesis 2 has everything you need to establish an authoritative website and dominate the search engines.
Let’s look at some of these tools and see how you can use them to enhance your site immediately.
Increase your search engine clickthrough rate with Google Authorship
According to Search Engine Land. a leading publication about search engine news, they’ve seen reports that adding support for Google Authorship has increased clickthrough rates of search results by 30% to 150% or MORE.
With Thesis 2, implementing Google Authorship on your site is as easy as pasting your Google+ profile link in a box.
And if you run a multi-author site? Thesis 2 smartly integrates with WordPress and allows you to supply a Google+ profile link for each of your authors. Look for this option on each author’s WordPress User Profile page.
One again, you won’t have to tinker with PHP, HTML, CSS, files, or anything else because Thesis 2 makes Google Authorship “one click easy.”
Separate your site from the pack with Markup Schema
Markup schema is part of the new standard used by search engines to understand content on the web.
Right now, major search engines like Google, Bing, and Yahoo! are looking for this code on your site so they can improve their search results.
The implications here are serious: If your site doesn’t leverage markup schema, it’s probably going to lose rankings to another site that does.
But if you’ve got Thesis, you’re going to be the one taking those rankings .
Thanks to a lightweight HTML structure that’s enriched with markup schema, Thesis can help you give search engines precisely what they want.
And unlike other themes, Thesis’ markup schema is built for the future. The list of potential markup schema is enormous and ever-growing, so a good system must be able to account for this inevitable growth and change.
Wow. ItвЂ™s more intuitive, stout, and simpler to use! This is genius work right here; thank you guys so so much!
We built Thesis 2’s markup schema system on this principle. With Thesis, Skins can not only tap into the built-in markup schema for things like articles, recipes, and reviews, but they can also add any other valid markup schema as well!
The bottom line? No matter which type of markup schema you need for your site, you can do it with Thesis.
Improve your SEO right now: Get your site verified by Google and Bing
When you’re looking to rank higher in search engines, all the best search engine optimization experts will tell you to get your site listed in both Google and Bing’s webmaster tools.
Before Thesis 2, if you wanted to verify your site, you’d have to add some custom code into your <head> …but that just gave most people a headache .
Seriously, once I started I was amazed at how easy [Thesis] was to use.
With Thesis 2, we give you a simple option field where you can paste your verification code without ever opening up a file or thinking about code.
Critical tools. Simple interface. No nonsense. Thesis 2 makes the tough stuff easy for you.
Finally! Control your 404 page content…without code
Despite the fact that your 404 page is a fundamental and important part of your site, you can’t control its content with a typical WordPress installation.
Thesis is a game-changer. Again. Loving it!
But Thesis 2 isn’t your typical WordPress themeвЂ”it has a simple option that lets you select any WordPress page to serve as your 404 page content.
With Thesis 2’s mission-critical site tools and “one click easy” controls, you can customizeвЂ”and optimizeвЂ”every last detail of your site.
You don’t just get Thesis,
you get the entire Thesis community
The experts pictured above trust Thesis for three main reasons:
First, because Thesis makes it easy for them to do the things they need to do to run a successful website.
Second, because they know that Thesis’ creator, Chris Pearson, compromises nothing when it comes to quality, innovation, and sweating the details.
Woke up this morning and my first thought was that I cannot wait to dive back into Thesis 2.1. That should tell you something.
And the thirdвЂ”and most importantвЂ”reason the experts trust Thesis? Community.
When you purchase Thesis, you’re not just getting the most powerful WordPress theme on the planet; you’re also becoming part of the Thesis Community.
When the experts need help, they know they can turn to the Thesis community for answers, assistance, or even just a word of encouragement when they need it most.
What a great team you are, would recommend Thesis to anyone, with first class support….You and your team should be called the dream team.
With 3 full-time experts on staff, we offer direct email support and pride ourselves on being the bestвЂ”and most helpfulвЂ”in the business.
In addition to email support and detailed documentation, we also offer members-only community forums where you can interact with Thesis pros and get answers to just about any question you might have.
The bottom line is that we are dedicated to providing you with a truly remarkable support experience.
And best of all?
Every Thesis purchase comes with direct email support and members-only forum access. so no matter where you find yourself, you’ll always have a place to turn if you need some help.
It’s time to make your site everything you want it to be. It’s time for Thesis.
All text and design is copyright 2008–2016 DIY themes, LLC. All rights reserved.
O ptimal width for 1024px resolution?
14 September 2006
Let’s face it: The jump from developing for 800×600 to 1024×n is inevitable; not only inevitable, but just around the corner, too. Many of you are considering the jump. Some of you have already leaped. I suspect that some time in 2007 most of us will knock out comps optimized for 1024px resolution rather than 800px if we’re not doing so already.
But perhaps just as important as when it will happen is how. What’s the proper width for a layout optimized for 1024?
With 800×600 it’s easy: Account for browser chrome and scrollbars (usually 40-50px) and then use as much of the remaining space as possible. This usually means a layout width of 750-760px.
If we use the same logic for 1024, browser chrome is still the same, so that leaves us with 974-984px as the “ideal” width. However, many users (including myself) don’t browse full screen, especially as display resolution in increased. Almost as if there’s an inverse relationship between browser width and display resolution — as the display gets wider, the browser width gets smaller (proportionately).
Additionally, in a time we all are, or should be, considering grid usage in layouts, is a random number like 974 an optimal number for dividing a layout into its necessary elements — sidebar(s), main content area, and so on? Fluid/liquid layouts are another issue, but even those have to be optimized for a minimum width.
I’ve been using 960 for some time now, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities). I’d love to hear what all of you are wrestling with.
Update: Jon (first comment) brings up an interesting point: If your layout includes ads, 960 seems to facilitate IAB widths fairly well.
Update II: Jeremy (comment #22) makes a good case for fluid instead of fixed-width. My thinking here was aimed at optimizing for 1024 resolution and not necessarily 1024 fixed-width sites, per se (there’s a difference). Hence, I’ve changed the title of this article as it appears to have been misleading.
Shameless Workshop Promotion
This is one of the many topics we’ll cover in-depth in my all-day workshop, “Designing Elegant User Interfaces”. Only 4 weeks left before showtime — register now if you haven’t done so already!
Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
14 September 2006 at 09:43 AM
Just being pedantic…
960 is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, and 960.
Lots of IAB widths near those numbers, too.
Thanks for the tip.
14 September 2006 at 09:45 AM
Good point, Jon…
14 September 2006 at 09:49 AM
Most Windows users I know browse fullscreen, even if they have gargantuan displays (1400+ pixels wide)… I just don’t get it. Maybe they love whitespace?
14 September 2006 at 09:50 AM
We have been designing at 950 width for about a year now whenever developing a site intended to a mature, online-conscious audience.
14 September 2006 at 09:54 AM
Yeah, I’ve found 960 to be a great number for the same reasons you have, but I’m trying more and more these days to design elastic layouts that will degrade to 800 and skinnier (which is, of course, easier said than done when there are concrete image sizes to work with). I think Jakob Nielsen’s latest Screen Resolution and Page Layout guidelines really hit the nail on the head.
14 September 2006 at 09:54 AM
960 does seem to be a great “optimal” width thanks to the divisibility and the fact that it comes close to hitting several IAB sizes.
FWIW, I’ve found that 996 seems to be the absolute biggest you can get away with w/o causing scroll bars in any of the major desktop browsers.
14 September 2006 at 09:58 AM
I’m a latecomer to the web design party, currently redesigning my personal site to 1000px max width, with fixed width navigation, sidebar and liquid content area. It gives the user choice in browser width but also lets my design be viewed as intended. And 1000px is a nice round number, even though it was designed with no grid. (As a Tschichold/Muller-Brockmann disciple, it pains me to say that.)
14 September 2006 at 09:59 AM
Good to know, Jeff (996). Hadn’t pushed the limit that extensively yet, as I did back in the day for 800×600 (I think 768 was as wide as I could get, if I recall).
14 September 2006 at 10:00 AM
For three column layouts at 1024, I try to make the second column end at or very near 760px and put “secondary” information in the third column. That way, if the user is on an 800px monitor the site still feels like it naturally fits their browser, in a sense.
I’ve used either 980 or 970 before, but using 960 makes perfect sense for its divisability (that’s probably not a word).
14 September 2006 at 10:05 AM
Of course, I misspelled divisibility. And dang it, it is a word! Now I just sound stupid. And I’m rambling now. Someone stop me.
14 September 2006 at 10:06 AM
I’ve always kept it simple.
14 September 2006 at 10:21 AM
It’s cool seeing websites optimized for bigger resolutions. I just redesigned my site and made the jump as well, trying out a 900px width on a 3 column.
I always browsed full screen when I was on a pc, but now I don’t, and I’m on a mac. Don’t know why that changed……maybe screen resolution?
14 September 2006 at 10:24 AM
It would be interesting if you could track in a web analytics package the pixel widths of users’ browsers.
Although it should probably track a 5 – 10 pixel range because people who don’t browse full screen set the width themselves and it would be some arbitrary number rather than standard resolutions that are easier to track.
Reason I say this is I think the majority of people keep their browser at full screen, and this is because the majority of people use Windows.
When I was a windows user, I kept mine maximized all the time, simply because that’s what the Window’s interface encourages. Once you maximize you lose the ability to adjust and change the browser window.
On a Mac however, you can hit the green plus buttom “maximize” and it doesn’t necessarily display the browser at full-screen (at least that’s what it does on my mac). Even if one does maximize the browser one still has the ability to adjust it on a mac. I also noticed that I don’t keep my browser full screen anymore like I did when I was a windows user.
Saying many users do this is probably true, but not the majority. Not many people have large high resolution displays either. Although, a 960px width for a website wouldn’t cause any harm to people with the minimum 1024×768 resolution and a maximized window.
14 September 2006 at 10:38 AM
Yep, I go for about 950 – 960 pixels preferably.
It does appear to be true that Windows users tend to go fullscreen as it’s just so easy to do so. On Mac it’s not so easy as click the + has mixed results, for instance I tried it just now and all that happened was my browser window just fit the full height of my screen but left the width untouched.
Another interesting statistic to know is what is the maximum safe *height* vertically on a 1024 x 768 screen? I’m not in the habit of making sites that try to fit everything within the visible height completely but it’s interesting to know what content will be visible immediately without scrolling.
14 September 2006 at 10:50 AM
I always browsed full screen when I was on a pc, but now I don’t, and I’m on a mac. Don’t know why that changed… maybe screen resolution?
As Chris says, hitting the green pill on a Mac isn’t the same as hitting the maximize button on Windows. That’s part of it.
However, I for one never browsed full-screen on Windows machine either during my corporate years…
14 September 2006 at 10:55 AM
I’ve switched to designing liquid layouts almost exclusively, so this is something of a non-issue for me. I continue to mock up my comps at about a 760-740 width, since I want to make sure that everything will still fit at that size. I may start mocking up with a 960 width, though — but still going to stick with liquid that goes down to at least 740 pixels. I gotta say that I agree with Nielsen’s recent writeup as well.
14 September 2006 at 10:58 AM
I have recently made the jump to 1024 as well. After wrestling with a few widths, I too have settled on 960px for the same reasons you have stated.
14 September 2006 at 11:40 AM
I’ve recently tried 890 pixels. This provides a grid of 18 columns (40 pixels each) and 17 gutters (10 pixels each), which you can use in a variety of ways from 2 or 3 equal sized columns or a wide selection of mixed width columns. Mark Boulton has presented some useful posts on grid layouts as has Khoi Vinh. But, the best resource for theory and practice of grid layouts that I’ve read is a book named “Making and Breaking the Grid” by Timothy Samara.
14 September 2006 at 11:41 AM
980px is about right for me. When I have to convince clients that this is not too large, I point them to nytimes.com, businessweek.com and others that use 980px. forbes.com uses 1010px!
14 September 2006 at 11:48 AM
14 September 2006 at 11:49 AM
I recently designed a flexible-width site that scales from a minimum of 760px to a maximum of 960px, then remains centered for larger browser widths. It looks great on displays large and small, IMO.
14 September 2006 at 11:51 AM
Aw, fer feck’s sake! Always with the numbers. In another few years, there’ll be some new width that’s the “right” one.
How about designing sites that are flexible, that fit all manner of widths? You can still *optimise* for whatever width you want, but with a little bit of forethought and work, you can make sure that there are no horizontal scrollbars in a range of sizes.
I’m not suggesting that a site should look perfect at ridiculously minuscule or ludicrously wide sizes, but it’s certainly possible to pick a range (say, 800 pixels to 1200 pixels) and ensure that the design works within those parameters.
I’ve heard all the arguments against liquid layouts and the most plausible are:
1. They’re harder than fixed width layouts (no argument there, but I personally like that challenge) and
2. Optimal line lengths for reading.
Width the introduction of min-width and max-width in IE7, that argument is also blown out of the water.
Talking about numbers, comparing 800 to 1024 or whatever, is like comparing Pepsi and Coke. They both suck.
Phew! Quite a rant. Please excuse the outburst, Cameron.
14 September 2006 at 12:29 PM
No worries — rant away, Jeremy! It’s certainly a good point. And as one who made a good case for fluid layouts in CSS Mastery (with min/max in the 800/1200 range you suggest, no less), I can vouch for the benefits of fluid layouts.
That said, I don’t think we’ll escape the need — frequent or infrequent — for fixed-width layouts. I say that having seen both sides of the coin. I’d love to go fluid with everyone one of my projects, but I don’t think it’s always practical.
14 September 2006 at 12:31 PM
We went with 990 on the Notre Dame Forum website which might be a bit too big. You’re correct though, 1024 is right around the corner.
14 September 2006 at 12:53 PM
I was reading the article from The Man in Blue on Resolution dependent layouts just 2 seconds before hitting this article (Reading Authentic Boredom is great for taking breaks while designing – so touchГ© Cameron).
I think as the change is inevitable in 2007, this option gives a great way to have the design degrade to smaller resolutions. I first found out about this on Hicks Design. I prefer this method to fluid layouts as you can still design by pixel.
960 feels right, I start out with 940 as I always end up using shading and accents to the edges and end up making my 940 a 960 design.
14 September 2006 at 12:56 PM
Chris, the maximize button should not take up the full screen on a Mac. In theory, it should enlarge the window to a size that does not require scroll bars.
14 September 2006 at 01:28 PM
I’m glad you acknowledged the fact that not all users browse the web with maximized browsers. I too, prefer my browser non-full screen at high resolutions.
Yes, I know that there are a lot of people who do continue to browse full screen at higher resolutions, but I believe that is simply a habit picked up from smaller resolutions. As higher resolutions become more and more prevalent, users will start to catch on that they don’t need to browse full screen.
In short, increasing screen resolutions won’t continue to bring a directly proportional increase in browser size. Personally, I think that we’ll settle on an optimal size of somewhere between 800 and 1024px wide no matter what the screen resolution is.
So I echo the previous sentiments that it’s important to design for a range of resolutions, no matter what the resolution is currently the most popular.
14 September 2006 at 01:35 PM
That does make sense, I did not know that. OS X pretty much broke me of my maximize habit when I first started using it almost 2 years ago.
My point was though, OS X’s interface encourages you to adjust the window to your liking versus Windows.
14 September 2006 at 02:26 PM
I think that the divisibility of 960 is great. I’ve also found that I like to have a bit of room to breath between the content of the page and the border of the browser.
Depending on the grid that you are trying to get at, you can use 960 as your maximum width, then allow 30px or more margin for your content (at this point, you can set your margins to whatever you need to in order to get the grid size that you need). You’ll end up fitting the content into a smaller area (900px or so), but you do create more space which seems to be more comfortable for viewing – away from the edge of the page.
14 September 2006 at 02:31 PM
Great post Cameron. I’m now designing for 1024, but had one of those “smack my head” moments when I read the IAB/grid stuff…
Chris G – actually, Shaun Inman’s Mint has a “Window Width ” pepper (plug-in) that measures a users browser width:
The Window Width Pepper picks up where User Agent 007 leaves off by tracking the width of the browser window on each page load allowing you to make more informed design decisions regarding page width than you could with screen dimensions alone.
Check it out. I’ve been using it for a while now – it works really well!
14 September 2006 at 02:49 PM
I don’t think 800×600 is going away completely for a very long time; it’s life is not built around hardware support as many of us designers would like to believe… plenty of users choose it for other reasons.
Let me elaborate with an example: while I was webmaster at Northland College the director of communications had horrible eyesight and ran 800×600 to increase readability on her 17 inch monitor (it was a lot easier than changing font size preferences in firefox and IE, which is an unreliable method altogether). Once I noticed this, I saw users all over the place in a similar situation, and suddenly the webtrends reports that say I should ignore 800×600 because of our user base seemed to hold much less weight.
I think we need some more time (and an OS/Browser combo with easy to use, greater accessibility tools) before we forget about 800×600 completely.
14 September 2006 at 03:32 PM
Sweet! I use Mint already so this would be perfect. Thanks!
14 September 2006 at 04:15 PM
I think you right dan, that’s why I prefer the method I mentioned earlier that uses stylesheets depended on screen resolution. It is some extra work, but not to hard if you don’t want to be constricted by 800 wide.
800×600 is down to 17% according to the w3c, but should offcourse not be disregarded.
So I think we shouldn’t choose just one resolution, but try to more progressive in that matter and serve alternates when possible.
14 September 2006 at 05:32 PM
Years and years ago when Webmonkey.com was the only web developer/designer resource there was a great article written called Sizing up The Browsers. In that article they had a link to a PSD that contains browser windows as a layer so you can design your site accordingly. Just have a look as the file to see what I’m mumbling about…
14 September 2006 at 07:09 PM
According to xScope. you can use up to 986px if you only care about IE5-6 WIN, Safari, Firefox MAC + WIN, and NS6 MAC. If you drop NS6 off the list you can go up to 999px.
I recently made a site that used the golden ratio for the relationship between column widths. I ended up with a 926px wide site that was broken up into 10 sub-columns with 14px padding between. The layout can be broken up into columns that are 2, 3, or 5 sub-columns wide. Its slightly more complicated than that. I would upload an image to explain but I am too lazy.
14 September 2006 at 07:36 PM
Wow, I’d never even realized this. My thing has always been 1.) New Photoshop document; 2.) Width: 1024px, height 1000px; 3.) Setup guides for 32px margin.
This gives a 960px content area. And I just did 32px the first time I designed for 1024 because it’s the square root of 1024…
15 September 2006 at 01:19 AM
I’m wondering why people still do fixed width webpages in the first place. Isn’t it patronising to dictate the width of a users browser window?
Designing for fixed width is MUCH easier, granted, but I especially expect professional (business) sites to take the time to create fluid width webpages.
Look at amazon.com — it’s a nice example that it actually CAN be done professionally.
15 September 2006 at 01:50 AM
Any site at which I’ve marvelled at the prettiness has been fixed-width. Call me superficial, but I would visit Amazon more often if its width was fixed and its layout clearly under control, rather than looking like the default template of a shopping cart package.
15 September 2006 at 01:54 AM
Lately I’ve always been using 975 as a width. When developing flash sites that have a fixed canvas I use 975×560 which seems to fit quite good in every browser on a 1024×768 screen resolution.
15 September 2006 at 01:55 AM
Haha, it CAN be done professionally, but I wouldn’t say amazon.com is a great example, not even a good example.
And I don’t think most of us are talking about fixed width, we’re talking about 1024-based width. “Optimal width for 1024 resolution,” not, “Optimal fixed width for every website, ever.”
There’s no definitive answer for going with fixed, fluid, or elastic in any case.
15 September 2006 at 01:58 AM
“Most Windows users I know browse fullscreen, even if they have gargantuan displays (1400+ pixels wide)- I just don’t get it.”
Windows makes it easy – 1 click full screen, one click minimised, 1 click in the taskbar to switch programs. (maximised windows are full attention windows)
I still haven’t found out how to have a full screen browser window on my Mac Mini
So I guess with windows users, sizing a window is less important.
managing white space therefore becomes an issue for designers.
15 September 2006 at 05:54 AM
We got similar results from our long-term web-usage study: Never expect to have the full screen resolution, as many users don’t have the whole desktop available or they don’t like to maximize their browser.
15 September 2006 at 06:42 AM
It’s good to see this topic being discussed so much at present and in so many places.
I’m currently designing fluid layouts that stretch from 765px to 1000px.
Neither of these values divides up as well as 960px, however I’ve opted for percentage widths for nearly every layout element for which it makes sense so as to keep the main content a sufficiently decent width with respect to line length.
I chose 1000px as the maximum width due to line length issues at greater widths. Or more accurately, I wanted a width up to which line lengths were still suitable and 1000 was a more-or-less arbitrary choice.
15 September 2006 at 08:22 AM
My 2 pennies…
I agree with one poster that said the sites he preferred were fixed. I look at the designs I like, and typically this is the case. Digg.com for example. There are exceptions, slashdot.org. newsvine.com. in which the site is fluid and retains it’s “sex”. These sites (fluid) tend to have smaller left or right aligned header logos.
I can’t really see us pushing much more past the 1024 resolution. I mean, I personally hate browsing in a browser window bigger than 1024. But perhaps this is because I always want to experience what my users my experience.
There is a threshhold however. People simply won’t want to read something that forces their head to go from shoulder to shoulder to read something. There is a limit in what is comfortable. I think 1024 (950 + chrome) is the Optimal zone we won’t push much (if any) past.
Fluid vs. Fixed is like Emacs vs. Vim heh [Vim rocks btw. )]
15 September 2006 at 09:21 AM
Great work Cameron! Now I am very interested in how to properly use “the grid” for layout. Could you possibly expound on that a little more? As a novice designer, without a graphic design background I would love to understand how to properly use the grid to complete a design comp set for 960px or whatever the size. Unfortunately, I can’t make it to your workshop, but believe me if I had the income I would already be waiting on you. o) Take care and thanks.
15 September 2006 at 09:57 AM
Nobody has mentioned pixel density. It has been rumored that the next Mac OS version (Leopard) may introduce resolution independent display technology.
Even though it may not be “comfortable” to read wide columns in large displays, the near future should allow for designs that can scale proportionately so that row character count remains constant as the screen scales.
In other words, we’ll be able to have layouts with the same physical dimensions but with higher pixel counts.
15 September 2006 at 02:30 PM
We’re taking the plunge at my day job. Next version of the coporate site will be 960. That size works for our audience and we need the room for content. I think we had hung on to 800 X 600 for no logical reason though. We could have done this a year ago.
The new size divided up beautifully, lots of room for content and our old friend whitespace. Delicious!
16 September 2006 at 02:28 AM
According to my analysis, practically none browse maximized at 1024×768 (you need to go above 1400Г—1050 before you see a change in browsing behavior).
And, in order to support about, say, 95% of the people you need to design at a maximum width of 792px. At 90% it is 840px and you only support about 80% at 960px (all based on 1024×768 resolution).
16 September 2006 at 02:45 AM
Yep, we’re doing most sites at 960 now too – much nicer to work with than 780, far more flexibility.
16 September 2006 at 02:59 AM
We did pretty much the same analysis as Thomas Baekdal in our german weblog. The results confirm his findings.
Viewport width summary chart
That is, to support 95% you need take a viewport width of 780 pixels into account.
Viewport width at 1024 pixel chart
These figures show the viewport width of users with a screen resolution width of 1024 pixels. If you “optimize” for a width of 960 pixels, you only reach 80% of those users. Therefore it’s not wise to “optimize” based on the screen width.
16 September 2006 at 06:37 AM
By the time 800×600 is completely gone, it will be back on handhelds…
16 September 2006 at 09:46 AM
Just to reiterate what your clarifications, Cameron, even when you’re designing a liquid layout you have to pick a width to design to in Photoshop et al. As you say, choosing 960 is a handy number as it can be divided wholly by so many numbers.
Another point worth noting is that whole numbers are particularly important to Safari when creating a grid, as for some unfathomable reason, it cannot deal with decimalised percentages such as 33.33% (to create a third). Safari would round this down to 33% which is utterly irritating sometimes.
16 September 2006 at 10:37 AM
I think Barry Haanstra makes a really good point here! (Why didn’t I think of it myself. -)
I expect that more and more people are going to surf the web with devices other than PC’s in the upcoming years. Almost every new device out there is being equipped with WiFi already. Not only PDA’s, but also handheld game consoles, mp3 players (MS has announced WiFi in it’s new mp3 player called Zune, which will probably force Apple in doing the same with the Ipod) and cell phones. Right now, almost all of these screens have a max. resolution of 320×200, which doesn’t make them very fit for browsing. But already the trend with PDA’s is to supply them with VGA (640×480) screens and this trend will extend to other devices as well. Combine this with the increasing availability of (free) wireless access points and we will have to ask ourselves whether we shouldn’t be designing with a smaller resolution in mind?
16 September 2006 at 10:43 AM
Come to think of it, my reply above is a little off topic, but I’d still wonder how you guys stand on this.
16 September 2006 at 11:58 AM
The reason why I don’t want XGA resolutions and I prefer SVGA for my sites is because mobile browsers can easier reformat an SVGA site rather than an XGA one. No matter what CSS you use, the point remains: if a mobile user hits your site, his browser would be praying in its knees that you don’t use huge resolutions.
17 September 2006 at 03:41 PM
Has anyone else noticed that both 750px @ 800px and 960px @ 1024px are 93.75% of the maximum screen width?
I prefer liquid/elastic layouts so a width of 94% might be worth trying.
18 September 2006 at 04:33 AM
We use a combination of fixed and fluid sites for our clients, but i can concur that recently(last 3 months) for the fixed width layouts we have been used 964px, 984px, 985px and 986px. I hadn’t noticed the variation before your post mentioning the optimal width, which is strange as on the 800 layouts that we have done over the last few years we have used 760px as the basis for probably all fixed width layouts.
Thanks for kicking my brain into gear, i’ll probably set a regular fixed with for designs now.
18 September 2006 at 10:24 AM
You just HAD to bring up 1024. haha… and I just finished getting sign off from my office on a corporate redesign. All the comps are 750px wide. lol
Anyway great topic. I’ve been debating the transition for a while. With all the great feedback above I think i’ll have to give the 960px a try.
18 September 2006 at 06:43 PM
You do have a good point here, actually. I made my site a long while back 1024×768, but did it at 1000 pixels wide as I looked at other sites at the time that made their websites for that resolution. I can’t really hop into it and make my site 960 pixels wide anymore, but I’ll keep that in mind when I make my next one or if I feel insane and decide to reduce the website’s width by 40.
19 September 2006 at 04:02 AM
Most websites simply do not deserve to be more that 600px wide. )
19 September 2006 at 06:37 AM
Regarding Windows users’ tendency to browse fullscreen – Tony Crockford (comment 41) touched on something important:
…(maximised windows are full attention windows)
Some people find it distracting to have content from other applications visible around the edges of their browser window. Too much clutter. So they maximise their window to drive away distraction – and do so regardless of the application or the screen resolution.
Windows has a larger percentage of users who might think this way, than Max OS X or GNU/Linux. For example: the elderly; people who use computers for recreation rather than work; less tech-savvy people.
The “fullscreen” behaviour is also driven by habit. Windows dedicates a lot of screen space to chrome, but this waste reduces when the window is maximised. Users learned a long time ago that the quickest way to eliminate unnecessary scrollbars was to maximise their window.
19 September 2006 at 07:13 AM
We launched a complete redesign of three online properties last February after nearly a year’s preparation. We settled on a 902px width (yes, 902). Width-wise only, the leaderboard ad and house ad stretch the full width, with NAV and editorial content underneath as follows from left:
Tool Rail – 120px (starting 4px in)
gutter – 10px
Editorial Content (chewy centre) – 428px
gutter – 10px
Utility Rail – 160px
gutter – 10px
Premium Content – 160px
The chewy centre content is elastic and collapses from the right to accomodate those few remaining 600×800 screens (studies showed them to be 20 percent or less of our readership). Article pages are also elastic.
When re-designing such large environments, its always a tug-of-war between hugely disparate parties like advertising, editorial, design, development. In the end its almost less of a re-design than a difficult course in UN mediation. But our odd choice of size has left us with a rigid grid that is flexible all over the place for ad and editorial content. We’re very happy.
19 September 2006 at 02:45 PM
Do any of you designers use Flash for your websites? I’m wondering how this would carry over with that segment of web development; 100% width/height scripts? Or pop-out windows?
See what I mean:
19 September 2006 at 04:47 PM
The problem with fixed layouts is that we set a width for everybody.
The problem with fluid layouts is that people may have looong unreadable lines. You know people won’t resize their browser window to match your site.
I guess we could use fixed-fluid layouts. Setting widths with ems, at least for the content column, so that the number of characters per line would be the same even if we change the font size. Sounds good.
But another problem would appear. wich width should we use? If at standard font size the site is 960px large, it would then be wider if you increased the font size, and a horizontal scroll bar would appear.
So which one is the lesser evil? Big text in a narrow column or horizontal scrolling?
19 September 2006 at 07:43 PM
a minor point regarding Full Screen — the Alt+Tab functionality has been inconsistently supported by Mac, if my memory serves (for a while it was a feature that was installed if you installed MS Office, but wasn’t native to the OS, right?). Alt+Tab has been an essential navigation command for a decade in Windows.
Add to that the issues of inadequate video cards (if any) in enterprise environments, regardless of multitasking support, and I suspect many users were trained over time to work full screen and Alt+Tab because it seemed more efficient (slow screen redraws on a Windows machine are legion).
That I still don’t think there has been an effective UI for docking windows that made them easily navigable. I’m sure there are some jockeys out there that can move quickly, but it sure seems that Alt+Tab is about the fastest way to move around.
19 September 2006 at 11:44 PM
Regarding Windows vs. Mac window maximization, I can see it from both angles. My main machine is a Mac, and I usually have my browser window opened to full screen width (1900 right now) in order to keep the content from other windows (or even the desktop) from distracting me. At the same time, I totally see the wisdom in Apple’s decision to not have the green “maximize” button elicit Windows-like behaviour. Most people aren’t going to necessarily want to browse at full screen width even if they are given the choice. One reason is that text columns inflate to the extent that text becomes difficult to read. The minority of those who *do* have a lot of screen real estate AND still choose to use a fully maximized window can still do so, but they’re a minority, and so it’s like the 80/20 rule. Thus, I think Apple made the right decision. Windows’ behaviour is akin to bad advice that falls into general acceptance due to ubiquity.
As for the poster who mentioned Alt + Tab: I don’t think I could live without it. I prefer to keep my hands on the keyboard; moving my hand away to use the mouse is something like a last resort in my mind.
22 September 2006 at 01:25 PM
We have also been tracking browser width settings. Our results indicate that among the visitors with a screen res of 1024 or greater only 25% have a browser width greater than or equal to 1000 pixels.
So for us, if we were to go with a fixed width setting it would be between 750 and 960.
When I put myself through our browser test, I learned that I prefer to keep my browser width around 940, regardless of the platform I am on.
FWIW … As a user of sites, I prefer fixed width. I don’t like the arrangement of content changing on me as I change the browser width. I really don’t like it when I am looking to purchase online and come to a site designed for 1024, forcing me to scroll horiz to view products, info, etc. Those sites don’t get my business.
26 September 2006 at 03:50 PM
As always: it depends.
I would like to second Barry Haanstra’s comment that sooner or later 800×600 will be back in full effect on handheld devices. Months ago I heard about Nokia developing a new handheld device equipped with a 800×600 display, so there definitely a case for fluid layouts.
On the other hand, there’s also aesthetics. Clients still want pretty looking webpages with visuals that span the entire width of the page. We all know that’s impossible with fluid designs. Not to forget about Nielsen’s recommended maximum line width of approx. 400 pixels (that’s about 10-12 words).
It’s better for us to adjust to our visitors’ browsing habits, than to require them to resize their browser windows in order to make a webpage look pretty and read well, no?
29 September 2006 at 04:43 PM
I have a rather uninformed question… what is it you’re doing with all that space? There are dozens of websites (http://www.google.com/search?client=safari&rls=en&q=words+per+line+web+ideal&ie=UTF-8&oe=UTF-8) and books that state the ideal words per line to be in the 10-15 range and yet somehow designs keep requiring more width… what am I missing? Using width for width’s sake seems like a poor decision. Am I in the minority?
06 October 2006 at 04:50 PM
The actual text field could of course be more narrow than 960px, even though you are designing towards that width