Well-designed landing pages leave a positive impression and effectively sell the product or service you offer on your website. Using a device-inappropriate window size can ruin a landing page's ability to leave a good impression and lead the visitor to click the "X" to close the window. Landing pages should be designed around concepts that draw-in users and clearly explain the product or service. Landing pages are not homepages: visitors get to landing pages by clicking a link or advertisement.
Desktop Landing Page Dimensions
Video of the Day
Desktop and laptop monitors come in a huge range of sizes and resolutions, making it easier to appeal to the lowest common denominator when sizing your landing page. The average screen size keeps growing, but most monitors feature at least a 1024 by 768 resolution. Desktop landing pages featuring a 960-pixel width will work on almost any computer monitor. Any landing page content within the 720-pixel height will safely display on the screen upon page load. The width of a desktop landing page is much more important than the height because desktop users can scroll down the screen to view additional content. You can always make a smaller page and sacrifice screen real estate.
Video of the Day
Designing for Mobile Devices
A large desktop landing page will not work on mobile devices: the content will spill out over the side or shrink to an unreadable size. Mobile devices fit into the "small" screen size category and feature a safe resolution width of about 320-pixels. While some mobile devices have larger screens, any landing page designed for a 320-pixel width will display well on most mobile devices. As with desktops, the height is a secondary concern for mobile landing pages; however, you can fit about 426 vertical pixels of content on the screen at once.
Customize for Tablet Devices
You can develop customized landing pages for tablet sites; however, desktop landing pages featuring the 960-pixel width will fit on larger tablet devices. Smaller tablets in the 7-inch range usually feature screens that are 640-pixels wide: landing pages designed for 960-pixel-wide screens will scale down by about one-third to fit on the smaller screen. Since you can display smaller content on a larger screen without sacrificing quality and legibility, designing tablet landing pages with a 640-pixel width and 480-pixel height will work on all devices. Smaller tablet users may opt to hold the device in landscape mode, whereas larger tablet users will hold the device in portrait mode, making the 640-pixel width accommodate both screen sizes.
Switch to Responsive Design
You can forgo making different landing pages for different devices and instead use media queries and a responsive design concept to build a page that rearranges content depending on the size of the visitor's screen. Responsive design landing pages can be configured to move around content and change content sizes at different resolution ranges, allowing content to comfortably display on any screen.
- KISSmetrics: Anatomy of a Perfect Landing Page
- PC Magazine Encyclopedia: Definition of: Landing Page
- Landing Power: Landing Page Size Guideline
- Nielson Norman Group: Computer Screens Getting Bigger
- Android Developer: Supporting Multiple Screen Sizes
- Mozilla Developer Network: CSS Media Queries
- TechRepublic: What Is the Difference Between Responsive and Adaptive Web Design?
- Smashing Magazine: Responsive Web Design: What It Is and How to Use It