Responsive Websites Made Simple for Graphic Designers

In order to make this simple for the professional graphic designer, here’s Designers Insights explanation, not from a web developer’s incomprehensible point of view like we typically find when searching for answers on the Internet, but from a comprehensible graphic designer’s point of view. Our objective is for you to hit the ground running the next time you design a responsive website. We made this ultra simple for you to understand. It is important that you read this text below in the right order, because one answer leads to the next question.

1. Pixels - Does it mean anything anymore?

The pixel has been used in web design forever. It was used as a measuring unit by graphic designers and was how web layout and individual elements were created, plus it also governed the size of typography. However, the recent emergence of high-pixel-density screens and Retina displays has changed everything. A pixel is no longer the single smallest point that can be rendered by a screen. What this means for the graphic designer, is the web developer is not developing for the hardware pixel anymore, like they used too. It means that when you design for a modern-day, high-quality screen, like on mobile devices, it’s no longer Hardware Pixels that govern the dimensions of your graphics. It’s now called Reference Pixels or CSS Pixels. The number of CSS pixels is always going to be the same as hardware pixels on a regular screen, but the number of CSS pixels will always be less than the number of hardware pixels on a higher pixel ratio device (high-resolution screen). It just means that each CSS pixel is being rendered by more hardware pixels, which makes your text and layout look sharper. High-resolution screens are good news for the graphic designer. Simply put, CSS Pixels is the ‘actual size’ at which a user sees the browser window and is used to define Breakpoints, while Hardware Pixels is the screen resolution.

2. What size standards do I use to layout a website today?

Simple, just like it was done for a desktop computer screen before! Why? It’s because you are most likely only using ‘one computer screen’ to design your site. You just need to understand that the user sees graphics in ‘CSS pixels’, which is the ‘actual size’ at 100%. The actual size is what matters most and not the screen resolution when designing. You want to design at the size at which the user is going to see it on his device. If your computer has a regular screen, then it’s using hardware pixels at 100% (actual size), so you design your desktop browser at the ‘actual size’, let’s say 1200 hardware pixels wide and you design your smartphone format at the actual viewing size too, let’s say 480 x 320 CSS pixels. Graphics will look comparable in size on different resolution screens, like Retina 4K display, 5K or even HDTV. Text content will also look better on high-quality screens, but that being said, the ‘new’ problem for the graphic designer is that your image content may look pixelated or blurry. Why is this? It’s because your images don’t have enough resolution for the new high-pixel-density screens. The web developer now has to upload to the server, high-resolution images for these new high-quality screens. It is the developer’s job to give the designer, exact formats in pixels for individual images and it’s also his job to make sure that the right image resolution is uploaded once the browser detects the resolution of a screen. Simply put, you provide high-resolution images and from this original file many other formats are created to be displayed on different devices, based on screen resolution, format and web connection. Once a new image is uploaded to your server, test it on different devices. If the image looks blurry or is too big, ask the developer to fix it.

3. Where do I start when designing a responsive website?

Well, the web developers would say, always start with the mobile design first. Why? Because if you take into account the mobile-first approach to responsive website design, it’s a good exercise to manage your client’s content. Basically, it is the graphic designer’s job to prioritize content and keep it to a minimum for a small mobile device, while designing functionality and the user experience for all the other formats as well. So our advice is, design for the smallest format, a medium size format and the largest format at the same time (phone, tablet and desktop). You will need to create at least two different contents for all formats and this is where the professional designer shines, compared to a web designer. Most of us are already experts at creating elaborate integrated design campaigns and the process is just the same for a responsive website. It’s the same process of analyzing content for creating an elaborate 100-page catalog and then creating an advertising campaign for that same product. While catalogs are rich in information, advertising information is kept to a minimum. An ad also has more character, personality and style. It’s basically a visual identity system, where key messages and information are broken down into manageable chunks, for various applications. In the case of a responsive website, it starts with the smallest phone format, to regular tablet and desktop format. So in reality, you design and manage content for 3 formats; phone, tablet and desktop.

4. Scaling your site layout responsively and creating Breakpoints

Ideally, when we design responsive websites, we want to make the grid layout and content as flexible as possible so it scales well, instead of providing two or three fixed-width layouts like we used to before. In addition, we also want to use all the screen real estate. Now this is where it gets really complex and challenging for most print designers who are used to fixed formats. Basically, you need to get used to it. Once you have a development site up and running, grab the bottom right handle of your web browser window and make the window smaller up until it reaches the first breakpoint and also visualize how responsive the site scaling really is. Do this up until the browser window is scaled down to a phone format. You’ll quickly get addicted to doing this and this is how you test your site’s responsiveness. As a professional you should be using the Google Chrome Inspector, which is a free professional tool found in the Developer Tool Menu of the Google Chrome browser. The Inspector will simulate your site as it will appear on any device or brand, for you to test. It will render the page ‘As Is’ and is very useful, especially to test font size, because certain devices might load and display them differently. Basically, adaptive layouts for responsive websites boil down to two techniques: 1) Identify breakpoints where your layout and content needs to change, and 2) In between breakpoints, visualize how content is scaled proportionally. Yes, this can be a real nightmare to manage for a print designer, because content, white spaces and margins are moving constantly, but it’s your job to design it so you are satisfied with most of the formats. But the idea is to be satisfied with them all.

