The Complete Flat Website Design Guide Flat website design is steadily becoming popular replacing the commonly known intricate designs that are dominated by drop shadows, gradients and brushes. Flat websites is the new trend with a rising design style that incorporates flat shapes and icons. A flat design basically revolves around the use of triangles, circles, rectangles and other shapes without the need to use other design elements like gradients, strokes or shadows as seen on Microsoft’s most-recent computer operating system Windows 8. A flat design is specifically based on two principles- readability and simplicity which guide designers in coming up with flat yet stylish software designs, web layouts, posters and other key applications. Simplicity Flat design refrains from the use of intricacies with the absence of drop shadows, strokes and other design elements. Readability Flat website design is slowly invading apps, computers and our web pages bringing in 5 common elements that we will soon be familiar with. Typography
Responsive web design If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices. But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. So, what’s responsive web design? But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. Flexible grid The first element we have regarding responsive web design is dubbed flexible grid. Screen resolution Aspects to consider Flexible images
Conditionally load Javascript based on media query > Responsive Web Design This page is unfinished and needs further work Best practice for a long time has been to load your javascript at the end of the document to improve website performance, however in todays world of mobile devices we need an even faster solution. Responsive design has provided us with the ability to change the way the content is displayed to the end user. Most of the time we follow best practices and reorder the content into a linear page layout allowing the most relevant content to float to the top. Sometimes, however, we fall back on display: none; for content that might not be appropriate to load onto a particular breakpoint. There are plenty of bad examples of this, but a good example might be to hide an advanced mapping application on the mobile in favour of linking the user to a built in phone feature. In this case you could look at the width of the device and determine if it is of a certain size you could load in the resources, if (screen.width >= 600 ) { }
The Ultimate Guide - How To Start a Blog That Makes Money In the 1990′s people started creating online diaries. They were given the title of “web logs”. Popular myth has it that it became “we blog” and the “we” got dropped for the sake of language expediency. The word “blog” then emerged from the mist of vernacular evolution. That’s the opening story on the emergence of the blog word! Blogging has changed a lot since those times and with the evolution of the digital ecosystem it has reached new highs. A blogging tipping point The tale doesn’t stop there because the blog hit a tipping point in 2011 when Arianna Huffington sold her “super blog” to AOL for $315 million. So the humble blog is 20 years old and is no longer just about geeks and the web but about online publishing, content marketing and it has become a serious business and source revenue for many e-preneurs around the world. The attraction This includes. Learning: A place to express and structure your thoughts and creations. What’s driven this evolution? This is a heady and powerful mix.
ReView. The Responsive Viewport. Installation Include ReView.js in the head of your HTML document, just after your viewport meta tag. Note the lack of initial-scale in the viewport meta tag. This often allows for a cleaner viewport switch. ReView works without a meta tag, but providing one is recommended. Usage Any link(s) with the class ‘reView’ will automatically switch the viewport. Links are only made visible if viewport switching is possible. <a class='reView' href=' Ensure that the links are hidden via CSS to ensure that users with JavaScript disabled do not see them. Anchor Text Updates When a viewport is successfully set all ReView anchors on the page are updated. By default the text is updated with ‘Core View’ and ‘Default View’ as appropriate. Custom anchor text can be supplied via the data-attributes data-defaultText and data-coreText <a class='reView' data-defaultText='Mobile View' data-coreText='Desktop View' href=' Supported Devices
20 tools to help you create responsive web designs Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices. In this article we take a look at some of the most useful tool to help you with the creation of responsive designs. Sketching / wireframing tools First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. 1. A common problem you’ll run into when planning a responsive web design is to chose which devices and sizes you’ll design for. 2. Simple PDF templates to help you map out how layout sections will change in different resolutions. 3. Quickly get the CSS for creating your fluid grid website with this simple tool. 4. ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. Responsive design elements 5. 6. 7. 8. 9. 10. Templates and grids 11. 12. 13. 14. 15.
What Your Website Needs for 2015 The best way to guarantee a prosperous new year is an up-to-date company website. This article describes a few of the most important features your site needs going into 2015. Responsive Website Design Responsive design allows your website to automatically adjust for optimal viewing on desktops, tablets and smartphones. With so many people using mobile devices for Internet access, responsive design has quickly moved from a luxury item to a must-have feature. The best approach to responsive Web design is to start by designing for the smartphone and working “backwards” to the desktop monitor. Large, Stunning, Static Home Page Header Image Thankfully, image sliders are on the way out as the featured design element on a home page. Stunning Imagery Everywhere Else With the surge in mobile Internet use, strong imagery is becoming more important than ever. Flat Design Anyone who uses an iPhone is quite familiar with flat design. More White Space and Vertical Scrolling Interactive Elements
Designing for Retina Display The devices on which the web can be displayed increases everyday. Rather recently Apple released its new set of Macbook Pros with retina display, so called because at a normal viewing distance users wont be able to see any pixels. Designing for such a high resolution however, can become a little more tricky than you would expect. Over the years the resolution of your average monitor has gotten bigger and bigger. The sizing of elements on a retina display is adjusted for usability purposes Now this may seem like not that big of a deal, but the pixels on the new Macbook Pros are so small that a window that is 180 pixels across will take up a really tiny amount of space. The object on the left takes up twice as many physical pixels This means that a website will have to double in size to fit on a retina display. If the web page wasn’t stretched to double its size things might look a bit weird. On retina displays 1 CSS pixel is equal to 2 physical pixels in one directions Images Javascript?
A Simple Device Diagram for Responsive Design Planning Updated for 2015! Check out Analytics-driven responsive web design planning At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at. There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. The Diagram Here's the result! A couple of things to note: Our Suggested Layouts 3 Layouts
How we make RWD sites load fast as heck Posted by Scott on 07/30/2014 There has been a lot of discussion about optimizing responsive layouts for performance lately, and I think that’s great. Speed broadens access and makes users happy, much like responsive design. In the past year I’ve spent a lot of time researching page loading performance, both for our ongoing client work here at FG and for my book Responsible Responsive Design. In the process, I’ve reaffirmed my belief that we don’t need to compromise the well-known benefits of a responsive layout in order to make our sites load as fast as heck. In this post, I’ll outline some recent observations and approaches to delivering sites for speed and broader access, and link out to various tools we are using to facilitate our approach. I’ll start with some high-level observations, then later I’ll dive into the more technical how-to. Page weight isn't the only measure; focus on perceived performance Shortening the critical path Going async <head> ... <head> ... <head> ... <head> ...
Foundation Icons Fonts - ZURB Playground - ZURB.com settings heart star plus minus checkmark remove mail calendar page tools globe cloud error right-arrow left-arrow up-arrow down-arrow trash add-doc edit lock unlock refresh paper-clip video photo graph idea mic cart address-book compass flag location clock folder inbox website smiley search phone General Enclosed Set Social Set thumb-up thumb-down facebook twitter pinterest github path linkedin dribbble stumble-upon behance reddit google-plus youtube vimeo clickr slideshare picassa skype instagram foursquare delicious chat torso tumblr video-chat digg wordpress Accessibility Set wheelchair speaker fontsize eject view-mode eyeball asl person question adult child glasses cc blind braille iphone-home w3c css key hearing-impaired male female network guidedog universal-access elevator How These Were Built Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. How to Use Them We've made it super easy for you to get going with these icons! Merge in the Styles
Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency Advertisement Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. If you’re interested in exploring more Q&A, there’s a bunch more in my author archive. Resolution Aware Sprites Joshua Bullock asks: Your last round of questions was titled “Box-Sizing And CSS Sprites” which offered some great answers for two separate items, but didn’t take them that one step further for responsive design. Retina displays made a really quick and big jump in resolution. If you are drawing a solid red box on the screen, no problem at all! One solution is to make all your original images bigger. Your question was explicitly about sprites. Essentially, you make the sprite exactly (and literally) twice as big, while maintaining its proportions. Here’s a demo of that. Liquid — Fixed — Liquid Niels Matthijs asks: See demo. The New
About rich snippets and structured data - Webmaster Tools Help Rich snippets (microdata, microformats, RDFa, and Data Highlighter) Snippets—the few lines of text that appear under every search result—are designed to give users a sense for what’s on the page and why it’s relevant to their query. If Google understands the content on your pages, we can create rich snippets—detailed information intended to help users with specific queries. For example, the snippet for a restaurant might show the average review and price range; the snippet for a recipe page might show the total preparation time, a photo, and the recipe’s review rating; and the snippet for a music album could list songs along with a link to play each song. These rich snippets help users recognize when your site is relevant to their search, and may result in more clicks to your pages. Three steps to rich snippets: 1. Google suggests using microdata, but any of the three formats below are acceptable. 2. Google supports rich snippets for these content types: 3. That’s it! Use HTML markup if...
Maintaining Image Hierarchy And Aspect Ratio In Responsive Design 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. 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. Because adaptability is based on width, horizontal images need to scale more than vertical images. Check Andy’s post for a good example where this happens on a site and also an example where the hierarchy is preserved. Controlling Aspect Ratio with object-fit Making Image Maps Responsive Summary