Maintaining Image Hierarchy And Aspect Ratio In Responsive Design | Van SEO Design

---

Maintaining Image Hierarchy And Aspect Ratio In Responsive Design Posted: 30 Jul 2012 05:30 AM PDT For the last few weeks we’ve been talking about images in the context of responsive design. We looked at how to serve different images to different devices and then a couple of potential ways to replace bitmap images with icon fonts and SVG. While collecting resources for those posts I came across a few more image related issues and thought I’d combine them in a single post and present them here. Maintaining Image Hierarchy The first step in having your images be flexible is to set max-width to 100% and let the height of the image adjust. This maintains the aspect ratio of the image, but there’s a got’cha that’s not immediately obvious. Andy Clarke pointed this out in his post about maintaining image hierarchy. But because of this banner image's wider aspect ratio, when it's squeezed down to fit a narrow column it loses its position in the visual hierarchy of the page. In fact, the normally smaller inline images appear larger, inverting the visual hierarchy. Because adaptability is based on width, horizontal images need to scale more than vertical images. The problem this can create is the scale between images can change. A horizontal image that’s larger and more dominant in the hierarchy on a wide screen browser, could end up being the smaller and less dominant image on the narrow screen of a mobile device. Check Andy’s post for a good example where this happens on a site and also an example where the hierarchy is preserved. Depending on your design and the images this may or may not be an issue, but typically hierarchy is something you’d want to remain consistent across devices. It’s something you’ll have to decide on a case by case basis. Andy’s solution involves some css and some thought about what’s the important part of the image. First add overflow: hidden to the image’s container. 1 2 3 4 5 figure { overflow: hidden } Next you want to reset the image’s width and height to their native dimensions (here 800px and 400px respectively) and use margins to determine what part of the image should show. 1 2 3 4 5 6 7 8 9 10 11 figure:first-of-type img { margin : 0 -50%; width : 800px; max-width : 800px; height : 400px; } Keep in mind that replacing the image using techniques I discussed a few weeks ago is another solution to this same problem. Sometimes though it’s not practical to create new images and in those cases the above might work well for you. Controlling Aspect Ratio with object-fit In the future the css3 property object-fit may provide even more control to the above hierarchy problem. At the moment there’s little if any browser support. The previous link discusses object-fit in the context of a different problem, but the basic idea is similar to Andy’s solution above in that you crop the image to fit the container. The difference is you’d have more control over how that happens. Object-fit will have the following values. contain — The element is resized to fully display in its container while maintaining its aspect ratio. The image is letterboxed where necessary. fill — The element fills it’s container completely. It will stretch and break aspect ratio if necessary. cover — The smaller of the width or height of the element is made to fit and the other dimension is then cropped. none — Does nothing. Uses the intrinsic dimensions of the element. If the above seems familiar it’s because object-fit works similar to the css background-size property, except that it works on inline and block level images instead of background images. There’s also a corresponding object-position property that works the same as the background-position property, which allows you to set a distance from the top, right, left, and bottom of the container. Making Image Maps Responsive I’m not sure the last time you created an image map. It’s been awhile since I’ve created one. Still from time to time you or a client may want to include one on a page. Image map coordinates are set in absolute measurements. which makes them hard to use when your image is changing size. Matt Stow created a jQuery plugin that will recalculate coordinates as the image resizes. You can see a demo here and the demo links to the code on GitHub. Keeping Images on a Baseline Grid When it comes to keeping images on a baseline grid there are a couple of things you can do. One is to make sure your image heights are always a multiple of your baseline unit. That’s not always practical, especially with a responsive design where the height of your images will change. The other solution is to set margins on the image so that anything that follows it falls back on the baseline. Easy enough when you know the height of the image, but not so easy when that height is changing. Fortunately Matthew Wilcox has a jQuery solution that will dynamically calculate the image height and adjust the margin. Another solution to the baseline issue is to keep your image height fixed and then crop the image to fit. The method is similar to Andy’s solution above. Making Embedded Videos Fluid When you’re directly embedding a video on a web page, you can apply a max-width of 100% like you would for images and have flexible videos. Unfortunately many of us aren’t embedding videos directly, but rather grabbing code from sites like YouTube and Vimeo. The videos load inside an iframe or use legacy embed and object code. These videos usually have a fixed width applied to them, which breaks our flexible max-width css. Chris Coyier has a great post on Net Magazine walking through the issue along with solutions based on which service is supplying the code. At times the solution may need a Javascript solution and once again Chris comes to the rescue as he and the team at Paravel developed a jQuery plugin FitVids.js to help give fluidity to your embedded videos. Dave Rupert from Paravel also has a solution similar to how FitVids works (the padded box) for dealing with images alone. Summary You may not run into all the issues described above often, but more than likely you’ll encounter them at times. The solution of cropping an image depending on the device comes up often enough in different contexts that it’s something to pay attention to. Making videos fluid is another. You may or may not run into image maps and baseline grid issues as much, though you may certainly have to deal with them from time to time as well. I don’t use a lot of image maps myself, but I do like to use baseline grids. Believe it or not there’s still more that could be said about images where responsive design is concerned. For example I’ve barely scratched the surface of everything being written about retina displays and how we should create images for them. I’ll save those for another time though. Next week I want to move past images and dig a little deeper into media queries and breakpoints. The post Maintaining Image Hierarchy And Aspect Ratio In Responsive Design appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

