Resolution and Screen Sizes
Resolution
In a nutshell, image resolution is essentially the amount of information an image holds. The more information in the image the more detail you will be able to see in the image. When editing images for web publication or print, always start with the highest resolution possible.
Ppi and Dpi - Resolution on the Web vs Print
Although the terms dpi (dots per inch) and ppi (pixels per inch) are often used interchangeably there is a subtle difference between the two (although you can use either to get your point across). Digital images are made up of little dots called pixels. The amount of pixels used in an image is referred to as ppi, or “pixels per inch”. What this tells us is the higher the pixels used in an image the more detail an image will have. Printed images, on the other hand are measured by dpi, or “dots per inch”. The reason for the distinction is that pixels are actually tiny squares, whereas, dots are…well…printed dots of ink!
The 2 major considerations to take into account when composing images that will be posted to your web site, distributed on the internet and presented on a computer screen:
1, Web images are generally set at 72 ppi (while printed images are generally 300 dpi) A higher ppi means a larger file size which slows the loading speed of web pages. By keeping image file sizes to a minimum you will increase the speed that users can access a web page. This is why we made our GIFs at 500 x 500 x 72 ppi.
2, The quality of the image will vary depending on the screen size, type and the quality of the screen. Lets look at the size and resolution of our Mac screens: Click the Apple icon in the upper left corner of the computer monitor that you're using and select "About this Mac" then select "Displays". (I'm also going to demo the projector).
This idea of standard screen sizes (posted above) still holds true for TV and Cinema - But Web standard screen sizes all went out the window with the invention of the Iphone.
Web design in the age of mobile media
Before smartphones and tablets became popular, web designers created fixed width pages that worked on the most common screen sizes - usually 1024 pixels wide by 768 pixels high. Since the advent of the iphone – all that changed.
You can read more about the impact of mobile devices on web design here:
https://www.iteracy.com/blog/post/size-and-layout-of-a-web-page
And here:
https://www.blink-tech.com/blog/mobile-impact-on-web-design/
Your WIX site is set at a fixed width of 980 pixels. This size was chosen to accommodate the majority of site users and ensures compatibility with the many different smart devices being used today (i.e. smartphones, iPads or tablets). You can design your site outside of the 980 pixel borders, however I recommend that anything that you add outside of these borders be mainly decorative and not vital content to your visitors' browsing experience.
WIX sites also have an integrated responsive web design (RWD).This design approach offers a website that can automatically adjust to any screen size, whether it be a large monitor, laptop, tablet, or smartphone.
As you design your site its important not to get fixed on precisely how a website design looks on YOUR computer. You need to consider how it will look on other devices, and on other people's computers.
Consider what browsers your visitors are using? Will they be using a desktop – or more likely a smartphone to interface the site? How will the orientation of a tablet or phone and affect the color, layout and flow of a page?
My suggestion is to design for YOUR audience first, the masses second.
