Designing a website can be a scary thing, especially in today’s internet landscape. There are so many things to keep in mind when you consider the different screen sizes people will use to view your content. Luckily, some top developers have come up with some general sizes that work with any screen size.

The best pixel sizes for your webpage on a desktop are 1920 x 1080 or 1440 x 900. For tablets 601 x 962 or 1280 x 800 pixel size. For mobile displays, your pixel size should be 360 x 640. It is recommended to use a grid design with 12 columns that can respond by growing and shrinking to fit your window.

These guidelines will help you create web content that looks good in a variety of formats. When the screen is properly sized, visitors will have a much better experience on your website.

Large Desktop-Screens

 

Large desktop screens generally are about 1920 pixels wide and 1080 pixels tall. This size of a site is one of the most common sizes for screens, and it is good to make sure your content is compatible with this size.

When creating a website to fit this pixel size, follow the 12 column grid pattern.  The first thing I want to clarify to avoid confusion si this does not mean you have to have 12 columns of text and images on your site.

 

This makes it easier for things to transfer to smaller screens. For example, you could have 1 column on the side for a sidebar and 2 in the middle for text and images.

Of course, you could add more, but I would highly discourage going over 6 as it will start to feel cluttered.

Some cases for adding more columns could be adding 1 column on the side for a navigation sidebar with other articles to click on. Or adding 4 columns for a store page with products or a blog page.

A common design for websites today is having a picture that takes up the whole page. Here is an example.

Notice how this page still gives all the information, but nothing feels too crowded. There is room for everything they need, and it ties the whole website together.

On the other hand, here is a website that brings the text all the way to the side. It feels squished just reading it, and you can’t quite tell if something is cut off or not. Then the picture has all this space next to it, making it uncomfortable to look at on a desktop.

It is important to have white space to break up your elements, but not a huge amount that will make the page feel unfinished. If you are working with bigger screen sizes, it’s even more important to have that extra space. On bigger screens, having white space makes the website looks clean and more open.

White space doesn’t necessarily have to be a literal white space. You can have colored backgrounds and even use a big picture background like textures. It just has to be simple so it doesn’t draw the focus away from your content. (Think empty)

On smaller screens, your white space would still be included, but it’s displayed more compactly. It may be on the sides with some extra space or a very open home screen with the same picture background.

Laptop Screens

 

Laptop screens are the next top size for websites at 1440 pixels wide and 900 pixels tall. Almost everyone has a laptop now, and most people use it for school or work. Therefore, building your website around this size is suggested because it is more common than desktops.

A common rule you could follow with designing on this size is 1440 screen size and 1140 content size. This is a good way to make sure you have room for your content and extra white space.

Take a look at this website, for example. It has that extra space on the side. This gives the whole page a nice border. Also, if you look at the lists on the right side of the screen, you can see that they don’t seem to go over or push to the edge of the screen; there is plenty of space.

Tablets

 

Tablets aren’t used as much as laptops and mobile devices, but they are becoming closer and closer to the size of laptops. There are two common pixel sizes, 601 pixels wide and 962 pixels tall or 1280 pixels wide and 800 pixels tall.

Keep in mind with tablets and mobile devices; you have to take into account that people can and will rotate them. This means you have to consider the horizontal and vertical orientation, which changes the resolutions that your website will be viewed in.

The vertical orientation will be similar to an enlarged phone. The horizontal orientation will be similar to a small laptop.

With two main sizes for tablets, it can be hard to decide how to size your website for them. Luckily, website builder platforms like Wix or WordPress usually create the website with different sizes in mind.

You can resize your window on a desktop see how the website would look at any size. So you can see how the website will resize and change to look good on them.

However, if you are coding your website yourself, I suggest programming the 3-6 column design for different sizes, with small screens having 1-2 columns, medium-sized screens having 2-5 columns, and large screens having 3-6.

You can review this website for more details about this. This website is also helpful if you want to do some size-specific coding as well.

Let’s take a quick look at common tablet sizes for the ones you may own or find at the store.

The Apple iPad Pro 11 is about 834 pixels wide and 1194 pixels tall. The iPad mini is closer to 768 pixels wide and 1024 pixels tall, which is a bit closer to the common sizes.

The Samsung Galaxy and Amazon Kindle Fire tablets are 1280 x 800 pixels.

Asus tablets, which can usually be used as laptops, are about 600 pixels wide and 960 pixels tall.

Most tablets keep to one of these common sizes, give or take a couple of pixels. (Source).

Mobile Devices

 

Most phones will be between 360 pixels wide and 640 pixels tall or 414 pixels wide and 896 pixels tall. Considering all the brands out there, the sizes will change a lot. You need to keep this in mind, and your use of the column system will make or break how your website looks on a phone.

The columns give each element on your website its own place. For example, with your text in 1-2 columns of its own and a picture or sidebar in another 1-2 columns on a laptop or desktop design, you then have breakpoints. Breakpoints allow the content to reorder itself.

For example, the columns of text will break away to move above or below a column with a picture. Any modern browser you use will automatically do this when your website is viewed on a tablet or mobile device.

Let’s take a quick look at the pixel sizes for phones.

The Apple iPhone 12 Pro Max is about 428 pixels wide and 926 pixels tall, so you can anticipate stretching on this type of phone if you do not make your website responsive.

The Apple iPhone 7 and 8 are a bit closer to normal mobile phone sizes with a width of 375 pixels and a height of 667 pixels.

Most of the LG phones fit at a width of 360 pixels wide and 640 pixels tall. (Source)

Samsung Galaxy phones are getting a little bigger with the S21 at a width of 360 pixels wide and height of 800 pixels. (Source)

But the Samsung Z Fold2 has its own unique aspect ratio at 884 pixels by 1104 pixels. (Source)

Aspect ratio is the ratio of the width to the height of an image or screen.

Foldable phones gaining popularity is just another reminder that we need to ensure our websites are updated and designed to be totally responsive to any size and aspect ratio, not just designed for a few common sizes.

 

Image Sizes

 

The video above talks about the resolution for his type of screen, closer to the large Desktop size(1920 x 1080). This is a great example of how to size different images for your website if you are working on bigger things.

However, if you are working with a mobile-friendly website, I suggest sizing down the image more to 300-500 pixels wide. If you are on a tablet or laptop, bring the image size closer to 1000 pixels.

If you decide to use WordPress or Wix instead of coding a website yourself, you are able to size the image to a maximum size, and it will resize automatically on smaller screens while maintaining its original aspect ratio.

Paragraphs

 

Depending on your desktop or laptop size, paragraphs can look pretty small. They may be longer across the page but only look to be 3-4 lines in size. If you look at those same paragraphs on mobile, they could take up the whole screen or most of it.

Mobile users tend to close articles more often if a paragraph requires too much scrolling. It is best to limit paragraphs to about 6 lines in length. This gives them room to have enough information but also keeps it short for mobile users.

Website Layouts & Designs that Affect Sizing

 

There are various layouts & designs you could use for your website.

On older websites, a sidebar with hyperlinks to different pages would serve as navigation. Today, you’ll find the menu usually at the top. On mobile, the menu will usually be minimized to three lines called a ‘hamburger’ in one of the top corners of your screen.

This is because sidebars would take up too much space on mobile devices. This would make it harder to see the main content of the website. With the menu at the top, the content can keep full width so it’s easier to read and see.

Minimizing the menu into the hamburger further enhances the experience of websites on mobile devices by giving the content more space. You don’t have to use tiny text for the menu items that get squished at the top becoming hard to read.

You control when you want to focus on content.  Then with a simple tap on the hamburger, you get access to a popup menu that expands with a big legible font that is easy to read.

The developers at Google have said that search will be optimized based on the mobile version of websites. The website has to be either designed for mobile or compatible with it.

Don’t build websites for desktops and laptops. If you want it to be search engine optimized and indexed, meaning it will show up on Google and the first page of results, then focus on mobile design first (Source).

With this in mind, it is recommended to have separate coding for mobile and desktop in your website. (With a priority on mobile-first.)

If you are creating your website through WordPress, most themes will be responsive by default. That does NOT mean it will look good. And if you customize it at all, you can break that responsiveness.

However, if you are coding your website, you need to make sure you have different-sized images and code for both mobile and desktop screens to optimize your site.

As explained previously, breakpoints are places in your content that can change and reorder the site to fit the screen.

For example, if your website has an image right next to the text of an article. That is a breakpoint and on a mobile device, that may change to the image and then the summary to fit the screen. These breakpoints work best within the 12 column grid. It is recommended to use content that is 12, 6, 4, or 3 columns wide (Source).

CSS Height and Width

 

 

If you are planning on programming your website yourself you will need to understand some basics of height and width for your website. For CSS coding, you need height and width to understand the full size of an element that doesn’t include everything around it like borders or margins.

Usually, you have to define the length in pixels of the textbox, photo, video, etc. You give the height in pixels and the width in a percentage of the whole screen. So if you only want the text box on half of the area you have, you would put 50% on width. To see how this works go to this website and play around with the numbers next to height and width. Then press “run” to see how it changes the size of the next box.

It is important to define your max-width when coding different things on your webpage. Similar to the column method, it helps make the transition to smaller windows easier. If you can set the max-width to a size smaller or close to that of a mobile phone’s pixel size, then it won’t need a scroll bar along the bottom of the window and will fit the page better. Follow this line for examples and a more detailed description.

Tool Box

 

• WordPress is a great website designing site that lets you see how your website fits on a desktop and mobile format. This makes it easier to wrap text around photos and see how it fits on a mobile device.
• If you go to this website on any device, it lets you see the screen size in pixels. You can also compare it to other devices as well to see their general screen sizes.
• w3schools.com – This lets you search for how to code different formats such as the 12 column grid and incorporate display sizing for different devices on your website.
• Image Size Info-Chrome extension that helps you find your image dimensions and scale them to size.