Wireframes focus on what a page does, not what it looks like. They lack all things fancy: fonts, colors, images; their purpose is function and visualizing how all the pieces of a site fit together. Which content is top priority? How will interior page navigation be setup? Will the blog page need a different layout than regular content pages? Working out all the kinks before design elements are added forces content to be properly organized and evaluated from a functionality standpoint, reducing the amount of reworking required down the line.
Using colors, fonts and graphics that correspond to the company’s brand, the designer will flush out the wireframe and bring the content to life. The resulting design comp is a mockup of what the final website will look like.
Development is the stage where the actual coding happens, taking your project from a static design to an interactive web experience.
Responsive Web Design (RWD)
Responsive web design is when the layout of a site “responds” to the viewing device, ensuring an optimal user experience regardless of screen size. If you’ve ever browsed the web on your phone and come across a site with teeny-tiny type and impossible-to-click-the-right-one links, safe to bet it wasn’t responsive. A few years back separate mobile sites became popular to help combating the sausage-finger complex using desktop sites on smartphones was giving us, but having to maintain two different sites was far from ideal. RWD solves this problem by using media query breakpoints within one site build to manipulate the layout and styles served at various screen sizes.
Media Query / Break-Points
A media query is an umbrella rule whose boundaries are defined by a breakpoint. They enable a website to reference specific sets of styles that correspond to the width of the viewing device, while breakpoints are what determine exactly when to use each of those sets of styles. If a media query spoke english, it would say “Hi,” (or maybe not, I’m not sure how friendly they are) “all of the styles defined within me will be applicable to devices tablet sized and larger.” In this case, ‘tablet sized‘ is the breakpoint. The next media query up might tell us it houses styles for desktop sized screens. Utilizing multiple media queries in this way gives developers precise control over how a site looks across a wide variety of screen widths.
The term retina refers to devices whose resolution is so high that a person can’t discern individual pixels from a normal viewing distance. Having more pixels per square inch results in sharper graphics, so a site that is retina-ready will have its images optimized for this premium quality of display.