This Redesign Isn’t Finished | Van SEO Design

---

This Redesign Isn’t Finished Posted: 29 Jul 2012 01:24 AM PDT One of the goals I set at the start of the year was to redesign this site. It took longer than expected (a case of the cobbler’s kids among other things), but I finally managed to switch to a new design. If you normally read these posts in a feedreader of some kind, today might be the day to click through to the site to see the new look. The images in this post are all screenshots from the new design. It Never Ends Like the title of the post says, this design isn’t finished. That’s no accident. It was a design decision. My main objective was to develop a system on which I could continue to build. I think (hope) I’ve done that, but we’ll see. I’ll have a number of things to say about the design in the near future. I’d like to talk about some of the things I learned in working on this design and perhaps more interesting why I made some of the design decisions I made. I’m not entirely certain what I want to talk about, but a few things that come to mind are. Business goals Design goals Future plans Typography Layout Color What I learned What I need to learn GIve me a week or so to plan out what I want to say and what order it makes the most sense to present it. If there’s anything you specifically want to know, just ask. There might be a few things I hold back on, but for the most part I’ll be happy to answer any question you might have in regards to the new design. Oops. Did I Break That? Yes I did. Sad to say I’ve done some stupid things with the code here over the years, including the addition of inline css on old posts. When I first starting using WordPress I didn’t know any better and unfortunately didn’t think of the day I’d want to redesign the place. I also reused class names that now have different layout styles applied. I know the new design breaks the layout of a lot of older posts. Most of them just need a small bit of tweaking. Removing any inline css I still have and renaming or removing class names. Mostly busy work, but it’s a lot of posts. I have a list of about 120 that need attention. Hopefully within a week or two they’ll all be looking as intended. If you notice anything not working please let me know, however do know I’m aware that older posts aren’t looking right. If you notice them still looking off in a couple of weeks let me know, but for the next week or so realize that I probably already know. Another issue I’ll have to look into sooner rather than later is the color. On the Mac side the headings are a muted red, where on the Windows side they seem to be more of a purple. Muted red was the goal and I’ll see what I can do about making everything the same on both platforms. Have a Look Around For now look around and hopefully enjoy what you see. One thing I will note is that I tweaked the name of the place from Van SEO Design to Vanseo Design. I’l explain why when I talk about some of the business goals behind the redesign. Feedback is appreciated. Tell me what you like. Tell me what you don’t like. Just be nice about it. Honest, but nice. I’m going to take the rest of the weekend off and then jump right into fixing up the older posts and a few other things I know need attention. I have a to do list that’s literally a mile long (I know because I measured it). Like I said this design isn’t finished. It’s only the beginning. The post This Redesign Isn’t Finished appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

How To Create Simple Shapes With Scalable Vector Graphics (SVG) | Van SEO Design

---

