Enter a URL
While your website may look flawless on the desktop, it might be challenging to use on a smaller screen. Text can spill over, navigation menus might get missing, and buttons can find it difficult to be reached. Free SEO Pro's Webpage Screen Resolution Simulator lets you view how a webpage will look at various screen resolutions. You can input a internet address, pick the resolution and test the layout. For website owners, bloggers, developers and web designers, this is helpful to locate potential display issues before your viewers see the problem.
A Webpage Screen Resolution Simulator is an online application to see how a website looks in various screen sizes.
Don't need to open your website on multiple physical devices; just choose a resolution and view a simulation of that resolution.
This makes it easier for you to find potential issues with text, images, navigation, columns and page spaces.
Webpage Screen Resolution Simulator - It's a free tool that can simulate how your webpage will display to people using different screen resolutions.
requires website URL input, has eight resolution options to choose from, and a Check button.
They come in the following sizes:
4K@30 fps The video should be crystal clear.
160 × 160 Extremely constrained layout
320 × 320 Narrow, square viewport
640 × 480 Small landscape layout
800 × 600 Compact desktop-style layout
1024 × 768 Medium-width layout
1152 × 864 Wider desktop layout
1366 × 768 Common laptop-style layout
1600 × 1200 Large desktop-style layout
These are the actual selectable dimensions that will be displayed on the tool page. They are a reflection of test size and aren't guaranteed to fit specific devices.
Free Seo Pro
It can be used by website owners to view how their site looks upon completing website design changes.
Bloggers can use to see if article text and photos resize themselves to fit smaller layouts.
It may be used by the developer and designers in the event of testing responsive design, or by SEO people in the event of problems which are visual for users that impact usability.
The goal of a screen resolution simulator is to simulate a webpage in the chosen screen resolution.
The concept is very plain and simple: you enter a URL, set dimensions and then take a look at your preview.
The specifics of how this is rendered are dependent on the simulator.
Free SEO Pro calls this tool "See your web pages at various resolutions," but it does not specify the web pages rendering technology on the page.
Screen sizes are typically expressed in two numbers.
For example:
1366 × 768
First number is width, second is height.
If the view port is large enough, it might be possible to fit more than one column. Those columns might need to be positioned vertically in a narrower viewport.
This is because of rules in the responsive construction of the web site.
Note that a physical screen resolution may differ from the webpage viewport.
Viewport are the space to show webpage content.
Physical pixels to CSS pixels may differ in respect to browser controls / display scaling / device pixel density.
Hence, choosing a resolution will not exactly duplicate each real device.
The documentation of the device pixel ratio in MDN.
So, explains this distinction in more detail.
MDN
There is an easy to use interface, and all you need to enter is a webpage address and a resolution choice.
Follow these steps:
To use Free SEO Pro Webpage Screen Resolution Simulator, click on Open.
2. Locate the field that says Enter a URL.
In the 3 PARTS enter the full Web location or Web page address.
4. Find Select Screen Resolution options:
5. Select one of the 8 dimensions offered.
6. Press the Test button.
7. If it loads: look at the webpage preview.
8. See how it looks at different resolution and repeat the process.
A Check button is displayed on the page, with written instructions also that invoke the Check button: Check Now. Please refer to the label displayed in the actual interface.
Free Seo Pro
Select a page of the Web site that is freely available, without requiring user's private information to log in.
Always test using the homepage, followed by important pages like articles, product pages, contact forms, and tool interfaces.
One page contains an over-sized table or image that will not display properly while another page works fine.
Test for smooth horizontal scrolling of the main content by visitors.
Pay attention to the following features: navigation menus that run over images, images that are outside of their own containing boxes, buttons that are hard to click on.
Also see if forms are still usable and if critical content still is visible.
Use a preview when looking at a specific element on a page and NOT just how it looks.
Illustrative example: The following is one possible sequence for testing. It is not an interactive test of Free SEO Pro's simulator, yet!
Suppose you have a blog that has articles, images and a blogroll section on the right side.
While the homepage is good on the laptop, smaller designs are being explored.
You enter the blog's URL and select 1366 × 768.
With this width, maybe the main content is shown next to the sidebar, creating a responsive design.
You would evaluate if heading, navigation, images and sidebar suitable.
Next, you select 320 × 320.
With this skinny width, the sidebar may be pushed down to under the article in a responsive web page.
Consider if text is still legible, easy to navigate and no horizontal scrolling breaks the content.
Not all websites will magically rearrange themselves. This will vary according to its implementation in CSS and layout.
Finally, select 1024 × 768.
This moderate width length may expose layout issues not seen in the smallest or largest width sizes.
For instance, a navigation bar may work fine at desktop dimensions, but will take an odd layout, before the mobile layout kicks in.
The results of several dimensions will allow to checkout the problematic or unusable dimensions of the design.
If a problem is found, the dimensions selected and element affected should be recorded.
Now change the layout of the website, and repeat the test.
A simulation is an inspection tool for visualizing, not a website quality score for the website itself.
The preview should be reviewed for readability, consistency of layout, navigation and usability.
Be alert for the following problems:
Text or image that is not in view on the page.
Navigation links over-leap other elements.
Buttons that are close together.
Tables that require too much horizontal scrolling around.
- Difficulty filling in forms.
Unexpected loss of important information.
Horizontal scrolling is suitable for some special purposes, such as big data tables. The objective is to make sure that it does not need supplementing scrubbing from left to right of the total web page.
Normally, responsive websites use CSS media queries to change the layout of their pages at specific viewport widths.
For instance, moving from double column to single column if the available space is not sufficient to support two columns.
Breakpoint should be based on content, not an assumed model device.
MDN's guide to CSS media queries
Describes to devs how to use these rules.
MDN
Try out some key pages with various area sizes prior to putting the site online.
This can be useful to see any easy to find layout issues before they're harder to deal with.
The fit of the content can change with a new theme, header, sidebar or advertising position.
Test both narrow & wide layouts following major design changes.
Extra special mention goes to pages with comparison tables, charts, code examples or big images.
These may need responsive containers or other designs.
Update navigation, forms or page templates with periodic visual checks.
Checking out a random sample of pages can be more helpful than checking the home page alone.
A simulator can provide insights and awareness of layout issues, but some issues are related to the site being tested or the preview environment.
Problem What to investigate
Displays URL-accessibility and preview restrictions
Page is too wide There are elements that are fixed width, or there is too much content for the page.
Text overlaps – CSS, size, spacing or breakpoints
Images overflow g Responsive image styling
Navigation vanishes Menu actions and CSS styles
Preview – phone, browser, device differences
Verify URL is correct and publicly available.
Embedding/automatic rendering is limited on some websites. If a preview fails it does not mean that the website is not available.
Determine what is causing the issue.
Look for fixed pixel widths, minimum widths, margins and media queries.
If you keep on the website code, you can use the browser-developer tools to check CSS that is being affected.
A screen resolution simulator is not a substitute for testing on real phones, in real browsers and tables.
May not reflect touch behavior, mobile browser controls or differences in device pixel density and/or platform rendering.
The free SEO Pro page does not validate the inputs of custom dimensions, screenshots or visitors to authenticated pages.
They set its visible resolutions to 8 predefined ones and preview generation isn't independently tested so far.
The service also doesn't provide very clear information about how URLs that are submitted are stored and maintained.
Test with public (non-sensitive) addresses.
offers a correlated source to analyze web page load performance. Even a visual responsive page can load slow.
supports another technical SEO task: making website URLs discoverable to the search engines.
can help you examine complicated webpage addresses while reviewing your website's structure.
is helpful in creating instructions for the crawler, but would not detect any visual layout issues.
Once you've found the display problem, edit website's CSS/template, test the page in question and validate website in a actual browser.
A Webpage Screen Resolution Simulator is a website that will allow you to see the website at other screen resolutions. It is helpful for identifying any possible layout issues that users may face on the smaller or larger screens.
Open your simulator and type your Web site URL and use one of the screen resolutions. Click on the Check button and preview. Do this at other sizes to see if there is any issue with your ability to read text, view images, use the navigation, or utilize forms.
DoOnline, a web resource hosting service run by Free SEO Pro, classifies their Screen Resolution Simulator as free. It has the URL field and resolution options public in its page. Any restrictions or limitations of use relating to the account, however, shall be verified in the working service.
The visible interface provides eight resolutions: 160×160, 320×320, 640×480, 800×600, 1024×768, 1366×768, 1152×864, and 1600×1200 pixels. These are testing dimensions, not actual representations of every phone, tablet or computer.
Yes. Having the smaller resolutions can aid you in seeing how your site may look in a small view. In spite of this, however, there are features lacking from a one-to-one preview of a physical smartphone, ranging from touch interaction and how different browsers look to how Netflix and other video streaming services perform.
It can be used on a webpage URL with individual pages tested per the instructions published on the tool. Type in the full address of the Web page you would like to investigate. Useful for testing separate articles, contact forms and product pages.
Screen resolution is the number of pixels a display has, and thus the dimensions of the display. Viewport size refers to the space inside that people can use to view webpage content. However, due to browser controls, display scaling, and other factors such as the density of the device pixels, these values may not always be considered equal.
No. The simulator will be used for you to view a website at a specific size. It does not change the HTML / CSS / layout of your website. Any problems found must be addressed via your web page's design or development.
When images, tables, containers, or other things are wider than the viewport it can cause horizontal scrolling. Another possible cause is fixed width CSS properties. Review and fine-tune the responsive styling of the impacted element as needed.
The medium width (800×600 or 1024×768) options can be chosen to consider possible tablet-style layout options. But these choices are not representative of all the tablet's real viewport, pixel density, browser or behaviors about orientation.
There is nothing said that screen resolution testing will directly help in boosting Google ranking. It can highlight to you usability issues that you need to pay attention to. Though making the actual website experience better will help visitors, rankings rely on many elements beyond the responsiveness of the web site.
Differences may be due to viewport size, browser rendering, responsive CSS, or a preview environment limitation. Compare the simulation with your website in a real browser. If this difference persists, check the layout rules and the elements that are affected by these rules.
The public facing interface validates a URL field as well as predefined resolutions and a Check button. Not very clear about how it can download any screenshot. Before relying on the tool to save or export preview images be sure to check the actual results interface.
Make sure that the webpage address is correct and open to the public. Visit the same site linked by it directly. However, if an embedding or auto previewing of the website fails, it may not reflect an actual issue with the original site because some sites may limit embedding or automatic previewing.
Test critical pages on a regular basis prior to launching and following changes to themes, navigation, templates, ads, or page layout. Retest users if users experience issues with the display. The regular checks are especially effective for sites that have a stream of new material and additions to features.
