[Pro] Responsive Search Field

Visit Apple.com and click the magnifying glass icon in the upper right. Note how it produces a very lovely search field while nicely compressing the navibar text at left. How do we accomplish this on a responsive site in Freeway 7?

NOTE: Whatever trick they use to get such to work beautifully on desktop computer browsers must not work in iOS. When I load Apple’s site in the iOS Simulator and click the magnifying glass icon, it takes me to a “Search Results” page where I am to type in my search query. Furthermore, when I try that in the iOS Simulator using the iPhone 4 or 5 or 6+ sims, the Search Results page displays very tiny, showing that even Apple doesn’t have a fully responsive website!

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Curious…

I don’t see a search field at all on SoftPress.com or even on Caleb Grove’s Backdraft website. Was it to difficult to implement in a responsive site, or was it merely decided that no one needs site search anymore?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It naturally depends on the project if it is required or not. Making a search field basically responsive is not a real big deal (selecting the search-box and apply a fixed% width).

I have a (non functional :slight_smile: one for trying-purposes here:

http://backstage.kimmich-digitalmedia.com/templates/GridMeister/index.html

dealing with a set of extra css:

input[type="search"]#search-box {
-webkit-appearance: none;
background: url(http://i1078.photobucket.com/albums/w498/molenmaulana/search-white_zps878b551d.png) no-repeat 10px center #3e414b;
border: 0 none;
color: #cccccc;
font-size: 14px;
font-size: 1.4rem;
padding: 8px 0px 8px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

input[type="search"]#search-box:focus {
width: 60%;
outline: none;
}

I’m not aware at all how apples search bar is built - but I bet pretty much into this direction.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas, thank you for the CSS.

I was able to recreate a similar search field on my site. It looks exactly like yours except:

  1. The “Search” text is mine is larger than yours.
  2. When I click inside, the field SHRINKS! (It should elongate.)

–James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,

Remove the:

font-size: 1.4rem;

This requires a proper declaration on the html-TAG for to use. I have a font-size of 10px there, default is 16px.

The other issue is, that I set the width of the search-field on 50%, so on “focus” 60% makes it growing. Compare your values and make the focus slightly bigger than the width declared in Freeway.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Thomas,

It’s been over a year since we last spoke on this topic, and Apple has changed the design of its search field to something more modern and, to my eyes, more impressive:

Another site that uses a similar search field design is here:

CONCEPT: When you click the Search icon, most or all the head text content vanishes, leaving you with a big search field. For mobile on a responsive site, this is probably the best way to implement search as it would be nice and big.

The problem with easily implementing these fancy search bars in freeway seems to be with one’s knowledge (or lack thereof) of CSS. You add a search field (easy in Freeway) and then you need to figure out how to properly style it in a rather non-WYSIWYG way using CSS (hard).

As is true of building a truly responsive site, I often face a situation where I know how I want the content to appear, I just don’t know how to implement it in Freeway. In the past, using table-based layouts, I never had that problem at all. But with modern web design, it’s much more challenging, perhaps because Freeway doesn’t have sufficiently easy-to-use tools, at least, for mentally challenged people like me.

–James


freewaytalk mailing list
email@hidden
Update your subscriptions at: