“Responsive Design” is a popular topic in the web design field these days, and a big business builder for designers and programmers. But what does it MEAN FOR YOU?Responsive Design lets a single version of a website adapt to each device’s resolution and show a “most appropriate” version suiting each device and its typical audience. This recognizes that both the audiences and their needs & priorities can be VERY DIFFERENT on different devices. That means businesses need to consider not the just form-factor (how content, menus, and navigation may change), but the actual content may change.
To view Responsive Design in action, click on the right margin of your browser window (the cursor will look like a two-headed arrow) and start dragging the right margin toward the left side of your monitor, to see how different screen and tablet resolutions are displayed, until you get down to roughly the width of a smartphone screen. Do this for the top of the screen, the middle of the page, and the bottom (footer) to observe how elements and display of those elements changes before your eyes. No only is this process fun, but it is informative as well.
A Quick Technical History
In the early days of the internet (around 1999, think “Y2K”) monitors where typically 800 x 600 pixels, and they slowly got larger, where today monitors with 2000+ pixels across of resolution are not uncommon. Web design adapted to enabling users to take advantage of not just larger screen sizes and better color and faster monitors.By 2007, Blackberry
offered mobile computing (mostly text) and the Apple iPhone
made the web truly mobile, and designers had to create mobile versions of websites or program mobile “apps” to reach those consumers. Click-to-call features were added for smartphone websites.Since 2010, Apple
as sold many millions of iPads
and made tablets common household devices. Designers typically either send the low-res tablets to the mobile site, and the hi-res tablets to the desktop site.The rise of Android
means that “apps” for just one platform are no longer an option, and the dominance of Google
has made Apple switch its default search to Bing
, as challenged the “only Google” focus of many SEO companies.
was originally develop as a “blog” software platform, but its ease of use and wide audience helped it to evolve as a web toolkit for less-technical users, with various individuals and companies creating templates, plug-ins and tools that make many features—which used to require a programmer or code—as simple as “drag-and-drop” (many either free or at a nominal cost). WordPress coincidentally also developed as a responsive platform, suitable for desktops, laptops, notebooks, as well as smartphones and tablets.While it looks like WordPress may be a one-size-fits-all solution, it has a number of downsides and limitations:1) Too much choice and too many options2) Technical support is hard or impossible to get (when the tools are free or cheap, what are the economic of this?) and learning curves are long and steep3) There is massive code bloat (more on this later) which makes sites run slow4) Emphasis on “pretty” means websites are slow to load because of massive image files (often not resized or compressed)5) The number of files needed to make WordPress have a negative impact on your SEO: not only does the site run slower, but the lines of code on a page before real content both have a strong adverse impact on your website’s ranking on Google (and Bing)6) Content on a page cannot be dynamically changed to suite different platforms needs or priorities: the content is The ContentFoundLocally is in the process of converting all of its websites to Responsive Design, and have completed two sites, http://MovingInCanada.com
(as well as some client projects moving to responsive versions).Our flagship site http://FoundLocally.com’s
conversion is still underway (we’ve got over 100,000 pages of content so it takes a little longer!).
Files Sizes and Webpage Loading
The Web Page Itself
On the web page itself, one thing I do is a “View-Source
” review (this is in every browser’s menus) and look at three things:1) is the META tag coding up to current Best Practices2) what percentage of the page is viewable text (not hidden code or programming)… use a highlighter to mark the visible content on the printout3) Look for key Google tags: <TITLE, <DESCRIPTION and <H1 and how far down the page are these found? How far down the page is viewable content (previous point). Anything past line 100 is BAD!
How Fast Does it Load?
To see how fast a site is running, use the Google Developers’ page Speed Iinsights
tool. Be sure to do this on competitors’ sites (that may otherwise look good), as well as on any sites offered by web developers as part of their references/portfolio.Like in school, under 50 is a “fail,” 50-60 is passable, 70 is good, 80 is great,and over 90 is really commendable.
Not all of Google’s recommendations are actionable, but they are part of a good conversation about optimization. The mobile rating also includes a User Experience rating, to gauge its smartphone friendliness.
So, to wrap up, some recommendations for current Best Practices of web design :1) Responsive Design is a must2) Use tools and coding (and/or consultants) appropriate to your budget, in-house skills, and time-frames3) Consider your audience’s needs and priorities on different devices4) Look at SEO measurement tools to ensure the new site is going to rank well (or at all) on Google & Bing. Tweak, tweak, tweak!Is WordPress an option? YES, for the do-it-yourself crowd
, and for clients who want to update their own site after its “done” or want to post a blog on their own website they way they currently post to Facebook.Is WordPress always the best answer? Not always, and in some cases, not often.
Especially if you are concerned about speed, and if you want different user experiences on different devices.