Join Paul Trani for an in-depth discussion in this video Understanding websites and mobile devices, part of Creating a Responsive Design with Edge Reflow.
- View Offline
I'd like to start off by giving you a good understanding of websites and mobile devices. Because let's face it, things have changed a lot these days. And in fact, within the past 20 plus years since the invention of the Internet in 1989, we do things differently these days, largely due to the proliferation of tablets and mobile devices. Again, you see them everywhere. You probably have one in your pocket. How does this change the web thanks to these new devices? And again, I can start out designing for a web browser on my desktop.
Those were the good old days. We have all these different devices and really, many different types of devices amongst mobile phones and tablets as well. How does this affect websites? Well, we have potentially legacy content. Just content we've made in the past that probably worked for us in the past. We've used legacy technology. Again, you might be using an older version of HTML, maybe not HTML5. It doesn't matter using potentially Flash or Shockwave. You might be using legacy tools to make this content.
And ultimately, this leads up to a less than optimal experience for the end user, okay? Case in point, here is my website. This is from 1997. I thought this was pretty cool back in the day. It had some fancy rollovers, some flyout menus. I was using Flash and even Quicktime, and I thought it was pretty cool. And it served its purpose back in the day. And it looks great in a browser. But as we start to look at these different devices, say, for instance, a mobile device, you have to pan around a lot to get to that content.
And even for, say, a tablet device, again, there's rollovers that you actually won't see. You won't see some of those fly out menus. And depending on the tablet device, you're not going to see that Flash content either. So obviously, I would need to revamp this. And trust me, I have. So what is the solution? How can we create content for all these different devices? You know, how can we keep from creating multiple websites? You know, do we have to create one for tablets and multiple websites for multiple mobile devices? Do we have to do that? That seems like a lot of work for me.
Well, we'd want to use modern technologies, and our biggest weapon for this is using Cascading Style Sheets. That CSS changes the visual style of the HTML content but the great thing is, is that CSS separates the style from the content. Okay? So you can actually have different CSS that can be used at different times. So again, you create your CSS. It's separate from your HTML that can be applied to it. And that affects your experience on, say, for instance, a desktop.
You can also have a mobile device. And a different style sheet then affects the HTML and changes the look of that HTML for that mobile device. And this is actually called CSS media queries. Okay. CSS media queries can query the device to determine the size, and it can determine the orientation, the resolution, lots of different properties of your device. And based on that size or whatever property you're trying to define or affect, you can apply that CSS to it.
This will make the site responsive to the device. And this is where we get the term a responsive design. And a basic example of that is this desktop experience, you might have three columns. And on a tablet device, you might reorient those columns differently, maybe put them in rows. So you have your primary information at the top, which was once on your left-hand side, and so on and so forth. And even for a mobile device, since they're on a mobile device, they might be on the go, so do I want to give them all of that information upfront? Maybe I want to hide some of that content, so maybe you have the, only the primary and secondary information.
And then maybe a link to the full site at the bottom. But I'm making decisions based on the device and of the end user's goals, depending on the device that they're on. And we can do all of this using modern tools. Adobe Edge Reflow CC is one of those modern tools, or apps, and it allows you to design the responsive web. And it uses CSS and modern web technologies, and it really makes heavy use of media queries very effectively. So what you have in Reflow is you have this app that's actually built on web technologies.
You have this example website that you're given right off the bat. Up at the top, those colored bars are actually the media queries, and it's great. Because whatever I create in Reflow is actually created using CSS. So, I have the confidence in knowing what I create in Reflow will actually display well in modern web browsers. So, let's take a look at how you use Adobe Edge Reflow.
- Understanding websites and mobile devices
- Creating your first layout
- Adding text that reflows automatically
- Building navigation
- Creating and styling HTML forms
- Creating tablet and mobile layouts
- Linking multiple pages
- Previewing your layout