What width should i make my mobile site

The Content is not sized correctly for the viewport Lighthouse audit can help you automate the process of detecting overflowing content. An image has fixed dimensions and if it is larger than the viewport will cause a scrollbar. This will cause the image to shrink to fit the space it has, should the viewport size be smaller than the image. It is generally safe to add the following to your stylesheet so that you will never have a problem with images causing a scrollbar. This is because modern browsers will use this information to reserve space for the image before it loads in, this will help to avoid layout shifts as content loads.

Since screen dimensions and width in CSS pixels vary widely between devices for example, between phones and tablets, and even between different phones , content should not rely on a particular viewport width to render well. In the past, this required setting elements used to create layout in percentages. In the example below, you can see a two-column layout with floated elements, sized using pixels. Once the viewport becomes smaller than the total width of the columns, we have to scroll horizontally to see the content.

By using percentages for the widths, the columns always remain a certain percentage of the container. This means that the columns become narrower, rather than creating a scrollbar. This layout method is ideal when you have a set of items of different sizes and you would like them to fit comfortably in a row or rows, with smaller items taking less space and larger ones getting more space.

In a responsive design, you can use Flexbox to display items as a single row, or wrapped onto multiple rows as the available space decreases. Read more about Flexbox. CSS Grid Layout allows for the straightforward creation of flexible grids. If we consider the earlier floated example, rather than creating our columns with percentages, we could use grid layout and the fr unit, which represents a portion of the available space in the container.

Grid can also be used to create regular grid layouts, with as many items as will fit. The number of available tracks will be reduced as the screen size shrinks. In the below demo, we have as many cards as will fit on each row, with a minimum size of px. For some types of layout you can use Multiple-column Layout Multicol , which can create responsive numbers of columns with the column-width property. In the demo below, you can see that columns are added if there is room for another px column.

Read more about Multicol. Sometimes you will need to make more extensive changes to your layout to support a certain screen size than the techniques shown above will allow. This is where media queries become useful. Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the types of device rendering the content, or the features of that device, for example width, height, orientation, ability to hover, and whether the device is being used as a touchscreen.

To provide different styles for printing, you need to target a type of output so you could include a stylesheet with print styles as follows:. It is also possible to include separate stylesheets in your main CSS file using the import syntax, import url print. See Avoid CSS imports for more details. For responsive web design, we are typically querying the features of the device in order to provide a different layout for smaller screens, or when we detect that our visitor is using a touchscreen.

Media queries enable us to create a responsive experience where specific styles are applied to small screens, large screens, and anywhere in between. The feature we are detecting here is therefore screen size, and we can test for the following things. All of these features have excellent browser support, for more details including browser support information see width , height , orientation , and aspect-ratio on MDN.

The specification did include tests for device-width and device-height. These have been deprecated and should be avoided. Given the range of devices available, we cannot make the assumption that every large device is a regular desktop or laptop computer, or that people are only using a touchscreen on a small device. With some newer additions to the media queries specification we can test for features such as the type of pointer used to interact with the device and whether the user can hover over elements.

Try viewing this demo on different devices, such as a regular desktop computer and a phone or tablet. These newer features have good support in all modern browsers.

Though the height could really be anything and change as necessary. I have several views that have a larger height so that the wire frames are refined as they can be to take the guess work out later down the road.

Though in all this you have to remember that dimensions, font-size, colors, etc can change based on device. So all you can really achieve with wire frames are content, layout and general branding in regards to colors perhaps some small graphics. Every mobile site pretty much follows that standard application like work flow and feel for useability reasons and hardware limitations.

I agree with this. You should try and cover as many devices as possible. I was just stating some stats for my site and even though the iPhone is the top browser in terms of visitors, I would not narrow my options by focussing on that device alone. I was hoping for some guidance on the maximum image width; the actual file size width to use; would it be , , px for example? I am aware that you can serve different size images based on the device detected, but as a baseline starting point if I was to kick-off with one image size, what would you recommend?

There are several articles which have addressed this. Small images will need to appear at their natural resolution. Large images should ideally be pre-scaled to several different sizes, appropriate to the different media-query sizes. Obviously you fix the size of the images, but the rest of the sites is built around them.

I guess to oddz question, the images do get fixed sizes, what does not generally get fixed sizes is contain blocks of HTML, so that the natural flow of the page wraps these blocks underneath each other. If using mulitiple columns, when the browser window shrinks I drop columns and continue with the natural flow.

Someone brought up your chart in a discussion about typical screen resolutions. I found it quite peculiar at the first sight and after some thinking I have come to realize that it provides very wrong data. There is only 1 brand that offers them as standard not upgrades on its devices: Apple. New CSS3 features also include orientation portrait vs. One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:. The code above is from a free template for multiple media queries between popular devices by Andy Clark. Above are a few examples of how media queries, both from CSS 2. Many of these uses are relevant today, and all will definitely be usable in the near future. The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles or separate style sheet would apply to.

If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website.

The class specified in the media query above hereIsMyClass will work only if the browser or screen width is above pixels. In other words, this media query will run only if the minimum width is pixels therefore, pixels or wider. Now, with the use of max-width , this media query will apply only to browser or screen widths with a maximum width of pixels or narrower. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device.

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape horizontal orientation or portrait vertical orientation. Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range. The above code in this media query applies only to screen and browser widths between and pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available. Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost.

For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine. You might want, for example, to place media queries all in one style sheet as above for devices like the iPad.

Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations.

Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient. Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best. Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:.

In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions.

With the addition of JavaScript, we can accomodate far more variations. It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit reasonably well as a screen gets smaller. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!

Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet for bigger screens that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.

For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout. In our default style sheet below, we have hidden the links to the sidebar content.

Because our screen is large enough, we can display this content on page load. Now, we hide the two sidebars below and show the links to these pieces of content.

As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content or in another reasonable way. With the ability to easily show and hide content, rearrange layout elements and automatically resize images, form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types.

As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability icons would be more beneficial on smaller screens.

Touchscreens are becoming increasingly popular. Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet. Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well.

Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. Many of the design suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either.

For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guideline in this instance.

Many more guidelines of this kind can be drawn from touchscreen-based usability. Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.

Art Equals Work is a simple yet great example of responsive Web design. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen, then the layout switches to a more readable and user-friendly format. The sidebar disappears, navigation goes to the top, and text is enlarged for easy and simple vertical reading.