Elements of Responsive Web Design
Responsive web development/design is the process of creating a website that resizes itself to fit to different screen sizes based on the kind of device used to access the website. It could be tablets, desktop monitor, smartphones, or a laptop. For any business with online presence, responsive web design is very crucial because of the increasing use of tablets, smartphones, and other mobile devices, and users are shifting more to smaller computing devices to access websites (Jones, 2018). The objective of website responsiveness is to facilitate development of one website that will have various elements that allows it to be viewed on various devices with different screen sizes. The portfolio will discuss the various elements and aspects that are essential in responsive web design.
The diagrams below show the various mockups for the different web pages:
Figure 1: Home Page
Figure 2: Art Diary Page
Figure 3: Contact Page
Having a successful website requires using the right combination of colors using color theory which is very essential. It is very crucial to have the right color scheme when creating a website whether it has been created by an individual or a professional web development firm. Viewer and visitors easily get attracted to high quality websites and if it is not appealing there is a high chance that they will not spend longer time interacting or viewing the content on the website and in extreme cases they exit even before reading anything.
When developing a website, it is necessary to have knowledge on theory behind color schemes. It begins by analyzing the color wheel and grouping the colors into three categories: primary, secondary, and tertiary colors (Jones, 2017). Color theory describes color combination strategies to enhance allure and optimize use. Choosing website colors requires selecting combination of colors that are harmonious and sober to the eye of the viewer.
Color schemes and theories were considered in developing the Paper Kraft website. Some of the color aspect considered include:
Background color: white and black colors were used as background colors for the website because website concentration is maintained and the web pages are punched forward. The background is the same across all the pages to maintain uniformity. For the menu, the background color used was black so as to rhyme with the overall background color of the website.
Text color: for the text content in the website, white and black colors have been used because they are more readable and clearer. Since the menu have a black background color, text color used is white to enhance clarity. Mixing text colors will negatively affect the overall look of the website and is thus discouraged to use more that 4 colors in a website.
Importance of Responsive Web Design
Image properties: standard image properties and tags have been used in all the images used in the website. The code below shows the general image properties used in the tag:
<div class=’box photo col2′> <a href=”#”><img data-src=”URL” alt=”name”></a>
Links: menu has a hover functions such the when a mouse is moved over a menu item the background color changes to grey. All visited links will turn blue.
The figure below shows an improvement of the navigation flowchart:
Figure 4: Navigation Flowchart
Text alignment is crucial integral part in the development of websites and many web designers tend to overlook at this aspect. As such, it is important that a website has predesigned layout to act as master grid for supporting the navigation, sections, footers, headers, look and feel, sides, and sidebars (Boudreaux, 2012). Alignment enables the designers to effectively and efficiently make careful decisions concerning the layout of elements of the website. If alignment strategies are not used then the elements would be scattered arbitrarily with no or little connection to other elements. The diagram below shows how text is aligned on the business hour page:
Figure 5: Text Alignment
Contact form play a vital role because it is the primary channel that website visitors use to connect and communicate with the business. It enables them to give their opinions, feedback, seek clarifications, and make complements. It also offers a way for the business to continuously engage with the customers. Paper Kraft website contact web page is shown below:
Figure 6: Contact Form
It is important to ensure that the website automatically responds to fit different screen sizes while maintain the look and feel and keeping the simplicity of interacting with the website. CSS3 and media queries and html5 functions enables the website to respond dynamically to different device screens such as tablet, smartphones, laptops, and desktop monitors (Pilon, 2018).
Testing the website using different Simulators
Mobile and desktop simulators were used to test the website for responsiveness and overall look and feel.
Mobile simulator
A smartphone with a screen size of 5 inches was used to test how the website would look. Three pages were tested: home page, artist trading cards, contact pages were tested. The figures below show the different screenshots of these pages:
Figure 7: Home Page When Accessed through a Smartphone
Figure 8: Artist Trading Card Page when Accessed using a Smartphone
Color Theory in Web Design
Figure 9: Contact Page When Accessed Using Smart Phone
When the website was loaded on a 15-inch laptop, the various pages were displayed as shown below:
Figure 7: Home Page When Accessed through a laptop
Figure 8: Artist Trading Card Page when Accessed using a laptop
Figure 9: Contact Page When Accessed Using laptop
To check if the website meets all the usability requirements, four people were asked to interact with the website. They were asked to interact with the website using any device either tablet, smartphone, or PC.
The first person said that he was impressed with the color combinations used and the fact that the website did not contain many colors. He further stated that all the contents were clear and that they were clear. When he was asked to rate the website on a scale of 1 to 10, 10 being the best he rated the website at 9/10.
The second person was satisfied on how the images have been aligned on the website. He said that the images were clear indicating that the original image properties have been maintained. She suggested that it would have been better to use two or three columns for the images rather than using four columns. She rated the website at 9/10.
The third person said the color combinations used were more traditional and she suggested that more brighter colors would have been used. she further recommended the colors green, blue, and white would best fit the website. However, the colors recommended by the third person are not appealing to as argued by the first, second, and forth person. She rated the website 7/10.
The fourth person said that he was satisfied with the overall design of the website and he did not give any suggestions for improvements. However, he rated the website 9/10.
The feedback collected from the four people suggested that the website was good and appealing to the visitors. Additionally, the colors chosen gave the website a better look and were not shouting. Using shouting colors could may affect some users who are allergic to bright colors.
The assumptions made include: the users are not disabled and were using mouse, keyboard, and touch screen to interact with the website. They are also connected to high speed internet.
Portfolio 2 Summary and Conclusion
For any business with online presence, responsive web design is very crucial because of the increasing use of tablets, smartphones, and other mobile devices, and users are shifting more to smaller computing devices to access websites. The objective of website responsiveness is to facilitate development of one website that will have various elements that allows it to be viewed on various devices with different screen sizes.
When developing a website, it is necessary to have knowledge on theory behind color schemes. It begins by analyzing the color wheel and grouping the colors into three categories: primary, secondary, and tertiary colors. Color theory describes color combination strategies to enhance allure and optimize use. Choosing website colors requires selecting combination of colors that are harmonious and sober to the eye of the viewer.
Alignment enables the designers to effectively and efficiently make careful decisions concerning the layout of elements of the website. If alignment strategies are not used then the elements would be scattered arbitrarily with no or little connection to other elements.
References
Boudreaux, R. (2012). Effective design principles for web designers: Alignment. Retrieved from https://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-alignment/
Jones, B. (2017). Color Theory: The Importance of Color in Web Design. Retrieved from https://www.designandpromote.com/color-theory-the-importance-of-color-in-web-design/
Jones, J. (2018). The Importance Of Responsive Web Design | Digital Next. Retrieved from https://digitalnext.co.uk/dn-hub/blog/importance-of-responsive-web-design/
Pilon, A. (2018). What is Responsive Web Design? – Small Business Trends. Retrieved from https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html
Order an Essay Now & Get These Features For Free:
Turnitin Report
Formatting
Title Page
Citation
Outline
