00:00:12.160
Well, my name is Nicolas Barrera, and I'm going to be talking to you about responsive web design. I work for Kubocks as the lead application designer and front-end developer. I’m not a Ruby on Rails programmer. Sorry, I won’t be talking about programming today, but I will focus on front-end design.
00:00:20.640
You can check our website at kubocklabs if you're interested. I traveled a long way to speak to you and I'm really happy to be here. Yesterday was awesome, and I really enjoyed drinking with all of you.
00:00:46.000
So, what is responsive design all about? To understand what responsive web design is, I’m going to first show you a bit about the present and the past. This is one of my first sites that I created when I started designing. I made this site to present myself as a company, sort of like a we-are company speech, but it didn’t really represent me.
00:01:18.960
It was a fixed layout site, like most of the sites we know. My father told me it was a really nice website, but he saw scroll bars. My solution was to ask him if he was using an 800x600 resolution. I told him to buy a better monitor, saying he was making the mistake by consuming my content inappropriately.
00:02:02.480
In the past, we used to add footers stating, "This site is best viewed with Internet Explorer 6 at 124 resolution," and that’s a mistake. Users will consume your content however they choose, and they aren't going to change what they're using, especially if they’re using outdated technology. As a content creator, you have to care that your content works everywhere.
00:02:36.480
It's crucial to consider the different devices we have today, from large monitors to mobile devices like the iPhone, with varying resolutions. You must support all resolutions without worrying about them. Just make your content usable at any resolution. I like to show this example of a site I built that embraced responsive web design early on.
00:03:20.880
If it loads, you will see how the website adapts. When we test it by resizing the window, you can see how the sidebar changes and how the image scales down. This flexibility is essential as content works seamlessly across devices. The first step in embracing this approach involves setting up a proper viewport.
00:04:43.600
For instance, using Safari on the iPhone, the browser often doesn't advertise itself as 320 pixels wide. Instead, it may change the size to 980 pixels to avoid issues with sites not working correctly at smaller widths. By putting the appropriate meta tags in place, we can prevent browsers from automatically scaling our site and ensure the intended resolution is displayed.
00:05:27.680
We also need to consider the font size and ensure everything is readable. It's crucial not to limit user capabilities, and you should be responsible about the text size and readability for all users. When working on responsive design, one key aspect is creating fluid layouts, which is the most important step.
00:06:20.440
We'll start with a very basic structure that contains a header, navigation, main content, sidebar, and footer. Even without any CSS, this structure is inherently responsive due to the behavior of block-level elements. They automatically adjust their width to fill the available space.
00:07:50.560
Now, we want to apply some visual styling. This includes setting line heights, different fonts, and colors while keeping the basic responsive layout intact. It's important to start from scratch when designing for fluidity. Responsive design is not only about layout but about the way you think about content.
00:09:57.440
To make the layout responsive, we have to understand how percentages and 'm' units work for width and font sizes. For example, when using nested divs with percentages for their dimensions, you can see how everything adjusts when you change the window size.
00:10:55.200
As we increase the 'm' font size, you notice that everything scales proportionately, which is useful for typography. This relationship is important for ensuring that our text remains readable regardless of the viewport size, making our content both flexible and accessible.
00:12:50.080
Now, once we understand how percentages and 'm' sizes behave, we can give our layouts padding using percentages and set maximum widths based on 'ms.' The layout flows seamlessly as the viewport changes, allowing for a consistent presentation of content across different devices.
00:13:42.080
We determine the max width of elements based on legibility; you want to avoid very long lines of text that could strain the reader’s eyes. As we incorporate media queries, it becomes easier to apply styles that cater specifically to different screen sizes.
00:14:35.920
Designing for mobile-first has many benefits. It forces you to prioritize content, emphasizing what’s essential on smaller screens. Media queries can help adjust styles dynamically as screens get larger, ensuring that everything remains user-friendly regardless of device.
00:15:41.200
Lastly, it is essential to remove unnecessary elements when scaling down and focus on improving legibility. Ensuring that your website remains accessible and efficiently presents content across all devices is the ultimate goal of responsive design.
00:16:10.080
Responsive design allows for optimal viewing experiences by creating layouts that adjust to the viewport size. A solid mobile-first approach, complemented by employing media queries to enhance experiences on larger screens, is vital for any modern web project. And remember, like water, remain flexible and adaptable to meet the needs of your users.
00:21:04.160
Now, let's address some questions, and one of the critical issues is about preventing mobile devices from loading large images unnecessarily. In responsive web design, implementing solutions that optimize image loading based on screen size is essential to improve performance. There are methods being developed to ensure only images suitable for the current viewport size are loaded.
00:26:40.600
The advances in how browsers handle responsive design have drastically improved since earlier times, and you shouldn't have to worry about supporting outdated technologies or inefficient practices. Always focus on creating a seamless experience for users across devices, optimizing content and layouts for flexibility and readability.