How To Create Simple Shapes With Scalable Vector Graphics (SVG) Posted: 23 Jul 2012 05:30 AM PDT The last few weeks we’ve been looking at images in the context of responsive design. First I talked about the techniques for serving different images to different devices. Then we looked at using icon fonts to replace images where possible. This week I want to consider another potential solution to some of our image issues. I want to offer a brief overview of scalable vector graphics (SVG). Vector Images vs. Bitmap Images Images present a challenge in web design that’s often tied to bandwidth. We want the highest quality images, but we also want to keep file size to a minimum. These tend to be mutually exclusive. More of one usually means less of the other. This isn’t necessarily true of all images, though. It’s specifically related to bitmapped images, where the information for rendering the image is in the individual pixels. Scaling up requires more pixels. Scaling down means having more pixels than you need. Vector images, on the other hand, store their information in mathematical equations. The equation doesn’t change size as the image scales. Vector images won’t work everywhere. There’s currently a limit to the information they can store. They can’t be used to represent photographs. They typically work best where colors and more importantly color changes are fewer. However where they work it makes a lot of sense to use them. Like icon fonts, scalable vector graphics are a potential solution to replace some bitmap images. Scalable Vector Graphics (SVG) Scalable vector graphics hold a lot of promise, though in some respects it’s still more promise than reality at the moment. SVG isn’t supported in IE prior to version 9 and in Android prior to version 3, which is still 90+% of Android devices. Depending on the image and what you want to do with it, there can be performance issues. They’re limited to simpler images instead of photographs. That said there’s a lot of reasons to use scalable vector images. They scale SVG text is copyable text They’re resolution independent They typically require smaller files than bitmap images SVG images are accessible and machine readable (including search engines) They can interact with javascript and be styles with css They generally have good browser support They have reduced http requests SVG renders shapes using XML style markup. XML? Uggh. Don’t worry there are many javascript libraries to help you create and manipulate shapes. If you have a graphics editor capable of working with graphics, there’s a good chance it can be used to create SVG images. In fact you shouldn’t have to spend much or any time coding SVG images. Creating Simple SVG Shapes While you’d probably use a graphics editor to create SVGs let’s see how we can create simple shapes. Having never done this before myself, it took less than 5 minutes to create a circle, a rectangle, and text inside both on the page. The first is to create a document with an .svg extension along with a proper declaration and doctype. Here’s how it looks. 1 2 3 4 5 6 7 8 9 10 11 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet"> <title>Scalable Vector Graphics (SVG) Demo</title> <!-- drawing elements here --> </svg> Each shape we want to draw has it’s own tag along with attributes for rendering it. To draw a circle you would use the following. 1 <circle cx="100" cy="100" r="50" stroke="#000" stroke-width="1" fill="#ccc" /> cx and cy are the location of the circles’s center from the top and left and r is the circle’s radius. Stroke, stroke-width, and fill should be self explanatory. Drawing a rectangle is similar. 1 <rect x="200" y="50" width="250" height="100" rx="5" ry="5" stroke="#000" stroke-width="1" fill="#ccc" /> Here x and y are coordinates of the top left corner of the shape and rx and ry round the corners. Again the rest should be self-explanatory. Let’s put everything together and add some text. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet"> <title>Scalable Vector Graphics (SVG) Demo</title> <circle cx="100" cy="100" r="50" stroke-width="1" stroke="#000" fill="#ccc" /> <rect x="200" y="50" width="250" height="100" rx="5" ry="5" stroke="#000" stroke-width="1" fill="#ccc" /> <text x="78" y="100" font-family="helvetica, sans-serif" font-size="16" fill="#000">Circle</text> <text x="260" y="100" font-family="helvetica, sans-serif" font-size="16" fill="#000">Rounded Rectangle</text> </svg> If you’ve been following along, the two text elements should be easy to understand. x and y are the same coordinates as seen above and the other attributes should all be familiar font styles. Save the code above as an .svg file and load it in browser (other than IE8 and below or Android less than 3). You should see a couple of shapes with text inside. Not particularly exciting, but rather easy to create. Adding SVG to a Web Page To use SVG in practice you’ll want to include an .svg document you create in an existing web page. This too is relatively simple. You can add your document inside an object tag. 1 2 3 4 5 6 7 <object type="image/svg+xml" width="" height="" data="path-to-svg-file"> </object> Below I’ve done just that. I’ve used the code above to include this .svg document. You can also include SVG directly inside a document. 1 2 3 4 5 6 7 <svg height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" stroke-width="1" stroke="#000" fill="#cdc" /> <rect x="200" y="50" width="250" height="100" rx="5" ry="5" stroke="#000" stroke-width="1" fill="#dcc" /> </svg> The code above will directly embed a circle and rectangle in a document without the need to embed an .svg file. Note: While the code above does work to create scalable vector graphics inline in a document, it doesn’t work in WordPress. In fact I needed to use a plugin in order to embed the SVG document above. If you know of a way to use inline SVG inside WordPress, please share. Beyond Simple Shapes You aren’t limited to circles and rectangles. You can create several basic shapes. rectangles (rect) circles ellipses lines polylines (connected line segments) polygons You aren’t limited to shapes either. There’s text as you can see from the code above, as well as, paths and links. You can create fills with color, gradients, and patterns. You can add clipping masks and filter effects and you can even animate your graphics. If you’d to see where this can go and what you might be able to achieve using SVG, Adobe has put forth a css shaders proposal that’s now a W3c draft. Check out some of the videos Adobe created to demonstrate the possibilities. Because SVG can interact with the DOM, you can inspect and manipulate SVG elements as you would html elements. Change their shape, color, or position with css and javascript. You can even attach event handlers to SVG images. Again SVG isn’t a perfect solution, but there’s a lot of potential and you can start using SVG today. Tools and Libraries Creating simple shapes is easy as you can see above, however you wouldn’t want to work with more complex graphics through code alone. Fortunately you shouldn’t have to. If you have an image editor capable of producing vector images, it likely allows import and export of SVG files. Illustrator and Inkscape do. Unfortunately Photoshop doesn’t. SVG-edit is a free online editor for scalable vector graphics if you don’t have any other tools available to you. In addition to image editors you’ll probably want to make use of javascript libraries for SVG manipulation. D3.js Raphaël Processing.js jQuery SVG plugin The above libraries exist to help you create data driven documents and manipulate SVG objects, like charts and graphs Tutorials With just a little bit of searching I found quite a few tutorials. SVG basics are easy to understand, though I didn’t dig too deep into the more advanced aspects. Here are 3 from Sitepoint that had me up and running a couple of minutes. Scalable Vector Graphics: Drawing Basics How to Style Scalable Vector Graphics Using CSS How to Add Scalable Vector Graphics to Your Web Page The above are part of a series of posts on SVG. Click on some of the links at the top of these posts or check the related posts toward the bottom. Summary I’ve only scratched the surface of SVG in this overview, but hopefully it’s enough for you to see the potential. Again support isn’t perfect, but it’s as much if not more than for many other things we use in practice. Scalable vector graphics won’t replace all bitmap images, but they can replace some less complex ones. Because they scale, they fit with responsive design, and because they can interact with javascript and css, they can be made to do interesting things. Creating basic SVG shapes is quite easy. You likely have at least one editor capable of creating more complex shapes and there are a number of libraries to help you manipulate the graphics you create. The post How To Create Simple Shapes With Scalable Vector Graphics (SVG) appeared first on Van SEO Design.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

