Websites are accessed on a wide range of devices with varying screen sizes. Understanding website screen size and responsiveness has become crucial to web development. Ensuring that a website is responsive means that its design adapts and functions well on various screen sizes, ranging from desktop monitors to mobile devices.
In this article, I will review the perspectives of both designers and developers in achieving responsive designs. From a designer’s point of view, all the effort is made to create visually appealing designs that can adapt to different screen sizes. On the other hand, developers translate these designs into code, addressing challenges and ensuring the website’s responsiveness.
By explaining both perspectives on screen size and responsiveness, readers will have a better understanding of how designers and developers collaborate to create engaging websites. Let’s get started.
How does responsiveness work?
Responsive websites are achieved through the use of CSS (Cascading Style Sheets) to adapt the website layout to different screen sizes. Media queries are a key tool in responsive design, allowing the specification of different CSS styles based on screen size. The website “asks” a device what screen size it has and then delivers the appropriate CSS style.
Because of the importance of mobile devices, WordPress offers built-in options for creating responsive designs. For example, many themes are built to be responsive. Responsive themes often follow a mobile-first approach, prioritizing smaller devices and scaling up for larger ones.
Responsive frameworks for WordPress like Bootstrap or Foundation allow for responsiveness by providing CSS styles and JavaScript components. These frameworks include a flexible grid system for easier creation of responsive designs. With a grid system, different elements of the website can be easily rearranged for mobile or desktop versions.
Rearranging the elements is not enough, however–the design elements themselves need to be adapted for mobile or desktop. Optimizing content for different screen sizes involves using appropriate image sizes or file formats and modifying the layout and design of elements like navigation menus or buttons to ensure they work well on all devices.
The designer’s perspective
Before starting the actual process of design, planning and envisioning it is essential. Elene Arabuli, WLA’s web designer has her own method:
“When I start designing a website, I always keep in mind that it needs to be responsive. This means that the design should adapt to different screen sizes, from large desktop monitors to small mobile devices. To achieve this, I use a grid system to lay out the elements on the page. The grid system is made up of a series of columns and rows, and the number of columns can be flexible. This allows me to create a design that is both visually appealing and responsive.“
Key points from Elene’s method:
- Strive for a consistent and user-friendly experience.
In practice, the designer creates multiple designs while designing a single website. The design should be user-friendly and accessible across different sizes, and yet provide a consistent experience.
- Utilize the grid system to lay out elements on the page.
A system consists of flexible columns and rows, which allows for the creation of visually appealing and responsive designs by rearranging elements of the grid.
- Create design elements in different variations.
She may create large buttons, small buttons, buttons with icons, and buttons without icons. This allows her to easily change which design of the elements is used depending on the screen size. For example, Elene might use a large button on a mobile device and a small button on a desktop computer.
- Use vector files for all design elements.
Vector files are resolution-independent, which means that they will not appear pixelated when they are resized. This is important for ensuring that the design looks good on all screen sizes.
The developer’s perspective
Dmitry provides valuable insights on achieving responsiveness in web development. Several of the points he highlights are in line with what Elene had to say from the design perspective, while he also has a few additional aspects to keep in mind as a developer.
- Using the grid system:
He shares Elene’s perspective on the importance of using a grid system for understanding website screen size and achieving responsive design. When working with a theme like Foundation that already incorporates a grid system, Dmitry ensures that the layout effectively adapts to different screen sizes for the user.
- Using vector files:
Here is what Dmitry had to say about vector files:
“In terms of handling vector files, I agree with Elene’s approach, acknowledging that vector files are resolution-independent and prevent pixelation when resized. However, there can still be instances where pixelation may occur if raster images like PNG or JPG are inserted within vector files. Although these images can be wrapped in SVG tags, their small size may impact their quality.
If raster images like PNG or JPG need to be used within vector files, the best approach is to ensure that the raster images have a sufficiently high resolution to avoid pixelation when resized. This can be achieved by using high-resolution images or optimizing the raster images for the specific screen sizes they will be displayed on. Additionally, it’s important to carefully consider the size and placement of the raster images within the vector files to minimize any potential impact on their quality.
- The importance of viewport width:
Dmitry adds another point on achieving responsiveness through development techniques. He highlights the use of viewport width (vw) units, which ensure a consistent visual appearance across different desktop resolutions.
The viewport refers to the visible area of a web page within a browser window. This approach ensures that the size of elements, such as text, images, and containers, scales proportionally with the viewport width. As the user resizes their browser window or views the website on different devices with varying screen sizes, the elements adjust accordingly to maintain their relative sizes and proportions.
- Logical order of section elements:
It is significant to consider the logical order of section elements for tablets and mobiles. In some cases, the order of elements may differ between desktop and mobile designs, requiring careful handling to maintain a cohesive user experience. Dmitry points out that this may lead to duplicating code, which can be seen as a drawback from a development standpoint.
Achieving responsive website design involves the harmonious collaboration of the designer and developer. Elene, while planning the design, keeps responsiveness always in her mind and prioritizes adaptability to different screen sizes by using grid systems and creating design elements in various variations. She emphasizes the use of vector files, which maintain visual quality across screens.
Dmitry implements responsive designs through CSS and media queries, ensuring that the layout and styles adjust based on screen size. He highlights the importance of grid systems, style guides, and logical element order while considering challenges such as handling raster images and potential code duplication.
Understanding website screen size and responsiveness is a concept every designer and developer should carefully consider while creating a website in order to achieve a result they can be proud of.
