One of the very first steps that you should take in any major redesign is to get a feel for the state of the industry by taking a look around at what others are doing. When used properly, good inspiration drives you to your own unique ideas.
This is especially helpful when embarking on your first responsive design project. Today we're going to hone in specifically on blogs and take a look at how some of the early adopters in responsive blog design have approached the challenge. If you're thinking about taking your blog responsive, you won't want to miss these 25 sites! Why Isn't Design Shack on This List? "We'll get there, but we want to be sure to do it right." Every time I write anything about responsive design, the inevitable responses ask a valid question: why aren't you taking your own advice? For now, all I can say is, have patience folks. The whole reason this post came about is that I happened to be researching responsive blogs... so you can probably guess where we're going with this. We'll get there, but we want to be sure to do it right. In the mean time, feast your eyes on these 25+ sites that have already made the jump! Design & Development Blogs These are the sites that really impress me. Design blogs tend to have a ton of content and plenty going on in their home pages. Obviously, as a web page becomes more complex, the difficulty of making it responsive increases greatly. Sites like Codrops and Smashing Magazine have risen to meet this challenge and knocked it out of the park. Both of these sites start with a wide, three column format, then drop columns one and three in that order as the page narrows. Be sure to take a look at how each handles advertising as the design shifts, this is a major issue with responsive design and you'll have to decide how your projects will handle it. CodropsSmashing MagazineUnmatched StyleSnoppBricssWebAppers24 WaysPersonal Blogs Personal sites and blogs are the playgrounds of web developers everywhere. Often, before developers begin offering a service to their clients, they'll use their own sites as an experimentation laboratory. For this reason, you often see lots of really cool tricks and ideas in play. There's no client to hold them back, it's just pure creativity! Interestingly enough though, when designers have complete freedom, you'll see that they tend towards simplistic, minimal layouts. Personal blogs often take the single column route, which is obviously already primed to scale down to a mobile device. I personally like "The Backlog" by CJ Melegrito, it's a great example of a beautiful online publication that fuzes beauty and simplicity with a responsive layout. Jeff CroftNathan StainesOrdered ListAnthony CalzadillaThe BacklogMike AndersonColbow DesignElliot Jay StocksLewis MalpasScott HanselmanThe Blog Of Jon PhillipsTech Blogs Tech blogs pretty much have the exact same story as design blogs, they tend to be quite complex and feature a bunch of disparate content in various sections and content blocks. Both of the Graphic Design Company In India For Best Graphic sites below have a decent amount of complexity and handle the media query jumps quite well. Dusty CartridgeThunderboltDesign & Dev Firms Much like the personal blogs above, these sites serve as a testing ground for development companies. More than that though, these sites are really under a lot of pressure to show off and display their skills. If a dev firm can't wow me with their own site, I'm not going to pay them a truckload of cash to build mine. For this reason, these sites really need to be pixel perfect in their jump to responsive design. This is especially true when we're talking about a high profile company like Happy Cog. They have a sparkling reputation in the design industry and wouldn't want to mar it with a sloppy responsive conversion. Fortunately, they did just fine. Cognition: The blog of web design & development firm Happy CogThe Palantir BlogglobaldevMiscellaneous Everyone is going responsive these days, not just people in the tech world. Here's a handful of other blogs that I found with responsive layouts. Bahston Film CriticMinnPostBarrierefreiheit im InternetUG - Uppdrag Granskning | SVT.seShow Us Yours! The 25+ responsive blog designs above should be enough fuel to get your brain banging on all cylinders, churning out ideas for how to take your own blog responsive. If you have a second, leave me a comment below and tell me which of the sites above is your favorite. Also, if you have a responsive blog or know of any that I missed, leave a link so I can check it out!
0 Comments
Trying to promote a badly built website is a pointless exercise in frustration. In order for you to be successful at promoting your website, you must have a site that is clear, clean and full of original, interesting content. You can spend a fortune on marketing and generate hordes of traffic, but no one will buy your products if your website does not inspire confidence and trust.
Read the following tips for building a site that will draw visitors and make sales. Remember, your website represents you and your product. How do you want to be seen? GOOD CONTENT IS ESSENTIAL: Before you begin to build your website, make sure you have chosen a topic that you are familiar with and have an interest in. If you choose something that holds no interest for you, your visitors will be able to see that and judge your site to be worthless. Building a website around topics that you are not familiar with will be a constant aggravation for you to update. Make sure, however, you make your website interesting to other people. Explore what other people are interested in. If you can find something that matches your interests, try building a website around that topic. Once you have decided on the topic of your website, it's time to start writing. Always use a spell checker! No matter how brilliant a writer you are, you will still make typos. You want to make it look professional and easy to read. The text should flow naturally and be divided into easily read paragraphs. Your visitors want good quality content and they want a lot of it. Fill your site with articles (including other people's articles as long as they fit your site's theme), tips, and details of all the products and services on your site. Remember, the key to building a good website is content, content, content. DESIGN AND LAYOUT: Your first objective is to make sure your visitors can easily navigate your website and quickly access your content. Use a simple, no fuss style and layout with easy to find, well-marked links. If possible, don't make them use more than one click to move from one page to another. Sites that are full of graphics and are complicated to maneuver around do not work. Keep it simple. By keeping your graphics to a minimum, your site will load much quicker. If it takes too long for the pages to load, your visitors may not wait. We have all seen websites that are so full of blinking banner ads and other graphics that they look cheap and unappealing. META TAGS: Learn about META tags and add them to all of your pages. Meta tags are little lines of code that are placed between the HEAD and take a look at this animation website the /HEAD tags in your site's HTML code. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the content of the page. Many search engines use this information when building their index. These tags are not displayed to humans visiting your site, but they are used to influence the way your website appears in the search results. THE DESCRIPTION TAG: META name="description" content="A search engine displays the content of this tag below the title of your website when it shows up in the results." The contents of this tag are extremely important. When someone does a search on a search engine and your listing comes up, the description is displayed right below your title. Since your goal is to encourage people to click on your link, make sure your description will grab their attention and make them want to know more. If no description tag is found, the search engine endeavors to create its own description and often fails to describe your page properly. Create description meta tags that are short but informative. Why should they be short? The search engine only displays a small part of the description in the results list. If the tag contains too many words, the extra words are cut off. You want to try to avoid that. Try to place the relevant information near the beginning of the description. THE KEYWORDS TAG: META name="keywords" content="hot dogs information recipes" The keywords tag contains words and phrases relevant to the website. Commas, spaces or both can separate the words. This tag does not appear to the visitors at your site, nor do the search engines display it in their results. However, many search engines read the keywords tag and give a small increase to the ranking for the words that are mentioned in it. You should only include words and/or phrases that are relevant to your page and you should never use a word more than three times. Try to keep the length to around ten words. REVIEW YOUR SITE: Once your website is finished, make sure you go over it with a fine-toothed comb and correct any typos, errors, or broken links. Nothing is more frustrating than clicking on a link and the link is broken. Visitors to your site will assume that you do not care enough to keep your site working properly and, therefore, will leave. You need to constantly keep an eye on your website, particularly the links, especially when you make changes that require you to change filenames. A good method for checking broken links is to use an automatic link checker. There are several free programs that do this. Make sure your main page contains your contact information. Always list your name, your email address, and any other pertinent information. When visitors see that you are available to contact, they will be much more likely to trust you and click on your links! |
AuthorJust blogging about stuff that will help you, with a few tricks and tips for around the home. Archives
May 2017
Categories |