OUGD504: Selecting a screen size to Design to 02

Effects of wrong screen size

Un-optimised screen sizes drastically effect 
the user experience, giving a claustrophobic
feeling in some places. Roughly an 11 column
grid system has been used on both websites,
with variations of 4 column grid systems featuring throughout.

The effect of this tight structure is intended to be seen full screen (one would imagine?), so without it being viewed on the correct device it proves uninspiring. For comparison, I also searched on Chrome and Safari mobile browser to see if this would help, yet the information is still condensed. The viewer is presented with all of the information, yet what is the need for the additional grey?

A zoom motion is then applied, yet this is extra work for the user. I myself know that if faced with an intimidating website where it wasn't clear, the stress would build up further, making the user leave the interface.

Most popular:

1366 x 768px is the most popular screen size at the moment. "It’s worth noting that these are global numbers. In Europe, the higher-resolution screens already overtook their predecessors late last year and in the U.S., 1024×768 still holds on to the top spot (but just barely)." This is the size of a standard desktop screen, meaning it would be more universally accessible for anyone to use.

365 x 667px is another highly used screen size, and a standard size to design to when designing for mobile use. Considering research, feedback and external knowledge of the target audience, the immediacy of needing to find somewhere to live means you turn to the most convenient method- the phone. Furthermore, when moving about from viewing to viewing, you need to have easy access to all of the information you may need to know. By having a preference for this screen size, 


Google Chrome- 
Safari- 
Facebook mobile site- Been optimised and designed to look like the app. Fits whatever device you are on.

Needs to fit a 12 column grid. Most major websites feature a 12 column grid system, this gives flexibility whilst maintaining a clear structure and framework for the designer to consider.

Understanding Apple screen sizes

Android screen size is 

Designing for Safari

Safari is a full-featured Web browser for macOS and iOS. You don't need to add any Safari-specific tweaks to make your website work with Safari or to make your website work on iOS-based devices. If you design your website using W3C standards for HTML, CSS, and JavaScript, and don't rely on third-party plug-ins, users can view and interact with your website using Safari on all supported platforms.

Making websites work with Safari is just a first step, however. It should be your goal to optimize websites to create the best experience for all users, including people using Safari on handheld devices with touch screens. Use CSS with responsive design techniques to change the layout of your website for multiple viewport screen sizes and multitasking split-screen, add touch and gesture support, animate changes in CSS properties, and so on.

Further Design Considerations

Optimised presentation enhanced the layout by maximising the screen utilisation and minimising the users’ navigation complexity. In addition, the semantic conversation summarised and provided as content overview.

The single page design is favoured over and zooming designs for displaying text based information.

A homepage with a thumbnail design facilitates information processing better than progressive and list-viewing designs.