WebProNews

Tag: Web Design

  • All Websites Should be Using AMP

    All Websites Should be Using AMP

    John Mueller, a Webmaster Trends Analyst at Google in Switzerland, confirmed what everybody is thinking, Google and the AMP Team ultimately intends for almost all sites to display AMP versions for mobile devices. “If you ask the AMP team, they will tell you that all websites should be using AMP, “Mueller said in replying to a question from a Hangout participant. “So to some extent, I can see that making sense. It’s definitively one way to make really fast websites, or websites that load almost instantly.”

    “If you’ve been holding off because you’re saying, well, my website doesn’t need this, then maybe it makes sense to take a look again and see what it does now,” Mueller said. “So at the moment, we only show it for the kind of in the news, carousel on top, the top stories and that’s something where I expected to kind of expand to other parts of the search results as well.”

    Meuller was also asked about the recent news about eBay adopting AMP, “I think with the eBay one, even though it was an AMP, they couldn’t add to cart, or something like that,” responded Mueller. “They didn’t have that functionality on the site.”

    “There’s definitely some things that don’t work so well with AMP at the moment,” says Meuller. “But it’s an open source project, so I think people from eBay are active there as well, making new components and that’s something that I expect to evolve over time.” The Webmaster Trends Analyst added, “I am really happy that someone like eBay is taking the time to do these kind of experiments, because even if they’re not showing in search yet, we can’t get there without people actively trying things that kind of go past what’s possible now.”

    “I imagine if someone like eBay can get it to work for their site, which is really dynamic, which requires a lot of interaction, then that’s something that’ll be possible for a lot of other sites as well,” concluded Meuller.

    Check out the discussion in the Google Hangout video below:

    Ebay clearly believes that AMP is for more than just publishers and thinks it would be great for all kinds of websites and especially for ecommerce. “The speed aspect was very critical for us, and we wanted to do more for speed,” stated Senthil Padmanabhan, Principal Web Engineer at eBay. “That is when we ran into AMP.”

    The AMP project was announced around the same time we started the initial brainstorming for browse. It seemed to resonate a lot with our own thinking on how we wanted to render the new experience. Although AMP was more tuned towards publisher-based content, it was still an open source project built using the open web. Also, a portion of the traffic to the new browse experience is going to be from search engines, which made it more promising to look into AMP. So we quickly pinged the AMP folks at Google and discussed the idea of building an AMP version for the browse experience, in addition to the normal mobile web pages. They were very supportive of it. This positive reaction encouraged us to start looking into AMP technology for the eCommerce world and in parallel develop an AMP version of browse.

    Today we are proud to announce that the AMP version of the new browse experience is live, and about 8 million AMP-based browse nodes are available in production. Check out some of the popular queries in a mobile browser — Camera Drones and Sony PlayStation, for example. Basically adding amp/ to the path of any browse URL will render an AMP version (for example, non-AMP, AMP). We have not linked all of them from our regular (non-AMP) pages yet. This step is waiting on few pending tasks to be completed. For now, we have enabled this new browse experience only in mobile web. In the next couple of weeks, the desktop web experience will also be launched.

    “We are excited to partner with Google and everyone else participating on the AMP Project to close the gap in launching a full-fledged eCommerce experience in AMP,” says Padmanabhan. “We have created a combined working group to tackle the gap, and we will be looking into these items and more.” The items Padmanabhan is referring to include smart buttons, input elements, advanced tracking and A/B testing. “With items like these in place, AMP for eCommerce will soon start surfacing.”

    “We will also be looking into creating a seamless transition from the AMP view to a regular page view, similar to what the Washington Post did using Service Workers.” Padmanabhan added. “This will enable users to have a complete and delightful eBay experience without switching contexts.”

    “We are on our path to making eBay the world’s first place to shop and this is a step towards it,” concluded Padmanabhan.

  • New Google Tool To Test Your Sites Mobile Performance

    New Google Tool To Test Your Sites Mobile Performance

    Google launched a new tool today called “Test My Site” at testmysite.thinkwithgoogle.com. The tool helps you find out how well your site works across mobile and desktop devices, but its primary purpose is to make the mobile web experience faster.

    The new tool is part of the ‘think with Google‘ website that Google uses to announce studies and trends aimed in industry and to help webmasters and businesses make decisions. Google’s describes the site as a take on fresh marketing and a look at what’s next. It’s the place to go to find insights, trends and research in digital media and marketing. Google describes it as creative inspiration, industry intelligence and best practices for marketing leaders.

    The new site testing tool provides 3 categories of measurement, MOBILE FRIENDLINESS, MOBILE SPEED and DESKTOP SPEED. Each of these areas receive a score of 1-100 and a link to view ways to improve. Here is an example from the Drudge Report, a site known not to be mobile friendly:

    Screen Shot 2016-06-02 at 4.39.27 PM

    Here’s what Google says your scores say about your site

    • Mobile-friendliness: This is the quality of the experience customers have when they’re browsing your site on their phones. To be mobile-friendly, your site should have tappable buttons, be easy to navigate from a small screen, and have the most important information up front and center.
    • Mobile speed: This is how long it takes your site to load on mobile devices. If customers are kept waiting for too long, they’ll move on to the next site.
    • Desktop speed: This is how long it takes your site to load on desktop computers. It’s not just the strength of your customers’ web connection that determines speed, but also the elements of your website.
  • Adobe Releases Dreamweaver Update

    Adobe Releases Dreamweaver Update

    Adobe announced the release of a new Dreamweaver update: Dreamweaver CC 2015.2, which includes a bunch of new features, including enhancements to creative workflows.

    Enhancements have been made to the DOM panel, which let users layout their site using just the panel. You can manipulate multiple elements simultaneously, including selecting, copying, pasting, moving, wrapping, and deleting groups of elements. You can also edit tags, classes, and IDs, with support for code hints as you begin typing a class name. You can also insert elements to your web page using DOM panel.

    There’s also an updated Chromium embedded framework and web-optimized SVG via CC libraries, security updates (to prevent potential gatekeeper exploit), and email templates, as well as REMs and EMs. When adding a visual media query, in Live View, you can now choose relative measuring units.

    You can see the full feature list here.

    Images via Adobe

  • Check Out Google’s New Design-Testing Tool Resizer

    Google has a new interactive web design tool called Resizer, which lets you test how web pages respond to material design breakpoints across desktop, mobile, and tablet.

    Just go to the tool, plug in a URL and see how it looks across each.

    “As designers and developers of digital products, one of our greatest challenges is figuring out how to serve the right UI to our users at the right time,” explains Google’s Zach Gibson (via TheNextWeb). “No matter how they’re using an application, be it a phone or through VR, manipulating it with gesture or a mouse, on the latest and greatest tech or a hand-me-down 2G, it is our responsibility to make our products accessible to everyone—and that’s a pretty tall order. There’s no simple design solution to fit every need.”

    “We’ve started to offer Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns,” Gibson adds. “Now with Resizer, we have a dynamic way to test out that guidance and help spur meaningful conversations between designers, developers, and stakeholders about responsive UI.”

    You can check out Resizer here. In a blog post, Gibson looks at several demos.

    Google also has some interactive resources for design here as well as a library of over 900 system icons.

    Image via Google

  • How To Make Your Site Mobile-Friendly, According To Google

    How To Make Your Site Mobile-Friendly, According To Google

    As you’re probably aware, Google is preparing to launch an algorithm change that includes a signal telling Google sites that are mobile-friendly should get a rankings boost. This will remain just one of many signals Google takes into account when ranking content, but it’s going to be an important one.

    Is your site already mobile-friendly or do you have some work to do? Let us know in the comments.

    For one, if it were not important, Google probably wouldn’t have taken the time to pre-announce it on multiple occasions. It probably also wouldn’t be sending webmasters messages about their sites when they’re not mobile friendly. Even forgetting Google’s own messaging, it’s just common sense that this is an important signal. Many, many people spend the majority of their Internet time on their mobile devices, and many others still spend some of it that way. Mobile is not going away. If your site isn’t mobile-friendly, you’re doing yourself and your potential customers a disservice, regardless of how Google is ranking your content.

    “When it comes to search on mobile devices, users should get the most relevant and timely results, no matter if the information lives on mobile-friendly web pages or apps. As more people use mobile devices to access the internet, our algorithms have to adapt to these usage patterns,” Google says.

    The mobile-friendliness ranking signal will take effect starting April 21. Yes, Google has even given a date. That’s how serious they are about this one. They say it will affect mobile searches in all languages worldwide, and have “a significant impact” in search results.

    So you have less than two months to make sure your site is ready to go before the update starts to roll out. How should you go about doing that? Well, you might want to start by utilizing Google’s Mobile-Friendly test tool. Use this to test individual URLs. If you have a basic template that’s used for the majority of your site’s content, that will probably help a great deal, but use it to test as much of your site as is realistic.

    First, go here. You may want to bookmark it if you have some work to do.

    Enter your URL, and hit “analyze”. Hopefully you’ll get something that looks like this, telling you your page is mobile-friendly:

    If the page is deemed mobile-friendly, Google tell you how Googlebot sees the page. It might say something like, “This page uses 9 resources which are blocked by robots.txt. The results and screenshot may be incorrect.”

    It will give you a link to expand such resources and get a look at what they actually are. It also gives you a link to learn how to unblock them for Googlebot.

    If your URL is not deemed mobile-friendly, Google will tell you specific reasons, as well as info about how Googlebot sees it, and resources to help you fix issues. Reasons a page isn’t mobile friendly might include things like: “content wider than screen,” “uses incompatible plugins,” “links too close together,” “text too small to read,” “mobile viewport not set,” etc.

    Google recommends the following platforms for creating new sites, and chances are you’re already using one of them: WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix, and Google Sites. Google provides a dedicated guide for each one of these platforms for making your site mobile-friendly. You can find each of these here.

    Google also gives the general guidelines of backing up your site before making any changes, updating your CMS to the latest version, making sure any custom themes you’re using are mobile-friendly, and reviewing support forums for the CMS to see what issues people might be having with the mobile versions of their sites

    To make sure a custom theme is mobile-friendly, view the theme from the admin panel of your CMS and look for words like “mobile” or “responsive” in the documentation, and if there’s a demo template available, put the URL into Google’s mobile-friendly test tool. Google also suggests making sure the template is fast by checking the Speed section of PageSpeed Insights and making sure the Speed section has no issues marked as “should fix”.

    To get into the technical details of making a site mobile-friendly, you’re going to want to take a look at the documentation on Google’s Web Fundamentals site. Here, you’ll find options for your first multi-device site and starting your site with the Web Starter kit.

    The former delves into creating your content and structure and making it responsive. The TL;DR of content creation as Google breaks it down, is: Identify the content you need first; Sketch out information architecture for narrow and wide viewports; and Create a skeleton view of the page with content but without styling. The TL;DR for making it responsive is as follows: Always use a viewport; Always start with a narrow viewport first and scale out; Base your breakpoints off when you need to adapt the content; and Create a high-level vision of your layout across major breakpoints.

    The Web Starter Kit section is broken into three parts: Set Up Web Starter Kit, Development Phases, and How to Use the Style Guide.

    Of course even though these documents are long, you’re probably still going to want to read them.

    Then there’s the Mobile SEO guide. This is separated into four parts: Choose your mobile configuration; Signal your configuration to search engines; Avoid common mistakes; and Configure for other devices.

    The “Choose your mobile configuration” section deals with understanding different devices and key points in going mobile, selecting mobile configuration, and answers frequently asked questions. The “Signal your configuration to search engine” section talks about responsive web design, dynamic serving, and separate URLs.

    The “common mistakes” part talks about blocking JavaScript, CSS and image files, unplayable content, faulty redirects, mobile-only 404s, app download interstitials, irrelevant cross-links, and slow mobile pages. That last part talks about configuring for tablets and feature phones (when Google says mobile, it’s referring to smartphones).

    This whole mobile SEO guide is far too extensive to get into here, but you do need to know about it, and you’re going to want to go through it and make sure you’re not overlooking anything.

    “Design your site to help make it easier for your customer to complete their most common tasks: from task conception, to visiting your site, to task completion,” Google says. “Outline the potential steps in your customers’ journey to make sure the steps are easy to complete on a mobile device. Try to streamline the experience and reduce the number of user interactions.”

    “Making a mobile site requires prioritization,” it says. “Start by working out what the most important and common tasks are for your customers on mobile. Being able to support these tasks is critical and this is why the measure of your mobile site is how well customers can complete their objectives. There are ways to make the design of your site support ease of use too. Focus on consistency in your interface and providing an unified experience across platforms.”

    Many site owners are simply going to have to get outside help. Google knows this, and also offers advice for working with developers. While Google elaborates here, it recommends asking to see your developer’s references and portfolio of mobile sites, making sure they understand your mobile customer, asking them to make a commitment to speed, having them install web analytics, making sure they’re aware of Google’s Webmaster Guidelines, and making sure the contract includes improving the mobile site after the initial launch.

    It’s entirely possible to make a site mobile-friendly for no extra money. This is the case if you have skills required to implement the steps from Google’s guides discussed above or if you are able to use a responsive theme. Things can get more expensive if you have to hire the developer, so some sites are going to have to make a big choice.

    Google says the top three mistakes beginners will want to avoid when it comes to creating a mobile-friendly site, are: forgetting their mobile customer; implementing the mobile site on a different domain, subdomain, or subdirectory from the desktop site; and working in isolation rather than looking around for inspiration. In other words, keep an eye on what others are doing.

    Google has additional resources available with its Mobile Playbook, Think with Google for the Mobile Platform, and its Multi-Screen Success Stories.

    Having a mobile-friendly site is good for more than just Google rankings. It’s good for your site visitors, and could mean the difference in getting a conversion or not. The search visibility will also help in that area, and it’s also likely that it will end up helping you in other search engines besides Google. None of them are going to want to point their users to inefficient pages.

    Do you plan on making changes to your website due to Google’s coming change? Let us know in the comments.

    Images via Google

  • Infographic Looks At Web Design Trends

    Infographic Looks At Web Design Trends

    A few months ago, we shared an infographic from Aptitude looking at the history of web design that was pretty popular. Today, we have one from WhoIsHostingThis? examining trends in web design for 2014.

    “Websites have certainly changed over the past 20 years,” a spokesperson for the company says. “Remember the days of flashing graphics, crazy fonts, and auto-play music? Thankfully, those days have led to a more minimalist approach so that today we enjoy sites that are simpler and user-friendly. We’ve seen some new trends lead the web design pack so far in 2014 (such as responsive design and vertical scrolling) and there are plenty more up-and-comers on the horizon.”

    Image via WhoIsHostingThis?

  • Google To Note When Pages May Not Work In Mobile Results

    Google is going to start letting mobile searchers know when results include pages that may not work on their devices. On a device that doesn’t support Flash, for example (which includes iOS and Android versions 4.1 and higher), Google will include a message with the result that says, “Uses Flash. May not work on your device.”

    “A common annoyance for web users is when websites require browser technologies that are not supported by their device,” write Google’s Keita Oda and Pierre Far. “When users access such pages, they may see nothing but a blank space or miss out a large portion of the page’s contents.”

    Here’s what one of the results may look like:

    “Fortunately, making websites that work on all modern devices is not that hard: websites can use HTML5 since it is universally supported, sometimes exclusively, by all devices,” the Googlers say. “To help webmasters build websites that work on all types of devices regardless of the type of content they wish to serve, we recently announced two resources: Web Fundamentals (a curated source for modern best practices); and Web Starter Kit (a starter framework supporting the Web Fundamentals best practices out of the box).”

    You can find Web Fundamentals here. On the site it’s described as a comprehensive resource for multi-device web development. It includes sections on multi-device tools, multi-device layous, forms and user input, images/audio/video, optimising performance, and device access.

    Web Starter Kit is here. From the site, you can download the beta kit, which includes a responsive boilerplate, a style guide, cross-device sync, live browser reloading, performance optimization, a built-in HTTP server, PageSpeed Insights reporting, and Sass support.

    Google also notes that you should not block crawling of any Googlebot of CSS, JavaScript or images with robots.txt or otherwise.

    Image via Google

  • Google Tells You How To Serve Your Homepage To International Users

    Google is offering some new guidance on creating homepages for international users. The company took to its Webmaster Central blog on Monday morning to discuss the topic.

    Specifically, it looks at three ways to configure your homepage (or landing page) – show everyone the same content, let users choose, or serve content depending on their location and language. Any of these options are fine, but Google has recommendations for each method.

    When it comes to showing everyone the same content, Google says all countries and languages should be accessible on their own unique URLs, and recommends including a banner to suggest a different version to users from other locations or with different language settings, like so:

    While technically, this is kind of letting users choose, the actual second option Google refers to means serving a country selector page on your homepage, and letting them choose which content they want depending on country and language. All users would see the same page with the same options.

    “If you implement this scenario on your international site, remember to use the x-default rel-alternate-hreflang annotation for the country selector page, which was specifically created for these kinds of pages,” Google’s Zineb Ait Bahajji and Gary Illyes write on the blog. “The x-default value helps us recognize pages that are not specific to one language or region.”

    Or you can just automatically serve the appropriate HTML content to your users depending on their location and language settings. Google says to do this by using server-side 302 redirects or by dynamically serving the right HTML content.

    “Remember to use x-default rel-alternate-hreflang annotation on the homepage / generic page even if the latter is a redirect page that is not accessible directly for users,” the two write. “Note: Think about redirecting users for whom you do not have a specific version. For instance, French-speaking users on a website that has English, Spanish and Chinese versions. Show them the content that you consider the most appropriate.”

    They elaborate a bit more on this and discuss rel-alternate-hreflang annotations in the post.

    This certainly isn’t the first time Google has talked about optimizing for international users. About a year ago, the topic was discussed on the same blog.

    That time Google gave six practical “quick tips,” including making pages I18N-ready in the markup, as opposed to the style sheets, using one style sheet for all locales, using the [dir=’rtl’] attribute selector, using the :lang() pseudo class, mirroring left- and right-related values, and keeping an eye on the details.

    More on that here.

    Image via Google

  • This Infographic Provides An Interesting History Of Web Design

    Spending every day on the Internet, it’s sometimes easy to forget or to take for granted just how far the web has come, especially in terms of design. Don’t get me wrong. There are still plenty of embarrassing designs out there, but by and large, web design has evolved significantly since the early 90s.

    The following infographic from Aptitude gives us a walk down memory lane, and helps us appreciate the web of today, even if it still has a long way to go.


    The Rapid Growth of Web Design: Past to Present (Infographic)

    Image via Aptitude

  • Few Top Web-Only Retailers Are Using Responsive Design

    Few Top Web-Only Retailers Are Using Responsive Design

    The Search Agency looked at the top 100 web-only retailers based on Internet Retailer’s Top 500 list of e-commerce sites in order to evaluate how they’re handling mobile. Specifically, they wanted to see if these sites are more mobile-ready than others.

    They found that a shockingly small amount of them (9) were using responsive design, which is what Google apparently prefers. 59 of them used dedicated mobile sites, and the rest simply used desktop sites.

    “The average load time for all companies was 2.99 seconds, significantly greater than Google’s recommended 1 second,” the firm says. “The average score was only 2.808 out of 5. The companies with the highest scores were Nasty Gal, eBags, and Zazzle.”

    “Sites that ranked higher on the list tended to be more female-oriented businesses,” it adds. “For instance, the highest scoring industries were jewelry, health/beauty, and accessories/apparel.”

    It’s worth noting that Google supports sites with dedicated, separate mobile versions just fine. You can read more about mobile optimized sites from the search engine here.

    You can find the full report here (via MarketingLand).

    Image via Google

  • Demand Media Announces Designs.com Platform For gTLDs

    Demand Media Announces Designs.com Platform For gTLDs

    Demand Media announced that later this year, it will launch Designs.com, as the new gTLDs become available. The site will feature a platform to create designs for sites utilizing the new domain extensions.

    “The goal is to have easy ways for folks who have registered a new gTLD to quickly find categorized templates and tools for building a website,” a spokesperson for the company tells WebProNews.

    New Designs.com sites will be included with the registration of the domain extensions, such as .dentist and .social. Designs.com will be integrated into the purchase process of partnering domain and web hosting providers.

    “A consumer using .FAN needs features related to sharing, ‘liking’ and growing a community, while a professional using .ARCHITECT needs features related to a strong visual portfolio and self-promotion,” says Nick Nelson, GM of Designs.com. “Until today, tools and templates have been designed for no-one in particular. New gTLDs are for specific audiences, so we must have tools that create a web presence with the same tailored approach, making the website and web address inseparable.”

    Designs.com will feature a point-and-click design tool, and customers can see right away how their site will look on mobile devices. It will also include access to drag-and-drop social media tools.

    You can see the introductory video here.

  • Google: We Still Need Text To Index Your Content

    Google’s latest Webmaster Help video discusses Google’s need for text in indexing content. Matt Cutts responds to a question about how important text is in getting Google to understand their site. The user has a site that is mostly made up of images, and says that users like it better, bounce rate has declined, and conversions are up.

    “Google does still want text,” he says. “So there’s a couple options. One is: if you have an image that you’ve made of some text that’s really beautiful, you can include some textual content there. You can sort of say, ‘alt,’ you know, or the title – that sort of thing. So you can say, for an image, here’s some text to go along with that, and that can help.”

    He goes on to say that one reason a site might be having more user interaction, time on site, conversions, etc., is because it’s prettier. “And we see that,” he says. “Better design can help people enjoy and use your site more.”

    He also suggests considering Google Web Fonts.

  • Matt Cutts On Google’s Handling Of Single-Page Sites

    Google has released its latest Webmaster Help video. This time, Matt Cutts discusses single-page sites, and how Google handles them. Specifically, he responds to the following user-submitted question:

    What does Google think of single-page websites? They are becoming more complex and there are some great websites using only a single page (+lots of CSS and JavaScript) bringing the same user experience as a regular website with many subpages.

    “Google has gotten better at handling javascript, and a lot of the time, if you’re doing some strange or unusual javascript interaction, or pinning some part of the page, or something like that, or having things fold in or fold out, we’re pretty good at being able to process that,” says Cutts. “In general, I would run a test first. I wouldn’t bet your SEO legacy on this one single page working well if the javascript or CSS is really obscure or maybe you’ve forgotten and blocked that out in robots.txt. But if you run the test, and you’re pretty happy with it, I don’t necessarily see a problem with that.”

    “It’s a different convention,” he continues. “Sometimes it works. Maybe you get better conversions, maybe you don’t. It’s going to depend on what your particular area is, what the topic is, what kind of layout you come out with…but if it works for you, and for users to have that all on one page, for the most part, it should work for Google as well.”

    On a semi-related topic, here’s what Cutts had to say about a year ago about blocking Google from javascript and CSS. Here, he talks about Google getting better at handling javascript.

  • Go Daddy Acquires M.dot For “Mobile First” Website Creation

    Go Daddy announced today that it has acquired M.dot Inc., the makers of popular small business website creation/management app M.dot. Go Daddy says the move will bolster its “mobile first” strategy, as it will offer it to its 11 million customers as a way to easily create and manage mobile sites from their smartphones.

    “We’re pleased to welcome M.dot to our growing Go Daddy family,” said recently appointed Go Daddy CEO Blake Irving, who made the formal announcement at the ribbon-cutting ceremony for a new Go Daddy office in Sunnyvale on Monday.

    “M.dot’s global vision of a mobile future for small businesses fits beautifully with what our customers need right now,” he added. “Go Daddy wants to help businesses connect with their customers wherever they are in the world, and that means providing killer mobile technology. It also means helping our customers manage their business from anywhere, anytime with the simplicity of their smartphone or tablet. With M.dot, small businesses can compete on a big-time level without spending big-time money. We’re completely stoked to have M.dot on board.”

    M.dot co-founder Pave Serbajlo said, “Go Daddy was built from scratch and is now a multi-billion dollar company – their industry expertise and achievements are inspiring,. We’re looking forward to taking mobile software for small businesses to the next level with Go Daddy. We share the same vision for mobile. We’re passionate about small businesses, start-ups and entrepreneurs … we all want to build software products that enable our customers to succeed online.”

    The M.dot app is already available in the App Store.

    Terms of the deal were not disclosed.

  • Look At Craigslist’s New Visual Design Style

    Craigslist is well known for its design, or lack thereof, so it’s interesting that the site now has a more visual listing style.

    Jeremy Zawodny tweeted about the changes over a week ago, but they’ve gone relatively undiscussed until TechCrunch picked up on the story on Sunday after a lead from Matt Inouye.

    Here’s a look:

    Craigslist design

    This “Grid View” recently started showing up as an option on search results pages.

    Special? Not particularly. It’s just interesting that such a move is randomly coming from Craigslist in 2013. At least it still looks relatively old fashioned.

  • The Best Drunken SEO Pitch You’ll Hear Today

    The Best Drunken SEO Pitch You’ll Hear Today

    McCollum & Griggs LLC, a Kansas City law firm has put out a humorous clip featuring a voicemail they claim comes from West Coast SEO company. The guy, who the firm says is drunk (which does appear to be quite possible, based on the audio) claims to be from Microsoft.

    “We’re pretty sure this guy is not from Microsoft,” Phil Singleton, CEO of Kanasas City Web Design, which handles the firm’s site, tells WebProNews.

    “An SEO & Internet marketing company on the West Coast tried to sell a domain name related to personal injury law to Kansas City attorneys, McCollum & Griggs, LLC,” David McCollum from the firm explains in the video description. “After a couple days of civil discussions with the domain seller, the lawyers politely passed on the opportunity after discussing with their Kansas City SEO firm. The next day, the supervisor (or owner) called back and left a drunken rant on the attorneys’ voicemail.”

  • Google Talks About Optimizing For Tablets

    If your site isn’t optimized for different devices that people are using, it’s not going to look good for Google when they point users to your site. This is something to keep in mind, when you’re considering optimizing for mobile search and searches from tablets.

    Google wants to provide a good experience to users, and users will not benefit from a site that doesn’t cater to the device they are using, even if the content is there. Google recognizes this, and it seems fairly likely that they will take measures to keep your site from showing up if it’s not optimized. Maybe not your site specifically, but this seems like they kind of thing they’d want to improve upon algorithmically.

    Google suggests using responsive design as a way to ensure that your site looks good across devices. They don’t say it will actually help you in search rankings, but considering Googe’s emphasis on user experience, and the fact that they’re even suggesting it, seems to indicate that this is something they’re paying attention to.

    Google has talked about this a number of times in the past. Here are some steps they provided earlier this year, for example. The next month, they shared more advice. Now, they’re talking about making sure you give tablet users the full-sized web, emphasizing that you should not be showing these users a mobile-specific site.

    “When considering your site’s visitors using tablets, it’s important to think about both the devices and what users expect, say Google’s Pierre Far and Scott Main in a joint blog post. “Compared to smartphones, tablets have larger touch screens and are typically used on Wi-Fi connections. Tablets offer a browsing experience that can be as rich as any desktop or laptop machine, in a more mobile, lightweight, and generally more convenient package. This means that, unless you offer tablet-optimized content, users expect to see your desktop site rather than your site’s smartphone site.”

    “Our recommendation for smartphone-optimized sites is to use responsive web design, which means you have one site to serve all devices,” they write. “If your website uses responsive web design as recommended, be sure to test your website on a variety of tablets to make sure it serves them well too. Remember, just like for smartphones, there are a variety of device sizes and screen resolutions to test.”

    They also note that another approach is to have separate sites for desktops and smartphones, and just to redirect users to the relevant version. Just make sure you’re sending tablet users to the desktop version.

    Still, tablets are coming in a variety of sizes these days. Some of them are getting quite small. Responsive design might be the best bet.

    The two note that they “do not have specific recommendations for building search engine friendly tablet-optimized websites.”

  • Mozilla Mozaic Might Be The Future Of Bookmarks

    The bookmark hasn’t changed in a long time. Regardless of browser, the bookmark is a link in a long line of other links that the user has saved for easy access. Chris Lee, an interaction designer and developer working with the Firefox UX team, wants to bring the bookmark into the future.

    After finding inspiration in Pinterest and iTunes, Lee has crafted what he calls Mozaic. It’s a new way of displaying bookmarks in a way that takes “advantage of modern advances in usability.” By that, he means that Mozaic displays all of your bookmarks in a visual style reminiscent of Chrome’s and Firefox’s tab page.

    Mozilla Mozaic Future Of Bookmarks

    Lee has added the following features to the current version of Mozaic:

  • A visual thumbnail view of pages
  • A more traditional list view with site icons
  • Single page layout instead of a folder hierarchy sidebar
  • Contained within the browser window instead of a separate window
  • “Sticky scroll” group headers that remain visible as you scroll
  • It shows bookmarks, tab groups, and history

    • If you’re interested in the design process behind it, Lee also has an interactive slide showcase detailing the “Bookmarks of the Future.”

    Mozaic is also available on GitHub for download as a somewhat functional add-on for newer versions of Firefox. Lee warns that it might be slightly unpredictable at this point, but it’s an interesting take on the tired concept of bookmarks.

  • Adobe Introduces Edge Tools For HTML5 Development

    Adobe Introduces Edge Tools For HTML5 Development

    Adobe and its products have been instrumental in constructing how we view the Web. Flash was, and still is, a major innovator in the Web-based video and gaming arena. The company, however, saw that HTML5 will one day be the future. That’s why Adobe has begun investing heavily in it through various software like Adobe Shadow. This morning, the company announced its new plan to take Web development and HTML5 even further.

    At its Create the Web event in San Francisco, Adobe CTO Kevin Lynch revealed the company’s bid to help build the future of the Web – Edge Tools and Services. The new tools take all of Adobe’s previous efforts in HTML5 development, and combines them with brand new tools that will help creative and technical minds alike create Web sites.

    Edge Tools and Services includes the following software:

  • Edge Animate – A motion and interaction design tool that allows users to bring animated content to the web using HTML, JavaScript and CSS.
  • Edge Inspect – An inspection and preview tool that allows front-end web developers and designers to efficiently preview and debug HTML content on mobile devices.
  • Edge Code – A code editor, built on the Brackets open source project, optimized for web designers and developers working with HTML, CSS and JavaScript.
  • Edge Reflow – A responsive web design tool to help users create layouts and visual designs with CSS, the standard for styling HTML content.
  • Edge Web Fonts – A free web font service for using a growing library of open source fonts on websites and in apps.
  • Typekit – A service that gives designers and developers access to a library of hosted, high-quality fonts to use on their websites.
  • PhoneGap Build – A service for packaging mobile apps built with HTML, CSS and JavaScript for popular mobile platforms.

    • Edge Reflow was only shown in preview form today and will be available for general preview later this year. The rest of the software, including Edge Animate, Inspect, PhoneGap Build and WebFonts will be available today. Edge Code will also be available, but it’s still in preview.

    “We are excited to put a powerful new set of HTML5 tools into the hands of web designers and developers and can’t wait to experience the beautiful websites, digital content and mobile apps they’ll create,” said Danny Winokur, vice president and general manager, interactive development at Adobe. “We are passionate about enabling creative people to do anything they can imagine with web technologies, which is why we’re contributing to the web platform and making the Edge Tools & Services available for free, including the first release of Edge Animate.”

    Adobe hopes that these new tools will help developers and creators alike innovate the Web, including four key areas: layout, foundational graphics, cinematic visual effects, and typography. These four areas are central to the evolution of the Web by making it more expressive.

    To help get people started, Adobe will be giving away Edge Animate in Creative Cloud for free starting today. After the introductory period, it will go back up to its normal $499 perpetual license price. Those who don’t have that kind of money laying around can opt for the much cheaper $14.99 per month licensing fee.

    Those looking for the best bang for their buck, Adobe will be offering all of its new Edge Tools alongside CS6 in its Creative Cloud membership. It’s $49.99 a month under an annual contract.

    It’s not quite there yet, but the future of the Internet is going to the Web. HTML5 is heralded as what’s leading the charge to this brave new future. Adobe wants a part of that, and the company’s new Edge tools helps get a foot in the door near the beginning. Now it’s up to designers and developers to create the future.

  • Treehouse Is Growing, Is About To Offer Android Courses

    Web design and development site Treehouse is gaining users. Users that are willing to pay at least $25 a month to build their skills.

    Over the weekend, Treehouse surpassed 12,000 users. “That’s not just 12,000 folks signed up to an email list for free classes they don’t get much out of,” the company tells WebProNews. “That’s 12,000 students paying $25/month for access and regularly spending time learning.”

    Treehouse does have videos that are free to watch, but only a small portion of them are free. “To learn from all of our courses, you need to pay $25 per month,” CEO Ryan Carson tells us.

    Treehouse does have a couple of different plans. That’s the cheap one – the “Silver Membership”. There’s also a “Gold Membership,” for $49 a month with some additional perks.

    Treehouse offers courses in web design, web development and iOS development. Carson says the interest in web design is greater than both of the others.

    On the advantages and challenges of developing for iOS versus the web, Carson says, “The advantage of iOS is that there is a huge app economy in the Apple App Store and the Android App Store. It’s a brand new channel to customers that was untapped before. The disadvantage to iOS apps are that the iteration cycle is much slower as each time you change the app, you have to re-submit it to the app store, wait for approval and then it goes live.”

    There are plans to add Android developer training. In fact, it will be going live in a few weeks, Carson says.

    Treehouse will also soon launch courses in PHP, WordPress, jQuery and some other unnamed areas. Without getting into specifics, he says they’re also going to make learning more fun.

  • Google Has New Advice For Mobile SEO

    Google has been pushing its “GoMo” campaign for a while, trying to get sites set up for mobile success, but today, Google posted specific recommendations for smartphone-optimized sites on its Webmaster Central blog.

    Google says it supports the following configurations for sites targeting smartphones:

    1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

    2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.

    3. Sites that have a separate mobile and desktop sites.

    Google Webmaster Trends analyst Pierre Far also lists two advantages of utilizing responsive web design:

    1. It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.

    2. Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.

    Google “strongly” recommends using the Vary HTTP header to let its algorithms know that the content might change for different user agents. Google says it uses this as a crawling signal for Googlebot-Mobile.

    The company also notes in a help center article, “Don’t block Googlebot from crawling any page assets (CSS, javascript, and images) using robots.txt or otherwise. Being able to access these external files fully will help our algorithms detect your site’s responsive web design configuration and treat it appropriately.”

    Google has specific annotations for desktop and mobile URLs that it says will help its algorithms understand your site. There is a whole section about this in Google’s Building Smartphone-Optimized Sites recommendation page.

    A recent study from Adobe found that website visits from tablets grew about 10 times faster than the rate of smartphones within two years of market introduction, and by over 300% in the last year. Part of the reason for this, according to the company, is that the majority of sites are not optimized for mobile, and this is reflected when users view them on smartphones. Tablets tend to handle the sites better, to where the optimization isn’t as much of a factor.

    “Tablets are better for surfing than smartphones,” Adobe Digital Index Director, Austin Bankhead, told WebProNews at the time.

    Perhaps if enough sites take Google’s advice, smartphone web surfing in general will be better for everyone.