Responsive Web Design

Mobile Design Principles: Top 10

Every web designer has to have a plan when creating a mobile-first, responsive website. When embarking on this journey, let's start with our top 10 favorite design principles that will ensure a great user experience!

1. Keep it Simple. Every designer wants to show creativity, color, and style, but first we have to format the site properly. Start with the basics, or every time a change is needed, it will be a big mess. Too much style right off the bat causes too much clutter.
2. Use Semantic HTML5 Elements. Without the proper semantics, the code will cause errors, it won't validate properly, and it will not be accessible to all users. This will lead to a bad user experience.
3. Validate the Code. Make sure to validate both the HTML and CSS code for errors. This will help catch any errors that they may have missed. Fixing these validation errors is necessary. Errors may cause the code to display improperly, or cause accessibility issues for the user.
4. Code Mobile First. Design the original CSS for mobile. This will ensure optimization for mobile devices.
5. The Meta Viewport Tag. This tag, which is loacted in the head of the HTML code, tells the web browser to pay attention to the screen size being utilized by the user.
6. Media Queries. These are located at the end of the original CSS code, to allow for changes to the HTML code styles and content based on the user's screen size.
7. The Gestalt Principles are Extremely Important. Similarity, proximity, continuation, closure, common region, figure-ground, and focal point. All of these principles must be taken into account when creating a good user experience with a well-planned design.
8. Fluid Layouts. This is accomplished by using percentages or ems, rather than pixels in the CSS. They are commonly used for widths.
9. Adative Images. See Adaptive Images, below.
10. CSS Techniques. This is something that will take more time to learn, especially when working with advanced CSS techniques. This is getting to know the CSS code intimately, and knowing how to do things such as masking, working with grids, scroll-snapping, and many others.

The image is sized appropriately when using different devices with different screen sizes. They "will load a different image based on client-side adaptation." (W3C, 2012). This is done using percentages, media queries, and max-widths.

Mockup:

Below is a mockup of the current website's homepage, showing the appearance of the website based on three different sized screens.