5. Designing a great user experience

The user experience all comes down to what device he is using to navigate your website. The only responsiveness you need to be concerned about occurs when the user flips his device from a vertical format to a horizontal format. Design it so the user experience is great when the layout is either vertical or horizontal. Yes, this again is a real challenge for the print designer. The user experience, beyond your design look and feel, is all about the navigation from that point on. Make it simple. Make it intuitive and user-friendly. On a phone format, a one-column design is what works best. Make the typography large and easy to read. Keep content to a minimum. Make the buttons, the size of a fingertip. Use the Hamburger Menu to navigate. Design your site so it uses all the functions that come with a modern phone, like maps and calling. Make it easy to share on social media sites. Avoid extra-long pages that never end. When designing for tablets, a mini tablet should be considered like a large phone, while a regular size tablet should be considered like a small desktop. Adapt your responsive layout grid accordingly. When designing for a desktop format, take into consideration all the various screen formats, from a small laptop to the largest desktop monitors and everything in between. We always find it’s best that the layout is responsive to the width of the window, compared to having a 970-px wide layout on a 1920-px wide screen, where half of the screen is blank. Design it so it’s really responsive to all screens formats when ever the content allows it. Yes, this is the real challenge that comes with designing for the web today. We think it’s great! To summarize, a great user experience starts with fast page loading, stunning graphics, short content, intuitive navigation and a well-designed responsiveness for all devices.

6. Managing images, photography and graphics

Today on the web, images are getting bigger than ever. To take full advantage of this, you need a web developer who has solutions that work for the whole spectrum of devices and network conditions. One who offer users a compelling experience regardless of the device they use. This means that on high-quality cinema displays, you want to wow your audience with high-quality, large file size images. At the same time, you don’t want your 1600 x 1200 px photographs to load for users on a 4-inch cellphone screen with a 3G connection. Performance and page loading time is still a ‘primary’ concern in regards to the user experience. Images and other media are usually the most bandwidth hungry parts of any page, compared to the text, HTML, CSS and JavaScript files. In order to make your page lighter and faster, you should always take full advantage of CSS3 and have your web developer code in HTML various popular effects like background gradients, rounded corner boxes, box shadows and text shadows. Modern browsers now support these effects in HTML and you no longer have to create bitmap graphics. But, the best part is that these HTML graphics look so much better on high-quality screens compared to a bitmap image. It is your job to work closely with your web developer to optimize speed and quality for the benefit of the user experience.

7. Scalable Vector Graphics (SVG) compared to Bitmap Graphics

Another major improvement since the Internet became popular 20 years ago, is we now have the ability to use vector graphics on the web and don’t have to convert vectors into bitmap images anymore. Actually today, you want to avoid using bitmap images altogether whenever you can and should only be used for images. Here are the 3 major benefits to using Scalable Vector Graphics (SVG): 1) They weigh almost nothing compared to a bitmap file because it’s using basic XML format code and this will dramatically improve upload speed. 2) Since a vector is a vector, it will always display ultra sharp on any screen, regardless of screen resolution and its size. It is infinitely scalable without losing any quality and will scale super smooth on any modern browser. 3) Every individual element of an SVG graphic and every attribute in an SVG files, can be animated. Yes, you heard us correctly! What this means in short is, all vectors online will look as sharp as typography, animations and scaling, will be super smooth and can be printed without losing any quality! We at Designers Insights, think that the web has finally come out of the Dark Ages and are so excited that the Internet finally made it possible for professional graphic designers, to use the two main tools of our profession, Vectors and Fonts! Remember Flash? This is the same, but 15 years later. The difference is, it now works for every user! SVG 1.1 is a W3C recommendation. From now on, any vector illustration or graphic you create can be transferred to online applications by simply providing your web developer with your AI files for him to code in XML format, to create a Scalable Vector Graphics.

8. Managing Typography for readability and optimum user experience

We think that the biggest improvement in recent years is that the web finally gave the professional graphic designer the ability to choose any font we want, in order to keep the integrity of our client’s brand. After an agonizing 20 years, we finally gained ‘some’ control over typography on the web. Typography has always been our number one tool for designing and communicating our client’s complex messages. This is huge for professional graphic designers! Typography online was always a great source of frustration, as well as the archaic bitmap graphics. From now on, you’re no longer limited to web-safe ugly fonts. You can now upload any fonts to your site as long as you own the license to do so. That said, if you use too many fonts, it will dramatically slow down a website’s initial loading time. So keep the quantity of different fonts to a minimum for an optimum user experience. On a website, fonts come in two categories: header text and body text. It is crucial that you determine the proper font size not only for each of these categories, but for all breakpoints for different screen sizes. Since hardware pixels no longer govern the type size on the web, this takes a little getting used to. You also want to balance readability with convenience when designing with typography online. That means not having to scroll too much, so keep text short on small screens. Google also suggests that a line of text should never have more then 70 to 80 characters. Paying extra attention to type size, margins, padding and other spacing attributes and testing it thoroughly on all devices, is key to designing a pleasurable reading experience for the user and is a big part of designing modern websites. Having almost no control over typography online, drove print designers bananas for well over 20 years! Now is the time to make our peace with the Web, even though there’s still lots of room for typography improvements, especially if we are to start applying basic and advance typographic rules to the Net. Maybe it will take the web another 20 years?