Ulyssesonline

the tech surfer

You are here: Home / 2015 / Archives for August 2015

Archives for August 2015

Apple TV Target Price is $150-$200

Apple is scheduled to release the 4th version of Apple TV on September 9. The target price is rumored to be between $150-$200. At that price, it better be really good. Roku is $99 while Chromecast and Amazon Fire TV are less than $40 dollars. The new Apple TV biggest feature is said to be with the remote. For owners of streaming boxes now, can Apple do enough to convince them to forego their current devices and buy an Apple TV for $200. That question will be answered when Apple introduces the Apple TV on September 9. Here are few articles about the upcoming Apple TV: ComputerWorld, 9to5Mac, and Gizmodo.

OS X 10.11 El Capitan

The new Mac OS 10.11 El Capitan is on track for a late September 2015 release.

Here are some of the new features:

  • Significant performance improvements
  • Better Spotlight search
  • Improved multi-window management
  • Revamped Notes app
  • Metal graphics technology
  • Pinned Sites and Tab Mute for Safari

Details of the new features is covered in MacRumors.com.

Responsive Design in 2015

With the proliferation of many devices with access to the internet, web designers have been playing catchup to make sure websites look good on all devices. Gone were the days where web designers would only design for the desktop. Today’s designers have to account for big screens, tablets as well as smart phones.

The design has to be flexible, fluid and accessible to all. This means objects, images and videos are fluid increasing and decreasing in size as the screen expands and retracts. In some cases, certain objects are turned off or displayed off screen. Responsive design wouldn’t be possible without the help of CSS 3, in particular the use of media queries.

Media queries allow designers to specify certain objects to behave a certain way based on the screen resolution. For example, an image that is flexible will have a CSS element such as this, img { max-width: 100% }. As the screen size increases and decreases, the images will shrink and grow, always maintaining a width of 100%.

Another trick is to use flexible layouts. In the past, most layouts would use fixed widths such as #page { width: 760px; }. In responsive designs, layouts would often use percentages instead of fixed number of pixels. In this case, the element would look like this, #page { width: 65%; }.

Another trick is to turning off elements on certain resolutions. For example, if you were to turn off the sidebar on small screens, you would set the display to none like this, @media (max-width: 480px) { #sidebar { display: none; } }. Or you can also set the element to be completely off screen such as this, @media (max-width: 480px) { #sidebar { margin-left: -3000px; } }.

If you want to learn how to design responsive websites, there are many tutorials out there. Most importantly, learn how to code in CSS, learn how to use media queries, learn how to manipulate elements within CSS. There are many responsive sites out there. In technology, Sony, Squarespace, Microsoft and Twitter Bootstrap come to mind. In e-Commerce, there’s Indochino, Skinny Ties, eBags, Garmin and PureCostumes are great examples.

Feel free to look around the web and look for ideas and inspirations.