least monthly by the end of this year, up from 93.1 million in 2011. • By 2016, nearly 3 in 5 consumers will have a smartphone • Tablet users will reach 54.8 million in 2012, up 62.8% from 33.7 million in 2011 • 61% of customers who visit a UNFRIENDLY MOBILE SITE, are likely to go immediately to a competitor’s site instead. some stats & stuff
and on about how the “mobile web” was going to overtake the traditional one, the revolution that took place was much more DRASTIC: the web became ubiquitous. Source: http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
suit different screen sizes, from widescreen desktops to tiny phones 2. Resizing images to suit the screen resolution 3. Serving up lower-bandwidth images to mobile devices 4. Simplifying page elements for mobile use 5. Providing larger, finger-friendly links and buttons for mobile users 7. Detecting and responding to mobile features such as geolocation and device orientation DEFINING RWD
{the hard part} 2. Understanding how to organize your content The web has moved beyond the desktop, and it’s not turning back. -Ethan Marcotte, Responsive Web Design DEFINING RWD
short, I should care because I want the visitors to my client’s websites to have the best experience possible, without forcing them to adapt themselves. Plus not look like an idiot when my client asks, “Can you design websites for cell phones and ipads?” DEFINING RWD
potential customer is brows- ing their site from a mobile phone, chances are they aren’t that concerned with how pretty the site is (OMG you know that kills me to say). The customer instead would want to know WHAT the hours are, WHERE they’re located, HOW to make reservations, and maybe a quick look at the menu. VS. Their potential customer browsing from a desktop computer, prob- ably isn’t looking to eat right now, and isn’t in a hurry to see where they are located and what their phone number is YET. Most likely they will be looking to see if they offer a good atmosphere and what types food are available. DEFINING RWD
was over whelming. There are a lot of great reads, ask me I will email you my top 5 lists. But basically what I did, was compile a bunch of key points from each read that helped me personally. Then began to design the best that I could with the width limitations of responsive design. One blog in particular helped me speed up the design process. Here is what I came up with. LEARN. READ. RESEARCH
width site for a client that will be mobile phone friendly. They want to go the least expensive route {I know shocking right?!} So, the obvious choice to help get the design started — and I know you are all thinkining in your head already...Photoshop. Right? THE USUAL SUSPECTS
why: Yes, there are huge differences between designing print publications and designing for the web. However, most web pages are simply a combination of photos and text, JUST LIKE PRINT. And where Photoshop excels at manipu- lating images {but sucks at type} and Illustrator is exceptional at typography {but sucks with images}, InDesign is built for both. Even BETTER, InDesign’s internal logic parallels that of web design and development. Every new document begins with a grid. It uses type and object stylesheets that should be familiar to anyone who has used CSS, allowing you to change the characteristics of every headline {or object} from one master style. {INSERT SONG: “WEEEE ARE THE CHAMPIONS...”}
of the process. I still use Photo- shop when the program makes sense — such as tweaking details of a icon sets or designing ads and artwork with images to export as web ready jpgs. To be honest, I have used InDesign to start the process of website design instead of mockflow or other wireframing programs for years. It is just as quick, if not quicker for me. WEB PROGRAMMERS, stop freaking out! CHOOSE YOUR WEAPON
type, you adjust all the attributes you’d expect (size, color, font, kerning, tracking), and others you might not such as CSS3 techniques like shadow and gradient. This way of working maps directly to development work, from the style names down to the design characteristics. Like the web, InDesign also has a notion of templates. Use master pages to hard-code common elements and create a baseline for every section, article, or project page. Change the header once and it automatically updates in every template. Try creating a complex system like that in Photoshop. CHOOSE YOUR WEAPON
this site has already been designed. The site will go live soon. Now the client is talking about how it looks and works on his iPhone. When you are designing a static website you can have a lot of freedom, but in responsive design there are more things to account for. Use a method that works for you {InDesign!} and spend your time making that look great. If people can make email templates look awesome you can do the same with a responsive design, it just takes a little creativity. CHOOSE YOUR WEAPON
templates look like at each breakpoint? What do the header and footer look like? What content appears on the homepage, various section fronts, and article page? What’s the overall look and feel? BREAKPOINTS
widths where we would optimize your designs. A fluid grid would fill the spaces in between and adapt the design to widths that maybe aren’t as popular but are out there like the funky size of the Kindle Fire. BREAKPOINTS
arguments in regards to the break{ing}points. One point I agreed with in the discussion of breaking points: “Why would we bother using fluid layouts and flexible media if we only care about how the site looks at 480, 768, and 960+ pixels wide? Do not design only around viewports.” He does the standard 960 px wide design and only establishes a visual theme. {To define color palettes, typography, and UI patterns.} From there he immediately goes to the browser and starts working from mobile phone up. Source: First comment on http://www.webdesignerdepot.com/2012/02/de- signing-for-responsiveness/ BREAKPOINTS
because that point should be RELEVANT to your design, not an existing device. Building responsive designs around existing viewports breaks the idea behind RWD. If you base everything on a site around the devices of TODAY you fail to truly support the devices of tomorrow.
need to SEE what I am working with so I chose to work with some breaking points. There are so many available devices and sizes to consider — smart phones, dumb phones, tablets, laptops, PCs, etc. Will you do a 4 breaking point design or 6? {What does the budget allow might just be your breaking point.} Here are 6 pixel breaking points to keep in mind based: 1200px | 960px | 768px | 600px | 480px | 320px ***{Then use InDesign’s master pages to create templates with appropriate grids for every breakpoint, and design key pages for every width.}*** Source: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning BREAKPOINTS
go the “cheapest route.” {I know we hear this all the time.} But do you design for the Kindle Fire? There are some things to consider and mobile marketing facts to help you help them, pick your breaking points: • Out of the 5 billion mobile phones in the world, 1.08 billion are smartphones And this number is growing rapidly • Android has the highest market share with 46.9% – the iPhone has 28.7% • Over 30% of restaurant searches are from mobile devices • 2/3 of smart phone users, use their phone to make purchases • blah blah blah. {You can find all of these you want, just wanted to give you a good starting conversation point. We need to be ready to move in the mobile web design direction, and so do our clients.} source: http://www.digby.com/mobile-industry-resources/mobile-industry-statistics/ BREAKPOINTS
design with more screen real-estate. The real reason I started this design from large to small, is because the full site is already done and live. And as designers, I have a strong hunch that this will happen lots in the near future as clients want to redesign their current sites for multiple devices. So really, this was good practice run for me. BREAKPOINTS
smaller width designs, you will be forced to decide quickly what is most important within the site. Of course, it is a good conversation to have with your client as well. It is their business, and they should know best what stays in the “keep pile.” However, we are always there to help guide them to the “what goes pile.” DESIGN AWAY ALREADY!
designing this first. Everything else is based off the header obviously so this seems like a no brainer. No sense having to redesign EVERYTHING if the header doesn’t work at 300 pixels as well as 960/1200. Duh. {Introducing our current header.} DESIGN AWAY ALREADY!
In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a mockup in a pixel based imaged editor, like Photoshop or InDesign {yes I inserted this here}. Then measure a page element and divide it by the full width of the page. For example, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math and the chart they give to represent this: DESIGN AWAY ALREADY!
work. Some items cannot be dropped down by such a large %. Also, some items will be dropped off completely due to lack of importance for the mobile user. However, for most items that you would be taking with you all the way down to your smallest breaking point, it was pretty darn close, see my math to the right. I wanted to ask if anyone here suggests something different or has a fool proof tool for this? DESIGN AWAY ALREADY! Logo at 768 px 275 x 242 px Logo at 320 px 124 x 110 px Now, USING THE MATH: Logo at 768 px: 275/768= 35.80729% Apply it to the 320px layout: 320 x 0.3580729% = 107.42 so approx. 107 px is what the width of my logo should be Here is what I had WITHOUT using the math:
briefly. Currently there is decent support across many modern browsers. They basically allow you to gather data about the site visitor and use it to condition- ally apply CSS styles. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. You can do this with the “Mobile First Approach OR “Widest Screen Approach.” MEDIA QUERIES & DESIGN
@media rule; 2. The media type {the most common being print and screen} 3. The maximum width of the screen you are targeting. Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used: MEDIA QUERIES & DESIGN
in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait. (max-width: 780px) Works for iPads and other large tablets in portrait mode and any screens narrower than them. (max-width: 1024px) Works for iPads in both orientations, as well as for small desktop browsers. And here is where you lose me. For more information, visit: http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/ MEDIA QUERIES & DESIGN
images proportionately, and many are easily done. The most popular option: is to use CSS’s max-width for an easy fix: img { max-width: 100%; } You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size... as long as no other width- based image styles override this rule. NOTE: While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily. BACK TO DESIGN
shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). BACK TO DESIGN
{I REALLY MEAN YOU} can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc. <img src=”smallRes.jpg” data-fullsrc=”largeRes.jpg”> The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load. Source: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ BACK TO DESIGN
especially tricky, we need to make sure that bodies of text are comfortable to read and that we don’t set headings too large or with too much leading. Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight. You can find a sample fonts to use as a refer- ence ready for download on Github. Source: https://github.com/malarkey/Responsive-type-references TYPOGRAPHY
digital reading experience. The more readable the typeface, the better the reading performance of a site. Most people can’t discern good from bad typography, but everyone can feel it.” There are not a lot of options out there yet and there was too much to take from this blog I read, so please take the time to read more about RT using the Information Archi- tects website below. Source: http://informationarchitects.net/blog/ responsive-typography/ TYPOGRAPHY
specifications, approved, live. The main content area is 960px. Wide banner pushes outside the content area to 1120px. When shown at 1200 px or greater, you see more of the clouds with the planes and content centers. BACK TO DESIGN
is getting tight. Things to start thinking of: What are the shortest possible section names? {Change About Us to About, Contact Us to Contact, Specials & Blog to one or the other at the client’s choice...will they run a lot of specials or be blogging more?} Is it necessary to take up precious real estate with a section called “home”? {Answer: No. But I feel this way with any site.} What happens in between the major breakpoints? Can we use longer section names with ellipses? {Answer: ummm, no way. Not unless you’re comfortable asking folks to click on “Today’s Pap …”} BACK TO DESIGN
2. Search bar goes over mountains 3. Red nav banner: sides cut off so it can fit any width size horizontal & vertical. 4. Shortened nav titles. Will be changed on 960-1200px design also. 5. Slide show still exists, but is smaller. Taller body content, but the shrunk the width. 6. Social icons smaller BACK TO DESIGN
are the dropdown menus. Questions to think about: What are the most important navigation items? What’s absolutely essential? Certainly the search bar. And then I asked the client what they want/need to keep. To the right, you can see what we kept for the navigation: Everything of course shrunk in size if we kept it, the content box taller and skinnier again and dropped down to 2 attraction images vs. 3. BACK TO DESIGN
break- point for landscape view. This keeps the header compact. Otherwise, users wouldn’t have seen much of anything on the first screen. Not good. 1. Navigation changed dramatically. 2. Search is just the magnify glass icon. 2. Social icons grew larger again as this was most important to the client with buttons users can easily see and click. 3. The slide show dropped out completely and we have intro content first now with attractions individually stacked below. Images back to full size again. BACK TO DESIGN
at vertical size. Really not much changes except the width of everything based on the 480px design. Something to keep in mind: Less is MORE for these smaller designs.
producing page after page of comps just to show a simple link state or a dropdown animation, says me the designer. I can’t tell you how many times I thought I had things like that figured out only to throw it away once coding part begins. And in the end, your design isn’t an accurate representation of the final product. It’s also easy to leave things out of a static design. What happens when the user clicks here? What happens to the design between these breakpoints? In code, you have to answer these questions... and by that I mean answer the coder in my case :)
big design questions are nailed down, we move into coding. Here’s generally how things work: 1. I design it, hand it off to programmer. 2. We then must meet and review coded comps and the programmer will ALWAYS have questions like this: Auz: Why did you want it this way? It would be better this way {shown to me in coded and live example} We come to a decision. Move on. 3. Rinse 4. Repeat 5. Rinse 6. Repeat 7. Rinse 8. Repeat 9. Rinse 10. Repeat 11. Rinse
we haven’t thought of everything. That is why we have programmers to shed some light on how our designs WORK when live. So during this ever changing wide world of web, responsive design and of course the battle between designers and coders, we need to ask lots of questions: What will be best for the user? What worked on different devices? How the designs translate at different widths?
in RWD can be created with CSS it may feel like your role as a designer has diminished. Really, our roles have just changed. Web design for too long has been about designing the interface while neglecting the content. The layout is still important but the developer can do much of it, yes. But we need to focus on making sure the goals of the website are met. And to spend the most time on strengthening the conversion process with design and content each at 50% importance. This will help to emphasize important content, and making it more palatable and digestible no matter what platform it is viewed on. WHAT NOW?
timmyc
tacck
bbrbbq
nobutomurata
tohutohu
oracle4engineer
trishagee
sansantech
sonatard
recruitengineers
hirosatogamo
kamina_zzz
3n
addyosmani
keithpitt
kneath
garrettdimon
palkan
bermonpainter
sachag
lara
chriscoyier
malarkey