27 Pictures Of New York: My Thought Process For Composing Images | Van SEO Design

---

27 Pictures Of New York: My Thought Process For Composing Images Posted: 19 Jul 2012 05:30 AM PDT A couple of weeks ago I flew to New York with a friend to visit my family. During the 4 days we were there, I took about 500 pictures with my iPhone. It’s become my go to camera most of the time. The best camera is the one you have with you after all. By no means do I consider myself a great photographer. I do enjoy taking pictures though, and for some reason a few people seem to like them and have told me they wanted to see some of the images from New York. I thought I’d post a few and offer some thoughts about why a scene appealed to me or why I composed it the way I did. Enjoy. Manhattan Our first day started with a train ride into Manhattan. Once in the city our morning was trip to the top of Rockefeller center and our afternoon was a visit to the memorial for the World Trade Center. I’ve posted images from Top of the Rock before and think those images came out better so these will focus more on the latter part of the day and the south side of Manhattan. The image of Times Square above was one of the first I took on the day. I always find Times Square so colorful that it’s hard to resist taking a picture. It comes alive a little more at night, but even during the day the colors attract. I like how the curve of the Bowling Green subway entrance contrasts with the straight vertical columns of the building behind it. I also find myself taking a lot of pictures in the city that include some kind of foliage. There’s something about the contrast between nature and man-made that I like to capture. The only reason for taking this image was that I’d never actually been out front of the New York Stock Exchange. I guess I don’t usually walk down Wall Street. This shot is from Battery Park at the southernmost point of Manhattan. That’s New Jersey off in the distance. I kind of blew it with this image, by not getting the very top of the structure on the right. What I was trying to do was to prevent your eye from leaving the image by blocking it’s escape along each of the edges (with the exception of the top) The tree, plants, and structure should all force your eye back toward the center of the image. This image of the Statue of Liberty was taken just a few feet away from the image above and looking toward the south instead of the north. I was using the rule of thirds (a simplified golden section) guide on the iPhone to line up where Ellis Island meets the water with the lower horizontal third. This is the same image with some of the sky cropped out. Since there isn’t much happening in the sky I thought getting rid of some of it would put more emphasis on the statue. I’m not sure if the composition is any better, but that was the goal. I had no idea what this structure was until my brother told me it was a globe from the World Trade Center that had been crushed. It survived in the condition you see and was moved to Battery Park Something about the different colors in the building you see above and below attracted me to it. In the image above I was trying to get the right edge of the building along the right rule of third grid line. I often capture the same scene with slight variations. Here I turned a few degrees to the right to center the group of buildings. I also pointed the camera up a little. Variations like these let you compare images and learn. Between the two images I like this one more. This is the new Freedom Tower that’s going up. There’s some construction happening at the top, but it looks like it’s close to being done. I think it’s going to be the tallest building in the U.S. after it’s finished, though only because of the antenna at the top. We were in the Financial District to visit the World Trade Center Memorial. The footprints of the old towers are now two pools. This is the south pool. Around the outside are the names of all the people who lost their lives. Yankee Stadium With apologies to all of New England, next up was our day at Yankee Stadium for Old Timer’s Day. I didn’t take a lot of pictures of the stadium as I have plenty from a tour a couple of years ago, but I did take a few. I always get a special feeling walking up the stadium. I imagine it’s a similar feeling most fans have when they approach their team’s stadium. This is the entrance to Gate 6 Just inside Gate 6 is the Hall of Heroes. Lining the wall on the left are images of past Yankee greats. It has a way of bringing the history of the team to life. I’m also struck by how everything looks architecturally with the curving perspective. Once upon a time when left centerfield was an enormous 460+ feet from home plate a few monuments like the one above were on the field itself. When the walls were moved in back in the 70’s the monuments became what’s now Monument Park. The Miller Huggins monument above was the first, after he died unexpectedly in 1929. Monuments for Lou Gehrig, Babe Ruth, Joe DiMaggio, and Mickey Mantle followed. Today there are plaques for every player who’s number has been retired by the team. August 2, 1979 is a sad day in Yankee history. Catcher and captain Thurman Munson died while piloting his private plane. His locker has remained unused since and when they built the new stadium a few years ago they moved the locker to the Yankee museum inside the stadium. Nothing special about the above image other than it was the view from out seats. Eastern Long Island: Montauk Our last day in New York was spent driving east through Long Island to the very end of the South Fork and Montauk. The contrast of colors in the image above is what attracted me to this shot. It’s the old Parrish Art Museum in South Hampton, which has since been moved. We liked this old building better. This is a shot taken while walking down Jobs Lane in South Hampton. It screams fishing village to me and there’s a charm to the whole street, which is mainly a lot of shops. For lunch we stopped at Gosman’s Dock in Montauk for lobster. This is the view from our table looking out over Gardiner’s Bay. To the left is land and to the right water leading to the Atlantic Ocean so I tried to frame the shot that way with the right side being the only open side. A few degrees to the right of the shot above and cropped. The idea was to show more of the openness in front of us. This image is just back from where we sat to eat. It’s the center of Gosman’s Park. The water here would be to the left. This shot isn’t anything special, but I like the variation of shades in the clouds. Another shot of Gossman’s on the other side of the Gazebo. The light pole on the left and the tree on the right ideally keep you inside the picture and lead you back to the boat. This is the other side of the dock from where we ate. I have a thing for supports like these sticking out of the water. There’s a loneliness to them I think. Here I like how the supports and the structure both lead your eye to the fishing boat. Sometimes you don’t need to do much. A clock without hands that reads “time stops here” is all you need to get something interesting. I also like how well the blue clock is compositionally balanced against the white door frame. Above and below is the lighthouse in Montauk, which was our destination all along. This is as east as it gets on Long Island. In the shot above I placed the lighthouse on the right rule of third line and then moved it to the left line for comparison. I like this second shot better. The vertical structure on the left and the house on the right work better when everything is on this side in the image. This is shot through the windshield on the drive home. I grabbed it mostly for the cloud formations, though they don’t quite show up in the image as they did live. However I do like how the image turned out with the contrast between the horizontal in the clouds and the perspective of the highway receding into the background. As with many of the images here I relied on the rule of thirds grid and placed the horizon along the bottom grid line. Summary That’s my recent trip to New York in pictures. I hope my vacation pics didn’t put you to sleep. There was one day in between where I mainly visited family and stayed in the house. I didn’t take many (or any I think) pictures of that day. Again by no means do I consider myself a great photographer. Just someone who enjoys taking pictures. Hopefully some of my thoughts for why I took a picture or how I tried to compose it are helpful in some way. Photography is an easy way to practice and learn more about composition and balance. Much of the time all I do is try to compose the shapes in front of me in an interesting way. Please don’t take any of my photographic decisions as gospel. It’s all just the opinion of a true amateur who has fun pulling out a camera phone every chance he gets and seeing what kind of images he can capture.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610